SELF-Wiki: zugängliches Dropdown-Menü

[Matthias Scharwies]

Grad wieder zurück von frühlingshaften 15°C im Talboden und hier in Franken Schneeschauer.

Ich stehe grad vor einem Dilemma:

→ Inklusives_Dropdown-Menü

Das fertige Kopierbeispiel soll :hover und Tastaturbedienung in einem vereinen:

• beim CSS-Only habe ich mit focus-within eigentlich schon fast alles dabei.
• in der JS-Variante (Nr 8) (hab das :hover mal rausgenommen) weiß ich nicht weiter.

Meine HTML-Struktur:

-li

 - a

 - button aria-expanded (dynamisch erzeugt)

 - ul class="submenu"

Mein Problem /Fragen:

• Die Buttons (und dss umgebende li) müssten irgendwie besser gekennzeichnet werden, wenn sie im Focus sind, aber wiieee???? Größer? Bunter? Den Text doch wieder einblenden? (*Problem ist, dass erst nav a im Focus ist und der Link einen gelben Hintergrund bekommt was das Dreieck unsichtbar machen würde. So hat der Button einen Hintergund und man kann den Pfeil erkennen)
• Die Buttons sind klickbar
  • Merk ich im Seiteninspektor an der Änderung des [aria-expanded]
  • dann dreht sich der Pfeil nach unten
  • toggle ich die Klasse .visible
• mit dem Schließen hadere ich noch - irgendwie dauert's zu lang, wenn ich auf den Button klicke - wie schließe ich, wenn ich schon weiter bin??? (Im ganzen Dokument auf ESC lauschen und dann alle .visible mit forEach durchlaufen?)

Für jeden Vorschlag bin ich dankbar!

Erst wenn ich das alles gelöst habe, würd' ich danach versuchen, die Pfeil-Bedienung einzubauen.

Stammtisch Mittwoch, 01.03. 20:15

Ich würde die Fragen gerne gemeinsam am nächsten Mittwoch im Stammtisch besprechen - wer würde noch kommen?

Herzliche Grüße

Matthias Scharwies