Dropdown mit Alpine.js
Ein Dropdown das sich nur mit der Maus bedienen lässt, ist für Tastatur-Nutzer und Screen-Reader-Nutzer nutzlos. Das WAI-ARIA Listbox-Pattern definiert präzise, wie Pfeiltasten, Home, End, Escape und Type-Ahead in einem Dropdown funktionieren müssen – und Alpine.js macht die Implementierung überraschend elegant.
Inhaltsverzeichnis
- 1. WAI-ARIA Listbox-Pattern: was der Standard vorschreibt
- 2. Grundstruktur: Trigger, Listbox und Optionen
- 3. Keyboard-Handler: Pfeiltasten, Home, End, Escape
- 4. Type-Ahead: Direktnavigation per Buchstabe
- 5. ARIA-Attribute: die vollständige Implementierung
- 6. Fokus-Management und Scroll-into-View
- 7. Mehrspaltige und gruppierte Dropdowns
- 8. Combobox: Suche + Dropdown kombiniert
- 9. Keyboard-Pattern-Vergleich
- 10. Zusammenfassung