Select accessibility

WCAG 2.1 AA — release blocker

Semantics

• Trigger renders as <button> with role="combobox" and aria-haspopup="listbox".
• aria-expanded reflects open/closed state of the dropdown.
• Dropdown content uses role="listbox".
• Each SelectItem uses role="option" with aria-selected for current selection.
• Disabled items set aria-disabled="true".

Keyboard navigation

• Enter / Space / ArrowDown / ArrowUp on the trigger opens the dropdown.
• ArrowDown / ArrowUp moves focus between options within the open list.
• Enter / Space on a focused option selects it and closes the dropdown.
• Escape closes the dropdown and returns focus to the trigger.

Labelling

• Pair with a Label component or add aria-label to the trigger for a group-level accessible name.
• Each SelectItem child text serves as the accessible label for that option.
• SelectLabel inside a SelectGroup provides a group heading.

Disabled state

• Disabled items set aria-disabled and cannot be focused or selected.
• Click-outside closes the dropdown without selection.

Audit checklist

• Screen reader announces trigger label and expanded state.
• Arrow keys navigate options and Enter selects.
• Escape closes the dropdown and returns focus to trigger.
• Selected item is announced with aria-selected.
• Disabled items cannot be selected via keyboard or pointer.
• Focus ring is visible on the trigger and on focused options (4.5:1 contrast).