Unlike a Select (single- or multi-) that lets you select options from an options menu, the Autocomplete component has other behavior beyond choosing an option as the value for a setting, such as linking to other content.
- User can type, and if suggestions is found, they appear with the matched string highlighted
- User can navigate through the suggestions with ↑ UP and ↓ DOWN arrow keys
The default behaviour of the autocomplete input element is like any other input element. They key difference is a list of suggestions popping up when typing.
- When tabbing forward or backward through the page, let the autocomplete text input take keyboard focus with the tab key
- Let people navigate through the list of autocomplete options using the up and down arrow keys
- Let people select the option that has focus using the Enter key
Let people using screen readers know when new options are presented while typing. This requires testing to avoid excessively noisy announcements.
If the Autocomplete component causes a change to content on the page, use ARIA live regions to inform screen reader users of what's changed.
- Suggestions: the bit that drops down from an input field to show Autocomplete suggestions.
- Autocomplete suggestion item: the suggestions menu that lets you choose a suggestion.
- Each suggestion may be presented as plain text or with icons.