bug(CDK a11y, Tooltip, SortHeader): AriaDescriber not working inside Shadow DOM

[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 AriaDescriber service creates a container element and appends it to the body. The messages inside the container are linked with the host element using aria-describedby when calling ariaDescriber.describe().

When the host element is inside Shadow DOM this will not work properly because the hidden message element (that is referenced via aria-describedby) is outside of the Shadow DOM and will be ignored by the browser.

Reproduction

I actually had the problem with Angular Material Tooltips and Table Sort Header (which use AriaDescriber) but for the repro I use the AriaDescriber service directly. I set a description on a button in the Example component which uses ViewEncapsulation.ShadowDom.

Steps to reproduce:

1. Open the repro https://stackblitz.com/edit/components-issue-rxwpmf?file=src/app/example-component.ts
2. Inspect the "Action" button
3. Open the "Accessibility" tab in the inspector

Expected Behavior

The button should have the description "Some description" which was created via AriaDescriber service.

Actual Behavior

The button has no description.

The aria-describedby attribute is there but the referenced element is ignored because it's outside of the Shadow DOM. It works if I set encapsulation on the component to Emulated.

Environment

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

[jberndsen-planon]

Our projects run into the same issue using Angular 18.2.12. Is there a workaround available?

Environment
Angular: 18.2.12
CDK/Material: 18.2.12
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): Windows