rubberducky/milinda-pitch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: wcag improvements

Browse Source
This commit is contained in:
Tim Rijkse
2026-01-16 11:06:33 +01:00
parent 5b068ac51a
commit 4e650899c8
7 changed files with 754 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
js/components/content-tabs.js
View File

@@ -25,6 +25,33 @@ class ContentTabs extends HTMLElement {
button.addEventListener("click", () => {
this.setActiveTab(index);
});
// Keyboard navigation
button.addEventListener("keydown", (e) => {
const tabCount = this.tabs.length;
let newIndex = this.activeTab;
switch (e.key) {
case "ArrowLeft":
newIndex = (this.activeTab - 1 + tabCount) % tabCount;
break;
case "ArrowRight":
newIndex = (this.activeTab + 1) % tabCount;
break;
case "Home":
newIndex = 0;
break;
case "End":
newIndex = tabCount - 1;
break;
default:
return;
}
e.preventDefault();
this.setActiveTab(newIndex);
this.shadowRoot.querySelectorAll(".tab-button")[newIndex]?.focus();
});
});
}
@@ -44,10 +71,19 @@ class ContentTabs extends HTMLElement {
// Update tab buttons
const tabButtons = this.shadowRoot.querySelectorAll(".tab-button");
tabButtons.forEach((button, index) => {
button.classList.toggle("active", index === this.activeTab);
const isActive = index === this.activeTab;
button.classList.toggle("active", isActive);
button.setAttribute("aria-selected", isActive.toString());
button.setAttribute("tabindex", isActive ? "0" : "-1");
});
// Update panels
// Update panels in shadow DOM
const shadowPanels = this.shadowRoot.querySelectorAll("[role='tabpanel']");
shadowPanels.forEach((panel, index) => {
panel.style.display = index === this.activeTab ? "block" : "none";
});
// Update slotted panels
const panels = this.querySelectorAll("[slot^='panel-']");
panels.forEach((panel, index) => {
panel.style.display = index === this.activeTab ? "block" : "none";
@@ -62,7 +98,10 @@ class ContentTabs extends HTMLElement {
class="tab-button ${index === this.activeTab ? "active" : ""}"
type="button"
role="tab"
id="tab-${index}"
aria-selected="${index === this.activeTab}"
aria-controls="panel-${index}"
tabindex="${index === this.activeTab ? "0" : "-1"}"
>
${tab}
</button>
@@ -116,6 +155,11 @@ class ContentTabs extends HTMLElement {
.tab-button:not(.active):hover {
opacity: 0.7;
}
.tab-button:focus {
outline: 2px solid var(--color-purple, #951d51);
outline-offset: 2px;
}
.tab-panels {
min-height: 100px;
@@ -129,9 +173,15 @@ class ContentTabs extends HTMLElement {
${tabsHtml}
</div>
<div class="tab-panels">
<slot name="panel-0"></slot>
<slot name="panel-1"></slot>
<slot name="panel-2"></slot>
<div id="panel-0" role="tabpanel" aria-labelledby="tab-0">
<slot name="panel-0"></slot>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
<slot name="panel-1"></slot>
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2">
<slot name="panel-2"></slot>
</div>
</div>
</div>
`;