bug(cdkMenu): Accessibility Issue (context-) menu

[zwif]

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

When a (context-) menu is opened and then closed, the aria-controls attribute on the host is not cleared.

When opening the menu, following happens:

• menu is injected in the DOM with an id like cdk-menu-1 (the number increases with each time opening the context menu)
• Additionally, the trigger element will get an aria-controls="cdk-menu-1" attribute

When the menu closes:

• menu is removed from the DOM
• the aria-controls attribute stays ❌

This is an accessibility error, since it references an id which is not present in the DOM. Tools for automated accessibility testing will report this, like accessibilityinsights in the attached screenshot from the angular material cdk menu example page:

Reproduction

StackBlitz link: https://stackblitz.com/edit/bt5mp6y6 (Fork from the stackblitz of the first example of the cdkMenu page https://material.angular.io/cdk/menu/examples)
Steps to reproduce:

1. open the contextmenu
2. close the contextmenu
   => When inspecting the DOM you can see the aria-controls attribute, but the referenced id is not present in the DOM.

Expected Behavior

aria-controls attribute is removed when the referenced menu is removed from the DOM.

Actual Behavior

aria-controls attribute is present referencing an id not present in the DOM.

Environment

• CDK/Material: 19.2.4

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}