Developer What component has
When dropdown is closed, the focus returns to the trigger.
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Space , Enter | Activates the selected item or control. |
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 goes into the active element.
2. Screen reader says "Trigger menu pop up button".
3. Screen reader presses the "Control+Option+Space" button.
4. Screen reader presses the "Tab" button.
5. Screen reader says "Content group".
6. Screen reader goes to the next element.
7. Screen reader says "Content clickable".
8. Screen reader presses the "Escape" button.
9. Screen reader says "Trigger group".1. Screen reader goes into the active element.
2. Screen reader says "Trigger menu pop up button".
3. Screen reader presses the "Control+Option+Space" button.
4. Screen reader presses the "Tab" button.
5. Screen reader says "Content group".
6. Screen reader goes to the next element.
7. Screen reader says "Content clickable".
8. Screen reader presses the "Escape" button.
9. Screen reader says "Trigger group".