Component
DropdownMenu
Description
When using DropdownMenu, if additional interactive elements (for example buttons) are placed in a custom dropdown footer inside DropdownMenu.Content, keyboard users are unable to reach those elements using the Tab key.
Currently, when the user presses Tab while focus is inside the dropdown menu, the menu closes and focus moves to the next focusable element outside the dropdown. Because of this behavior, interactive elements placed in the dropdown footer cannot be accessed via keyboard navigation.
This creates an accessibility limitation for cases where developers include actions such as:
- "Apply"
- "Create new item"
- "Manage settings"
inside a dropdown footer.
Expected behaviour
When focus is inside the dropdown content, pressing Tab should move focus sequentially to the next focusable element within the dropdown, including interactive elements in the dropdown footer.
The dropdown should remain open while focus is still within the dropdown content.
Example expected flow:
- Open dropdown
- Navigate menu items with arrow keys
- Press
Tab
- Focus moves to the first interactive element in the footer
- Continue tabbing through footer elements
- Dropdown closes only when focus leaves the dropdown content
Actual behaviour
Pressing Tab does nothing as of now
This makes footer actions unreachable for keyboard-only users.
Accessibility impact
Keyboard users cannot access footer actions inside the dropdown. This can impact users who rely on keyboard navigation, including users with motor disabilities.
This behaviour may also conflict with accessibility expectations when interactive elements are present inside the dropdown content.
Reproduction
CodeSandbox example:
https://codesandbox.io/p/sandbox/2syd6x
Steps to reproduce:
- Open the dropdown
- Navigate through the menu items
- Press
Tab
- Observe that the dropdown does nothing.
- Footer buttons cannot be reached via keyboard
Component
DropdownMenu
Description
When using
DropdownMenu, if additional interactive elements (for example buttons) are placed in a custom dropdown footer insideDropdownMenu.Content, keyboard users are unable to reach those elements using theTabkey.Currently, when the user presses
Tabwhile focus is inside the dropdown menu, the menu closes and focus moves to the next focusable element outside the dropdown. Because of this behavior, interactive elements placed in the dropdown footer cannot be accessed via keyboard navigation.This creates an accessibility limitation for cases where developers include actions such as:
inside a dropdown footer.
Expected behaviour
When focus is inside the dropdown content, pressing
Tabshould move focus sequentially to the next focusable element within the dropdown, including interactive elements in the dropdown footer.The dropdown should remain open while focus is still within the dropdown content.
Example expected flow:
TabActual behaviour
Pressing
Tabdoes nothing as of nowThis makes footer actions unreachable for keyboard-only users.
Accessibility impact
Keyboard users cannot access footer actions inside the dropdown. This can impact users who rely on keyboard navigation, including users with motor disabilities.
This behaviour may also conflict with accessibility expectations when interactive elements are present inside the dropdown content.
Reproduction
CodeSandbox example:
https://codesandbox.io/p/sandbox/2syd6x
Steps to reproduce:
Tab