Skip to content

bug(cdkMenu): navigation is not triggered on SPACE and ENTER for cdkMenuItem on a-elements #26291

Closed
@juliusstoerrle

Description

@juliusstoerrle

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

15.0.0

Description

Using cdkMenuItem on an a element is not working anymore in regards to keyboard interaction.
This is the same bug as #25584 was:

Navigation does not occur on pressing Enter or Space when element has cdkMenuItem.
<a routerLink="/" fragment="menu-1" cdkMenuItem>item 1</a>

This had been fixed for 15.0.0, but a later issue (#26033) with was resolved in 15.0.1 with PR #26051 effectively broke the fix for this issue from PR #25591. I guess both issues compete against each other here.

Reproduction

Steps to reproduce:

  1. https://stackblitz.com/edit/components-issue-rree4e?file=src%2Fapp%2Fexample-component.html
  2. Use keyboard to focus a link at the top and press Enter to navigate. Nothing happens.
  3. Use keyboard to focus a link at the bottom and press Enter to navigate. Navigation occurs.

Expected Behavior

I would expect a elements to work with this directive as this is considered best-practice by my understanding. Here a reference to the Angular Material documentation:

Native <button> and <a> elements are always used in order to provide the most straightforward and accessible experience for users. A <button> element should be used whenever some action is performed. An <a> element should be used whenever the user will navigate to another view. - https://material.angular.io/components/button/overview

Actual Behavior

No navigation is triggered.

Environment

  • Angular: 15.0.3
  • CDK/Material: 15.0.3
  • Browser(s): Firefox

Metadata

Metadata

Assignees

Labels

P2The issue is important to a large percentage of users, with a workaroundarea: cdk/menu

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions