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

2
js/components/add-to-cart-button.js
View File

@@ -66,7 +66,7 @@ class AddToCartButton extends HTMLElement {
color: var(--color-text-inverse, #ffffff);
}
</style>
<button class="add-to-cart-button" type="button">
<button class="add-to-cart-button" type="button" aria-label="Voeg toe aan winkelwagen">
${plusIcon({ size: 16, color: "#ffffff" })}
${shoppingBagIcon({ size: 16, color: "#ffffff" })}
</button>

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>
`;

31
js/components/footer-accordion-item.js
View File

@@ -3,10 +3,13 @@
* Expandable accordion item for footer navigation
*/
class FooterAccordionItem extends HTMLElement {
static _idCounter = 0;
constructor() {
super();
this.attachShadow({ mode: "open" });
this._expanded = false;
this._uniqueId = `accordion-${FooterAccordionItem._idCounter++}`;
}
static get observedAttributes() {
@@ -34,6 +37,7 @@ class FooterAccordionItem extends HTMLElement {
this._expanded = !this._expanded;
const content = this.shadowRoot.querySelector(".accordion-content");
const icon = this.shadowRoot.querySelector(".accordion-icon");
const header = this.shadowRoot.querySelector(".accordion-header");
if (content) {
content.classList.toggle("expanded", this._expanded);
@@ -41,6 +45,9 @@ class FooterAccordionItem extends HTMLElement {
if (icon) {
icon.classList.toggle("rotated", this._expanded);
}
if (header) {
header.setAttribute("aria-expanded", this._expanded.toString());
}
}
render() {
@@ -57,7 +64,10 @@ class FooterAccordionItem extends HTMLElement {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--spacing-lg, 1.5rem) 0;
background: none;
border: none;
cursor: pointer;
user-select: none;
}
@@ -65,6 +75,11 @@ class FooterAccordionItem extends HTMLElement {
.accordion-header:hover {
opacity: 0.9;
}
.accordion-header:focus {
outline: 2px solid var(--color-text-inverse, #ffffff);
outline-offset: 2px;
}
.accordion-title {
font-size: var(--font-size-base, 1rem);
@@ -98,11 +113,21 @@ class FooterAccordionItem extends HTMLElement {
color: var(--color-text-inverse, #ffffff);
}
</style>
<div class="accordion-header">
<button
class="accordion-header"
type="button"
aria-expanded="${this._expanded}"
aria-controls="accordion-content-${this._uniqueId}"
>
<h3 class="accordion-title">${title}</h3>
<chevron-down-icon class="accordion-icon" size="24"></chevron-down-icon>
</div>
<div class="accordion-content">
</button>
<div
id="accordion-content-${this._uniqueId}"
class="accordion-content"
role="region"
aria-labelledby="accordion-header-${this._uniqueId}"
>
<slot></slot>
</div>
`;