The autocomplete component is based on the ARIA 1.1 combobox pattern. See the text field component for information on implementing the autocomplete component with a text field.
The autocomplete list displays below the text field or other control by default so it is easy for merchants to discover and use. However, you can change the position with the
Autocomplete features can be challenging for merchants with visual, motor, and cognitive disabilities. Even when they’re built using best practices, these features can be difficult to use with some assistive technologies. Merchants should always be able to search, enter data, or perform other activities without relying on the autocomplete.
Use autocomplete as progressive enhancement to make the interface easier to use for most merchants.
Require that merchants make a selection from the autocomplete to complete a task.
- Give the autocomplete text input keyboard focus with the tab key (or shift + tab when tabbing backwards)
- Access the list of options with the up and down arrow keys
- Select an option that has focus with the enter/return key