bug(CDK a11y): AriaDescriber id not unique in microfrontend / docs

[rothsandro]

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

The Tooltip component (and others like SortHeader, Badge) uses the CDK AriaDescriber service for a11y. The AriaDescriber service creates a new hidden element with a unique id and the tooltip text, appends it to the body and creates a reference on the tooltip element with aria-describedby.

The unique id for the hidden element is generated using counter variable (cdk-describedby-message-1, cdk-describedby-message-2, ...). In a microfrontend with multiple Angular versions on the page this results in elements with an id that is not unique. This results in wrong descriptions.

Reproduction

Steps to reproduce:

1. Open https://material.angular.io/components/tooltip/overview
2. Inspect the "Action" button in the first example
3. Open the "Accessibility" tab in the inspector and scroll to the "Description" property

Expected Behavior

The description should be "Info about the action".

The id should be unique in a microfrontend with multiple Angular versions.

Actual Behavior

The description is "Select a version of the documentation".

This is because aria-describedby is set to cdk-describedby-message-1.
If you scroll to the end in the Elements Tab you can see that there are two elements with class cdk-describedby-message-container and they contain elements with the same id.

Environment

• Angular: 13.0.3
• CDK/Material: 13.3.7
• Browser(s): Brave
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

We should be able to solve this, but I want to point out that we use this approach for generating IDs in a bunch of other places in the codebase.

[rothsandro]

@crisbeto Good to know. It would probably make sense to update all of them.

[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.}