Beliebige Tabellenzeilen mit <details> schalten?

[Rolf B]

Hallo fietur,

das ist eine Variante des Checkbox-Hacks und "funktioniert"

entweder

wenn Du das details-Element vor die Tabelle schaltest

oder

wenn Du den zweiten Selektor so schreibst:

.tabelle:has(details[open]) table tr.switch { display:block; }

Die :has Pseudoklasse prüft, ob der in Klammern stehende Selektor innerhalb des Elements zu finden ist, auf das sich die Pseudoklasse bezieht. Sie ist ziemlich neu in der Wildnis und muss im Firefox noch per Flag aktiviert werden (caniuse.com),

Es hat aber alle Nachteile des Checkbox-Hacks, was Zugänglichkeit angeht.

Unsere Wiki-Empfehlung, statt des Checkbox-Hacks ein details-Element zu verwenden, hast Du hier auf kreative Weise wörtlich genommen, aber so war sie nicht gemeint. Dumm ist nur, dass sich für Tabellenzeilen das details-Element so, wie wir es im Wiki gemeint hatten, nicht anwenden lässt. Stellst Du tabellarische Daten dar?!

Besser ist ein Button mit einem aria-controls Attribut, das auf die geschaltete Tabellenzeile verweist (oder auf die ganze Tabelle, wenn die geschaltete Zeile mal hier und mal da sein kann). Und eine Prise JavaScript, um ihn zum Leben zu erwecken.

Wenn Du mehr als eine .switch-Zeile hast, musst Du vermutlich die Tabelle per aria-controls referenzieren. Es könnte auch gut sein, der Tabelle ein aria-live Attribut zu geben mit aria-relevant="all". Dazu sollen unsere ARIen-Sänger mehr sagen 😉

Rolf