Listbox with Inline Autocomplete

Success Criteria:

Description Label describes input
Role Identifies itself as a listbox and each option
Relationships for="input-id" is required in the label
State aria-selected="true" on option
Focus Visibly focusable with tab key / swipe
Action Enter, Escape, Text editing keys

Keyboard & Screenreader Support

Down Arrow / swipe If the list is displayed: Moves focus to the second suggested value. Note that the first value is automatically selected. If the listbox is not displayed, opens the listbox and moves focus to the first value.
Up Arrow / swipe If the listbox is displayed, moves focus to the last suggested value. If the listbox is not displayed, opens the listbox and moves focus to the last value.
Enter / double tap If the listbox is displayed and the first option is automatically selected: Sets the textbox value to the content of the selected option. Closes the listbox.
Escape Clears the textbox If the listbox is displayed, closes it.
Text editing keys Keys used for cursor movement and text manipulation, such as Delete and Shift + Right Arrow. An HTML input with type=text is used for the textbox so the browser will provide platform-specific editing keys.

Custom Element

While there is no native listbox, it should be composed with semantic elements: label, input, ul, li

Description

  • The input should be described with a label

Role Requires extra work

  • role="listbox" on <ul>
  • role="option" on <li>

Relationships Requires extra work

  • aria-labelledby="label-id"

State Requires extra work

  • aria-selected="true" on <li>

Focus Requires extra work

  • Input is visibly focusable with tab
  • Options visibly focusable/selectable with arrow keys

Actions Requires extra work

  • Arrows / swipe
  • Enter / double tap
  • Escape
  • Text editing keys