Select

How it works

A native select exposes role combobox, aria-expanded and its listbox through the browser without the need of Javascript or WAI-ARIA.

Decisions

• Dependent selects: when changing one replaces the options of another, move focus to it once the picker has closed, and only if it was ever open, because arrowing a closed select also fires change. Announce the consequence through aria-describedby and role="status".
• Validation: the placeholder is a disabled empty option. An empty submit sets aria-invalid, ties the message to the control with aria-describedby and sends focus back to the select.
• Apply on change is fine when content reorders in place: focus stays on the control and a role="status" count announces the result.
• One select per row needs its own aria-label that starts with the visible column text (WCAG 2.5.3).
• Disabled, not hidden: a disabled option stays in the listbox, is skipped by the arrow keys and is announced as unavailable. An option takes no description, so the reason goes in its text.
• A select gated by a checkbox uses disabled, not aria-disabled, which takes it out of the tab order and out of the submission.
• Typeahead is native. Past roughly fifteen options consider an editable combobox, but everything hand-rolled has to rebuild all of it first.
• A choice that makes a new field necessary earns focus on it. Content that merely changed, such as a price or a summary, must not steal it.
• When the answer may not be on the list, select is the wrong control: it can only return what you enumerated.