Skip to content

Conversation

@adolgachev
Copy link
Contributor

@adolgachev adolgachev commented Jan 27, 2026

Without an explicit aria-label set on the menu item, screen readers will just concatenate the text contents of the inner elements, which can result in a confusing announcement including the label as well as other secondary content like icon names.

Instead, setting the aria-label (to a specified label or else defaulting to the value) will result in a proper announcement.

@adolgachev adolgachev requested review from tjshiu and removed request for tjshiu January 27, 2026 04:23
@adolgachev adolgachev force-pushed the aria-menu-label branch 3 times, most recently from 572d194 to 48495ff Compare January 27, 2026 20:01
@adolgachev adolgachev marked this pull request as ready for review January 27, 2026 20:02
@pullapprove pullapprove bot requested review from ok7sai and wagnermaciel January 27, 2026 20:02
@adolgachev adolgachev requested review from tjshiu and removed request for ok7sai and wagnermaciel January 27, 2026 20:02
@pullapprove pullapprove bot requested a review from mmalerba January 27, 2026 20:02
@adolgachev adolgachev removed the request for review from mmalerba January 27, 2026 20:02
@pullapprove pullapprove bot requested a review from mmalerba January 27, 2026 20:02
@adolgachev adolgachev added Accessibility This issue is related to accessibility (a11y) target: patch This PR is targeted for the next patch release action: review The PR is still awaiting reviews from at least one requested reviewer dev-app preview When applied, previews of the dev-app are deployed to Firebase labels Jan 27, 2026
@github-actions
Copy link

Deployed dev-app for ee239a9 to: https://ng-dev-previews-comp--pr-angular-components-32710-dev-i65jstu7.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@ok7sai
Copy link
Member

ok7sai commented Jan 27, 2026

Nice. We definitely missed the labelling story from the initial launch. A couple things to consider

  1. We need to decide the input names for the aria-label and aria-labelledby and use them consistently. E.g. label vs aria-label vs ariaLabel, personally I would to go with using aria-label and aria-labelledby as inputs to override the default value without having a new set of APIs. Might be worthy to get some ideas from the team.
  2. There's a Label behavior https://github.com/angular/components/blob/main/src/aria/private/behaviors/label/label.ts handles the aria-label and aria-labelledby conflicts, we should extend it to having default label as well and use it across UI patterns.

@mmalerba mmalerba removed their request for review January 28, 2026 01:11
@pullapprove pullapprove bot requested a review from mmalerba January 28, 2026 01:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Accessibility This issue is related to accessibility (a11y) action: review The PR is still awaiting reviews from at least one requested reviewer dev-app preview When applied, previews of the dev-app are deployed to Firebase target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants