hallo
Danke für Deine Antwort, die mir nur bedingt hilft. Zumindest hat es mich auf einen Gedanken gebracht, dahingehend das ich bei "ARIA true" die ID ="item" freischalte / on-schalte. Lieber nenne ich item nun toggle-on oder sowas und muss es per script "freischalten". Ist das der richtige weg?
Persönlich finde ich das JS Schrott, das heisst nur für isolierte Demos geeignet.
Erst mal ist es in einem Dokument eine wiederkehrende Aufgabe ein Element mit aria-expanded attribut zu manipulieren.
Zweitens gibt es zahlreiche andere Funktionen, die simples Click-handling brauchen.
Deshalb erzeugen wir einen globalen Click-Manager
document.body.addEventListener("click", globalClickManager );
Dann schreiben wir den ClickManager
function globalClickManager(ev){
// ev.target gibt uns das Element auf dem der Click geschah.
// steuere expanded Buttons
if(ev.target.hasAttribute("aria-expanded") ){
ev.target.setAttribute("aria-expanded", ( ev.target.getAttribute("aria-expanded") == "false") );
}
// Buttons die lediglich den Click transferieren ähnlich zu label Elementen
else if(ev.target.hasAttribute("data-for-id") ){
document.getElementById( ev.target.getAttribute("data-for-id") ).click();
}
}
Alles was wir nun noch im Dokument schreiben müssen (egal wo, egal wie oft) ist
<button id="someid" aria-expanded="true">Buttonlabel</button>
<div>
any Content
<button data-for-id="someid">Sekundärer Schliess-Button</button>
</div>
und das CSS ist simpel
[aria-expanded="false"] + * {display:none}