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
@adolgachev adolgachev removed the request for review from mmalerba January 28, 2026 17:50
@adolgachev adolgachev added action: merge The PR is ready for merge by the caretaker action: presubmit The PR is in need of a google3 presubmit and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Jan 28, 2026
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: merge The PR is ready for merge by the caretaker action: presubmit The PR is in need of a google3 presubmit 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