Developer Dropdown
What component has
When dropdown is closed, the focus returns to the trigger.
Keyboard support
| Key | Function |
|---|---|
Tab, | Moves focus cyclically through all focusable elements in the dropdown, including the dropdown container. |
Space , Enter | On the trigger: opens the dropdown. |
Esc | Closes the dropdown. |
Roles & attributes
The following list describes roles and attributes that component already has.
| Component | Attribute | Usage |
|---|---|---|
Dropdown.Trigger | role="button" | Ideintifies the element as a clickable button. |
Dropdown.Trigger | aria-haspopup="dialog" | Indicates that the element triggers a dialog. |
Dropdown.Trigger | aria-controls="IDREF" | Identifies the element that serves as the dropdown popper. |
Dropdown.Trigger | aria-expanded="true" or "false" | Indicates whether the dropdown is open. |
Dropdown.Popper | role="dialog" | Identifies the element as a dialog, indicating that its content is grouped and separated from the rest of the page content. |
Considerations for developers
The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in your interfaces.
| Component | Attribute | Usage |
|---|---|---|
Dropdown.Popper | aria-label or aria-labelledby | Defines an accessible name for the dropdown popper. We recommend using aria-labelledby connected to the dropdown trigger, as shown in the example. |
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".