docs(aria/menu): fix menubar example highlight styling

[Daherkarim]

Summary

Updates the menubar example styles so items highlight only while the user is interacting: :hover, :focus-within, and [aria-expanded='true'] (for when the submenu is open and focus is in the overlay). Items inside an open menu keep their [data-active] highlight.

Test plan

• Verified in dev-app (pnpm dev-app, Aria Menubar): nothing highlighted at rest, hover/focus highlight the right item, clears on leave.

[Daherkarim]

@crisbeto would you be able to take a look at this when you get a chance?

Thanks!

[ok7sai]

This seems to me the styling issue for code examples on adev. The data-active behavior is expected, the code examples need to be fixed by properly using :focus-within and :hover selectors.

[Daherkarim]

You are right, thanks. data-active is the roving tabindex anchor across all the Aria controls, so it being set at rest is expected. I updated the example CSS so menubar items highlight only on :hover, :focus-within, and [aria-expanded='true'].

[ok7sai]

FYI angular/angular#69103 updates the menu examples style on adev. Thanks for raising up the issue!

[github-actions]

Deployed dev-app for f6bab45 to: https://ng-dev-previews-comp--pr-angular-components-33290-dev-p4l24pi9.web.app

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

[ok7sai]

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

• main: f5a4195
• 22.0.x: 7a8b3f7