Apex 4X Technical Style Guide

ARIA Combobox (Native Inputs, Multiselect Editable with Substring Match)

Select Your Favorite Authors

The Author field is an editable ARIA Combobox widget that uses a native Input element.
Substring matches are used to render suggestions.
Type "fantasy", "humor", "scifi", or other strings to match.

The native input combobox is optomized for screen reader and keyboard only users:

  • Set focus to the Author field to open the combobox control.
  • Within the combobox, first type into the field, then press the Down arrow to navigate into the dropdown and use the Up and Down arrow keys to navigate available options.
  • Press the Spacebar to toggle the checked state of specific options.
  • Press any other letter or number, or the Left or Right arrow keys to then move focus back into the Input for editing.
  • Press Enter or Alt+Up to close the dropdown and save the selection.
  • To cancel, press Escape, Tab or Shift+Tab to close the dropdown.
  • Sighted mouse users can click the desired option to toggle the checked state, then click the combobox field once again to save the selection and close the dropdown.