Combobox with aria-activedescendant

Keyboard-controllable, and clicking on the label focuses the input.

This uses aria-activedescendant to set focus for screen readers.

WAI-ARIA checklist

• combobox role

  Set on the element that displays the current value (typically an input or div).

• listbox role

  Set on the associated popup. tree, grid, dialog are also supported.

• button role(optional)

  Set on the element that toggles popup visibility. This element is optional. It should not be part of the tab sequence and should not be a child of the combobox element.

• Keyboard controls(optional)

  Keyboard mechanisms to move focus between the combobox element and popup elements

Combobox properties

• aria-autocomplete(optional)

  Required if autocomplete functionality is supported.

• aria-expanded

  Specifies if the combobox is collapsed or expanded.

• aria-haspopup(optional)

  Specifies the role that the popup has. Defaults to listbox.

• aria-controls

  Specifies the popup id.

• aria-activedescendant(optional)

  Specifies the current active element within the popup. Alternatively the component can use a roving tab index to manage focus.

• aria-errormessage(optional)
• aria-invalid(optional)
• aria-readonly(optional)
• aria-required(optional)