fix(aria/menu): Add label property for proper aria-label

[adolgachev]

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.

[github-actions]

Deployed dev-app for 2df5448 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]

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.

[adolgachev]

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.

Thanks for the additional context.

I will remove the label property in that case, to not confuse the issue. I also see we have searchTerm here but it doesn't seem to be used for anything. I see just one example using the Label behavior, and at least one other place where we set aria-label to the value. I'll just do the latter for now to unblock testing, and then do another PR for clean-up and a better solution for this and others.

[adolgachev]

This PR was merged into the repository. The changes were merged into the following branches:

• main: f1157b1
• 21.1.x: 4186f74