Listbox with inline autocomplete

How to test a listbox with inline autocomplete

Gherkin Condensed

Given that I am on a page with a listbox with inline autocomplete

1 Keyboard for mobile & desktop

WHEN I use the tab key to move focus to the text input I SEE focus is strongly visually indicated
THEN when I use the arrow keys to select an option I SEE the selected option is the new text input value
THEN when I use the enter key I SEE the selected option is changed and focus returns to the text input
THEN when I use the escape key when the select is open I SEE it collapses and focus moves to the text input

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to the text input
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a select, popup, menu/submenu, listbox or combobox
- I HEAR Its label is read and selected options are read
- I HEAR It indicates the value of the text input
THEN when I use the arrow keys to select an option I HEAR the selected option is the new text input value
THEN when I use the enter key I HEAR the selected option is changed and focus returns to the text input
THEN when I use the escape key when the select is open I HEAR it collapses and focus moves to the text input

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to focus on a select
- I HEAR Its purpose is clear
- I HEAR It identifies itself as a select, popup, menu/submenu, listbox or combobox
- I HEAR Its label is read and selected options are read
- I HEAR It indicates the value of the text input
THEN when I doubletap with the select in focus I HEAR the selected option is changed

1 Keyboard only & screenreader

When I use	I see/hear
Tab	Focus moves visibly to the text input
Arrow-keys	Focus moves to and selects the next option. If the textbox is empty and the listbox is not displayed, opens the listbox and moves visual focus to the next option. In both cases DOM focus remains on the textbox.
Enter	The textbox value is set to the content of the selected option. The listbox closes.
Escape	Clears the textbox. If the listbox is displayed, closes it.

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the input, traverses list
Double-tap	Opens select, chooses option

3 Screenreader output for all devices

Reads	I hear
Name	Its purpose is clear
Role	It identifies itself as a select, popup, menu/submenu, listbox or combobox
Group	Its label is read and selected options are read
State	It indicates the value of the text input

Code example

<label for="listbox-input"
       id="example-label">
  Choose your favorite NATO letter
</label>
<div role="combobox"
     aria-expanded="false"
     aria-owns="listbox-input"
     aria-haspopup="listbox"
     id="example-combobox">

  <input type="text"
         aria-autocomplete="list"
         aria-controls="input-listbox"
         id="input-listbox">

</div>
<ul aria-labelledby="example-label"
    role="listbox"
    id="example-listbox">
    <li role="option">Alpha</li>
    <li role="option">Bravo</li>
    <li role="option">Charlie</li>
</ul>

Developer notes

Name

Purpose must be clear from the label

Role

Use role="combobox" for the input
Use role="listbox" for the list of options
Use role="option" for the individual options

State

Use aria-expanded="true/false" on the text input to indicate the state of the list

Group

Use aria-haspopup="true" on the text input to indicate there is a popup

Focus

Focus must be visible

Documentation

WAI-ARIA examples