Developer What component has
When dropdown is closed, the focus returns to the trigger.
Keyboard support
User can navigate inside the list with the keyboard arrows.
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Space , Enter , Down Arrow | When focus is on the trigger, opens the dropdown. |
Up Arrow , Down Arrow | Moves focus between the options in the dropdown. If focus is on the last/first option, moves focus to the first/last option respectively. |
Space , Enter | Selects the option and closes the dropdown. |
Esc | Closes the dropdown. |
See detailed information for the controlling dropdown with the keyboard in the Keyboard control guide.
Roles & attributes
The list below describes roles and attributes that component already has.
| Role | Attribute | Element | Usage |
|---|---|---|---|
combobox | div | The combobox role identifies an element as an input that controls another element, such as a listbox or grid , that can dynamically pop up to help the user set the value of that input. | |
aria-label | div | The aria-label attribute defines a string value that labels an interactive element. | |
tabIndex | div | Makes the trigger focusable and includes it in the page Tab sequence. This approach to managing focus is described in the section on roving tabindex. |
Other recommendations
See more accessibility recommendations in the common Accessibility guide.
Automated screen reader testing
Intergalactic v15.29.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.
Running screen reader against this file.
1. Screen reader presses the "Tab" button.
2. Screen reader says "Click me menu pop up button".
3. Screen reader presses the "Control+Option+Space" button.
4. Screen reader presses the "Tab" button.
5. Screen reader says "Click me submenu 4 items group".
6. Screen reader goes to the next element.
7. Screen reader says "Click me submenu 4 items group menu Click me 4 items".
8. Screen reader goes into the active element.
9. Screen reader goes to the next element.
10. Screen reader says "Item 1 menu item".
11. Screen reader goes to the next element.
12. Screen reader says "Item 2 menu item".
13. Screen reader presses the "Escape" button.
14. Screen reader says "Click me group".
15. Screen reader goes to the next element.
16. Screen reader says "Click me menu pop up button".1. Screen reader presses the "Tab" button.
2. Screen reader says "Click me menu pop up button".
3. Screen reader presses the "Control+Option+Space" button.
4. Screen reader presses the "Tab" button.
5. Screen reader says "Click me submenu 4 items group".
6. Screen reader goes to the next element.
7. Screen reader says "Click me submenu 4 items group menu Click me 4 items".
8. Screen reader goes into the active element.
9. Screen reader goes to the next element.
10. Screen reader says "Item 1 menu item".
11. Screen reader goes to the next element.
12. Screen reader says "Item 2 menu item".
13. Screen reader presses the "Escape" button.
14. Screen reader says "Click me group".
15. Screen reader goes to the next element.
16. Screen reader says "Click me menu pop up button".