Skip to content

bug(aria/menu): menu item erroneously binds value to aria-label #32893

@mhoechtl

Description

@mhoechtl

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

Currently, the ngMenuItem directive in src/aria/menu/menu-item.ts binds its value() input to the host element's aria-label attribute ('[attr.aria-label]': 'value()').

This is highly problematic for several reasons:

  1. Couples logic with UI state: value is typically an internal identifier/payload for app logic, not an accessibility label.
  2. Breaks i18n: If value is an enum or ID, screen readers will announce raw, non-localized data.
  3. Removes developer control: The host binding inherently overwrites any explicit aria-label a developer tries to apply to the element.
  4. A11y Anti-pattern: Elements with role="menuitem" naturally derive their accessible name from their textContent. We should not force an aria-label override by default.

Proposed Fix
Remove '[attr.aria-label]': 'value()' from the host bindings of MenuItem and update the accompanying JSDoc for the value input. I would be happy to submit a PR for this!

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-e7omwbvr
Steps to reproduce:

  1. Click Open Menu button to open the Menu
  2. Inspect the aria-label of the first Mark as Read menu item.

Expected Behavior

The aria-label set in the html "Peaches and Apples".

Actual Behavior

The value which is"Mark as read".

Environment

  • Angular: 21.2
  • CDK/Material: 21.2
  • Browser(s): Firefox, Google Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Arch Linux

Metadata

Metadata

Assignees

Labels

P4A relatively minor issue that is not relevant to core functionsarea: aria/menu

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions