Hello Ismael,
thank you for your quick reply.
Your custom Code didn’t work but I made some changes and now it is possible to open and close the accordion items.
Here is the new JS-Code:
function initializeAccordionKeyPress() {
const accordionItems = document.querySelectorAll(’.x-acc-item’);
accordionItems.forEach((item, index) => {
const button = item.querySelector('.x-acc-header');
const content = item.querySelector('.x-acc-content');
const chevronIcon = button.querySelector('svg, i');
// ARIA-Attribute korrekt initialisieren
button.setAttribute('role', 'button');
button.setAttribute('tabindex', '0'); // Nur der Button ist erreichbar
button.setAttribute('aria-expanded', 'false');
button.setAttribute('aria-controls', `panel-${index}`);
content.setAttribute('id', `panel-${index}`);
content.setAttribute('aria-hidden', 'true');
content.setAttribute('tabindex', '-1'); // Inhalt nicht fokussierbar, wenn geschlossen
// Entferne den Fokus vom Chevron (rein dekorativ)
if (chevronIcon) {
chevronIcon.setAttribute('aria-hidden', 'true');
chevronIcon.setAttribute('tabindex', '-1');
}
// 🎯 Klick- und Tastatursteuerung für den Button
button.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
button.click();
}
});
// 🎯 Klick-Event für den Button
button.addEventListener('click', () => {
const isExpanded = button.getAttribute('aria-expanded') === 'true';
// Nur Button bleibt fokussierbar
button.setAttribute('aria-expanded', !isExpanded);
content.setAttribute('aria-hidden', isExpanded);
// **Tabindex nur aktiv, wenn geöffnet**
if (!isExpanded) {
content.setAttribute('tabindex', '0');
content.focus();
} else {
content.setAttribute('tabindex', '-1');
button.focus(); // Fokus zurück auf Button
}
});
});
}
// Sicherstellen, dass der Code erst nach DOM-Ladung ausgeführt wird
document.addEventListener(‘DOMContentLoaded’, initializeAccordionKeyPress);
Global CSS
/* Deutlicher Fokusrahmen für den Button */
.x-acc-header:focus {
outline: 2px solid #1B9246;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
/* Unsichtbare Inhalte dürfen nicht fokussierbar sein /
.x-acc-content[aria-hidden=“true”] {
display: none; / Unsichtbar und nicht erreichbar */
pointer-events: none;
visibility: hidden;
}
.x-acc-content[aria-hidden=“false”] {
display: block; /* Sichtbar, wenn geöffnet */
pointer-events: auto;
visibility: visible;
}
Unfortunately, I still have an issue:
The focus outline for the collapsed element is not visible. Here’s an example:
-
I press Tab : A blue focus outline appears on the accordion item (but it cannot yet be opened with Enter).
-
I press Tab again: The focus outline selects the hidden element within the first accordion item, but it is not visible (it can now be opened with Enter).
-
I press Tab once more: It selects the next accordion item, which can be opened immediately with Enter (again, no visible focus outline).
To make it fully accessible, it would be ideal if the focus outline was always visible after each selection. Unfortunately, I couldn’t solve this issue with CSS either.
Any solutions?
