Autocomplete
Accessibility
The Autocomplete component has been designed to best meet current accessibility criteria.
Therefore, in order to guarantee the accessibility of the component, please make sure to respect the following rules when integrating the component into your pages:
Always use an aria-autocomplete="list" attribute on the .mc-autocomplete__trigger element.
Always use an aria-expanded attribute on the .mc-autocomplete__trigger element.
Always use an aria-activedescendant attribute on the .mc-autocomplete__trigger element.
Keyboard navigation
The following guidelines are issued by W3C:
Enter
: Open or close the listbox component
Down Arrow
:
- If the text-input is not empty and the listbox is displayed, moves visual focus to the first suggested value.
- If the textbox is empty and the listbox is not displayed, opens the listbox and moves visual focus to the first option.
- In both cases DOM focus remains on the text-input
Up Arrow
:
- If the text-input is not empty and the listbox is displayed, moves visual focus to the last suggested value.
- If the text-input is empty, first opens the listbox if it is not already displayed and then moves visual focus to the last option.
- In both cases DOM focus remains on the text-input.