Needless UI

Komponenten

Menu

Eine aufklappbare Liste von Aktionen, mit Untermenüs, Checkbox- und Radio-Einträgen und voller Tastaturunterstützung.

Tastaturbedienung

TasteAktion
Enter oder LeertasteAuf dem Trigger: öffnet das Menü und fokussiert den ersten Eintrag. Auf einem Eintrag: wählt ihn oder öffnet sein Untermenü.
Pfeil nach untenAuf dem Trigger: öffnet das Menü und fokussiert den ersten Eintrag. Im Menü: springt zum nächsten Eintrag.
Pfeil nach obenAuf dem Trigger: öffnet das Menü und fokussiert den letzten Eintrag. Im Menü: springt zum vorherigen Eintrag.
Pos1 und EndeSpringt zum ersten oder letzten Eintrag.
Pfeil nach rechtsÖffnet ein Untermenü und springt zu dessen erstem Eintrag (Pfeil nach links bei Text von rechts nach links).
Pfeil nach linksSchließt ein Untermenü und kehrt zum übergeordneten Eintrag zurück (Pfeil nach rechts bei Text von rechts nach links).
EscSchließt das Menü und setzt den Fokus zurück auf den Trigger.
BuchstabenSpringt zum nächsten Eintrag, dessen Beschriftung mit dem eingegebenen Text beginnt.

Hinweise zur Barrierefreiheit

  • Der Trigger erhält aria-haspopup, aria-expanded und aria-controls; Menü und Einträge bekommen ihre ARIA-Rollen von Angular Aria.
  • Der hervorgehobene Eintrag hat eine volle Füllung mit mindestens 4,5:1 Textkontrast und dient zugleich als Fokusindikator. Im Forced-Colors-Modus erhält er eine Hervorhebungskontur in Systemfarbe.
  • Checkbox- und Radio-Einträge melden ihren Zustand über aria-checked.
  • Die Wahl eines Eintrags schließt das Menü und setzt den Fokus zurück auf den Trigger. Verlässt der Fokus Trigger und Menü, schließt es sich ebenfalls.
  • Einträge sind mindestens 28 Pixel hoch und liegen damit über der Mindestzielgröße der WCAG 2.2.