Accessibility
The dropdown follows the WAI-ARIA Listbox pattern — a trigger that opens a single-select list of options — and meets WCAG 2.1 AA. An accessible dropdown keeps that list reachable and operable from the keyboard, keeps assistive technology informed of its open state, and gives every element an accessible name — so the choice it holds is clear whether the user is looking at it, listening to it, or tabbing through it.
For designers
Section titled “For designers”- All list items and states must maintain accessible contrast on every supported surface. Source: WCAG 1.4.3 Contrast (Minimum).
- State must never be conveyed by colour alone — pair it with text, an icon, or a shape. Source: WCAG 1.4.1 Use of Color.
- Focus styles must stay visible, meet contrast requirements on every supported surface, and be clearly distinguishable from hover. Source: WCAG 2.4.7 Focus Visible.
- Use semantic colour tokens (e.g.
foreground/neutral/default) rather than fixed values, so the component adapts correctly across themes and surfaces.
For developers
Section titled “For developers”Expose the trigger, list, and options to assistive technology through native list semantics and ARIA. Screen readers announce the count and position of options (“listbox, 3 items, item 1 of 3”) automatically when native list markup is used. If the dropdown supports search, give the input a role="searchbox" (or a labelled <input>) and filter options while preserving arrow-key navigation. The per-element roles, names, and states are in the Labelling elements section below.
Keyboard interaction
Section titled “Keyboard interaction”| Key | Action |
|---|---|
| Enter / Space | Open the dropdown, or select the focused option |
| ↑ / ↓ | Open the dropdown, then move focus between options |
| Home / End | Move focus to the first / last option |
| Escape | Close the dropdown, return focus to the trigger |
| Tab / Shift + Tab | Close the dropdown and move to the next / previous control |
Interactive targets must be at least 44 px high for comfortable touch use — comfortably clearing the WCAG AA minimum. Source: WCAG 2.5.8 Target Size (Minimum).
Focus order
Section titled “Focus order”Focus reaches only the trigger and, once the list is open, each option in turn — a roving tabindex walks the options while the list container and chevron never receive focus. Selecting an option returns focus to the trigger. The keys that drive this are in the Keyboard interaction table above.
- Hybrid
- Plug-in Hybrid
- Electric
- Trigger
- Option 1
- Option 2
- Option 3
Source: WCAG 2.4.3 Focus Order.
Labelling elements
Section titled “Labelling elements”Give every element the role, name, and state assistive technology needs.
Trigger
aria-haspopup="listbox" with aria-expanded kept in sync with the open state. Name it from a visible label wired with aria-labelledby, or aria-label="Powertrain" when there’s no visible label — never leave the name to the placeholder alone.
Options list
role="listbox" (add aria-multiselectable="true" for checkbox-style dropdowns). Name it with aria-label or aria-labelledby when its purpose isn’t obvious from context, so it doesn’t announce as an unnamed list.
Options
role="option" on each item, with aria-selected="true" on the selected one. Each option takes its accessible name from its text content — keep that text self-describing.
Source: WCAG 4.1.2 Name, Role, Value.