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

[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