angular / angular/components

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

Offen
#24,919 2 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/a11y P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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.

![aria-describer-shadowdom](https://user-images.githubusercontent.com/16229645/168264055-4cc41d97-977d-4f3b-a7fd-175242f9ad4a.png)

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit dem AriaDescriber-Dienst und reproduziere das Problem anhand des verknüpften StackBlitz-Beispiels mit ViewEncapsulation.ShadowDom. Überprüfe das Verhalten über den Accessibility-Inspektor des Browsers; als abgeschlossen gilt die Aufgabe, wenn der Button „Some description“ verfügbar macht und dabei die Shadow-DOM-Kapselung beibehält.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Aktiv
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
55/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.