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 the 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 following list 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
Find more accessibility recommendations in the common Accessibility guide.