Developer DropdownMenu
What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Space, Enter, , | When focus is on the trigger, opens the dropdown. |
| , | Moves selection between the list options in the dropdown. If selection is on the last/first option, moves selection to the first/last option respectively. |
Space, Enter | Selects the option and closes the dropdown. |
Esc | Closes the dropdown. |
When dropdown is closed, the focus stays on the trigger.
Roles & attributes
The following list describes roles and attributes that component already has.
| Component / element | Role / Attribute | Usage |
|---|---|---|
DropdownMenu.Trigger | button | Tells the screen reader the element is a button. |
aria-haspopup="true" | Indicates that the element triggers a dialog. | |
aria-expanded="true/false" | Set to true when dialog is visible. Indicates that the dialog is open. | |
aria-controls="IDREF" | Indicates which element this Trigger opens. | |
DropdownMenu.Menu | menu | The menu role is a type of composite widget that offers a list of choices to the user. |
aria-labelledby="IDREF" | Identifies the title for the menu. | |
DropdownMenu.Item, DropdownMenu.Item.Content | menuitem | Indicates the element is an option in a set of choices contained by a menu. |
aria-describedby="IDREF" | Gives the item an accessible description by referring to the Item.Hint, the tooltip, or both, describing the primary message or purpose of the item. | |
DropdownMenu.Item.Hint | aria-hidden="true" | Hides element from assistive technologies. |
DropdownMenu.Item.Content | aria-haspopup="dialog" | Indicates that the element triggers a dialog. |
aria-expanded="true/false" | Set to true when dialog is visible. Indicates that the dialog is open. | |
DropdownMenu.Group | group | Identifies a set of user interface objects that is not intended to be included in a page summary or table of contents by assistive technologies. |
aria-labeledby="IDREF" | Identifies the title for the content group. |
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".Last updated: