Skip to content

Dropdown Footer Accessibility Concern #3826

@Heet-Mistry

Description

@Heet-Mistry

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:

  1. Open dropdown
  2. Navigate menu items with arrow keys
  3. Press Tab
  4. Focus moves to the first interactive element in the footer
  5. Continue tabbing through footer elements
  6. 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:

  1. Open the dropdown
  2. Navigate through the menu items
  3. Press Tab
  4. Observe that the dropdown does nothing.
  5. Footer buttons cannot be reached via keyboard

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions