We detected a combobox that is not keyboard operable.
| Field | Value |
|---|---|
| Rule code | Manual_Combobox_Keyboard_Inoperable |
| WCAG conformance level | A |
| WCAG success criterion | 2.1.1 Keyboard |
| Must be fixed at source | No |
Description
Comboboxes must be fully navigable and operable using keyboard-only input to accommodate users who rely on keyboard navigation. This includes the ability to focus on the combobox, open the dropdown, navigate through options, and select an option all using standard keyboard controls.
How to fix
Ensure your combobox component is fully keyboard operable by implementing the following keyboard interactions:
<div role="combobox" aria-expanded="false" aria-controls="listbox-id" aria-haspopup="listbox" tabindex="0">
<input type="text" aria-autocomplete="list" aria-controls="listbox-id">
<ul id="listbox-id" role="listbox" tabindex="-1">
<li id="option-1" role="option">Option 1</li>
<li id="option-2" role="option">Option 2</li>
</ul>
</div>
Implement the following keybard operations in order to ensure ideal keyboard operability for users:
- Tab: Focus on the combobox
- Enter or Space or Down Arrow on closed combobox: Opens the dropdown combobox
- Escape: Closes the dropdown combobox
- Up/Down Arrows: Navigates through options when dropdown is open
- Enter on an option: Select the option and close the dropdown
- Home/End: Move to first/last option in the list
Ensure focus management works correctly - when the dropdown opens, focus should move to the first or currently selected option, and when it closes, focus should return to the combobox input