WhatSock : Changing the world one step at a time AccDC Technical Style Guide

ARIA Combobox (Native Inputs, Editable and Readonly)

Home Address

Open options

The State field is an editable ARIA Combobox widget that uses a native Input element. The Country field is a readonly ARIA Combobox widget that uses a native Input element.

The native input comboboxes are optimized for screen reader and keyboard only users.

  • Set focus to the State or Country fields to open the combobox control.
  • Within a combobox that is not readonly, 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 any other letter or number, or the Left or Right arrow keys to then move focus back into the Input for editing.
  • Within a combobox that is readonly, press the Down arrow or click the trigger icon to open the dropdown.
  • Press any letter or number within a readonly field to jump to an option starting with that character or digit.
  • 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 save the selection and close the dropdown.