Accessibility
The component has basic accessibility support. To be fully accessible you will have to pay attention too though: as long as the item lable is text there shouldn't be any problems. If you use a custom component as label, you will have to make sure for yourself that it is accessible too.
Keyboard navigation
This component can be used with keyboard only. Key mappings are as follows:
| Key | Condition | Function |
|---|---|---|
Tab | Closed | Focus context menu container (or children) |
Tab | Open | Focus first or next item |
Enter/Space | Container or child is focused | Open context menu |
Escape | Open | Close context menu |
ArrowUp | Open | Focus previous item |
ArrowDown | Open | Focus next item |
Enter/Space | Item is focused | Select item |
Screen reader support
The component has basic screen reader support. Instruction on how users can operate component are read out loud, in the user's preferred language1, for the container, the menu itself and its options. If the item label is a string, the screen reader should be able to read its content without problem. If you pass a custom component as label and you want to keep the component accessible (you should), make sure to provide all the needed WAI-ARIA properties.
- Currently supported languages are:
English,French,Italian,German,SpanishandPortuguese. If you would like more languages to be supported, please open an issue.↩