Value to describe the component can be provided aria-labelledby or aria-label props. The list element has a listbox role with the aria-multiselectable attribute that sets to true when multiple selection is enabled. Each list item has an option role with aria-selected and aria-disabled as their attributes.
If filtering is enabled, filterInputProps can be defined to give aria-* props to the input element. Alternatively filterPlaceholder is usually utilized by the screen readers as well.
| Key | Function |
|---|---|
| tab | Moves focus to the first selected option, if there is none then first option receives the focus. |
| up arrow | Moves focus to the previous option. |
| down arrow | Moves focus to the next option. |
| enter | Toggles the selected state of the focused option. |
| space | Toggles the selected state of the focused option. |
| home | Moves focus to the first option. |
| end | Moves focus to the last option. |
| shift + down arrow | Moves focus to the next option and toggles the selection state. |
| shift + up arrow | Moves focus to the previous option and toggles the selection state. |
| shift + space | Selects the items between the most recently selected option and the focused option. |
| control + shift + home | Selects the focused options and all the options up to the first one. |
| control + shift + end | Selects the focused options and all the options down to the last one. |
| control + a | Selects all options. |
| pageUp | Jumps visual focus to first option. |
| pageDown | Jumps visual focus to last option. |
| any printable character | Moves focus to the option whose label starts with the characters being typed. |
| Key | Function |
|---|---|
| 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. |
| 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. |
| enter | Closes the popup and moves focus to the multiselect element. |
| escape | Closes the popup and moves focus to the multiselect element. |
| tab | Moves focus to the next focusable element in the component. If there is none, moves focus to next element in page. |