Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which option to read during keyboard navigation within the popup list.
In multiple mode, chip list uses listbox role with aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip.
The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the input element.
Key | Function |
---|---|
tab | Moves focus to the autocomplete element. |
any printable character | Opens the popup and moves focus to the first option. |
Key | Function |
---|---|
tab | Moves focus to the next focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page. |
shift + tab | Moves focus to the previous focusable element in the popup. If there is none, the focusable option is selected and the overlay is closed then moves focus to next element in page. |
enter | Selects the focused option and closes the popup, then moves focus to the autocomplete element. |
space | Selects the focused option and closes the popup, then moves focus to the autocomplete element. |
escape | Closes the popup, then moves focus to the autocomplete element. |
down arrow | Moves focus to the next option, if there is none then visual focus does not change. |
up arrow | Moves focus to the previous option, if there is none then visual focus does not change. |
alt + up arrow | Selects the focused option and closes the popup, then moves focus to the autocomplete element. |
left arrow | Removes the visual focus from the current option and moves input cursor to one character left. |
right arrow | Removes the visual focus from the current option and moves input cursor to one character right. |
home | Moves input cursor at the end, if not then moves focus to the first option. |
end | Moves input cursor at the beginning, if not then moves focus to the last option. |
pageUp | Jumps visual focus to first option. |
pageDown | Jumps visual focus to last option. |
Key | Function |
---|---|
backspace | Deletes the previous chip if the input field is empty. |
left arrow | Moves focus to the previous chip if available and input field is empty. |
Key | Function |
---|---|
left arrow | Moves focus to the previous chip if available. |
right arrow | Moves focus to the next chip, if there is none then input field receives the focus. |
backspace | Deletes the chips and adds focus to the input field. |