Skip to content

bug(cdkMenu): cdkMenu keyboard navigation loses focus on disabled items and does not follow ARIA guidance #31179

Open
@andrantis

Description

@andrantis

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When using cdkMenu, applying cdkMenuItemDisabled to a cdkMenuItem not only sets aria-disabled="true" but also makes the item unfocusable. This behavior contradicts the WAI-ARIA Menu Bar Pattern, which states:

“Disabled menu items are focusable but cannot be activated.”

Reproduction

StackBlitz link: https://stackblitz.com/edit/jqrnmquv-iuz6s9rv?file=src%2Fexample%2Fcdk-menu-standalone-menu-example.html
Steps to reproduce:

  1. Open menu
  2. Press down arrow key - "Refresh" menu item is selected
  3. Press down arrow key again - "Help" menu item is selected and "Settings" is skipped because it is disabled
  4. Press up arrow key - "Refresh" menu item is selected, skipping "Settings" again

Expected Behavior

cdkMenuItems with cdkMenuItemDisabled should remain focusable via keyboard navigation, even though they cannot be activated, in accordance with the WAI-ARIA Menu Bar Pattern.

Actual Behavior

cdkMenuItems with cdkMenuItemDisabled are skipped entirely during keyboard navigation and are not focusable

Environment

  • Angular: ^19.2.0
  • CDK/Material: ^19.2.0
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/menu

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions