SOROUSH.DESIGN
Design SystemMarkdownStyled System

Autocomplete

A field whose text finds an option in a list: a role="combobox" input with a role="listbox" below it (in a Portal, placed under the field and flipped for want of room), aria-activedescendant on the...

Source

Keyboard

  • ArrowDown and ArrowUp open the list, then step through the options, round the ends.
  • Home and End go to the first and the last option while the list is being walked - otherwise they move the caret.
  • Enter chooses the highlighted option, or takes the text with shouldAllowFreeText.
  • Escape closes the list. Leaving the field puts back the chosen option's label.

Accessibility

  • The input is the WAI-ARIA combobox with a list: aria-expanded, aria-controls, aria-autocomplete="list", and aria-activedescendant - the focus stays in the field.
  • Options are role="option" with aria-selected; groups are role="group" named by their heading.
  • The indicators are out of the tab order: the keys do what they do.