angular / angular/components

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

Ouverte
#24,919 2 commentaires 2 réactions 0 personnes assignées Voir sur GitHub
area: cdk/a11y P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par le service AriaDescriber et reproduisez le problème à l’aide de l’exemple StackBlitz lié avec ViewEncapsulation.ShadowDom. Vérifiez le comportement via l’inspecteur d’accessibilité du navigateur ; c’est terminé lorsque le bouton expose « Some description » tout en conservant l’encapsulation Shadow DOM.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
accessibility, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Active
Clarté
Plutôt claire
Accessibilité débutants
55/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.