Listbox
Listenfeld
Ein Listenfeld ist eine benutzerdefinierte Liste von Auswahlmöglichkeiten. Es verwaltet, welche Wahl aktiv ist und wie die Pfeiltasten durch die Liste navigieren.
Ein echtes Beispiel
Ein Dispatcher wählt ein Depot aus 180 durchsuchbaren Ergebnissen aus. Pfeiltasten bewegen sich durch die Auswahl, und Enter wählt eines aus. Nach dem Filtern kündigt ein Screenreader immer noch das ausgewählte Depot an. Eine kurze feste Liste sollte stattdessen ein eingebautes `<select>` verwenden.
Hauptteile
- 01Listenfeld-Container
- 02Aktive Option
- 03Auswahlszustand
Verwenden Sie es, wenn
Erstellen Sie eine benutzerdefinierte Listbox nur dann, wenn ein eingebautes `<select>` Suche, umfangreiche Auswahlmöglichkeiten oder das Auswählen mehrerer Elemente nicht verarbeiten kann.
Nutze es nicht, wenn
Setzen Sie keine Schaltflächen, Links oder andere separate Steuerelemente in eine Option.
In Code verwendeter Name
role=listbox + role=option + aria-selected + roving focus/aria-activedescendant Vor dem Ausliefern
Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages.
Outcome: Complete the task with Listenfeld (Listbox). User context: Ein Dispatcher wählt ein Depot aus 180 durchsuchbaren Ergebnissen aus. Pfeiltasten bewegen sich durch die Auswahl, und Enter wählt eines aus. Nach dem Filtern kündigt ein Screenreader immer noch das ausgewählte Depot an. Eine kurze feste Liste sollte stattdessen ein eingebautes `<select>` verwenden. Recommended pattern: Listenfeld (Listbox). Why it fits: Erstellen Sie eine benutzerdefinierte Listbox nur dann, wenn ein eingebautes `<select>` Suche, umfangreiche Auswahlmöglichkeiten oder das Auswählen mehrerer Elemente nicht verarbeiten kann. Do not use it when: Setzen Sie keine Schaltflächen, Links oder andere separate Steuerelemente in eine Option. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Es ist offiziell für diese Quelle. Andere Plattformen oder Teams können den Begriff auf andere Weise verwenden. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how Listenfeld (Listbox) is used now. Definition: Ein Listenfeld ist eine benutzerdefinierte Liste von Auswahlmöglichkeiten. Es verwaltet, welche Wahl aktiv ist und wie die Pfeiltasten durch die Liste navigieren. Release checks: Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.