angular / angular/components

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

Abierto
#24,919 2 comentarios 2 reacciones 0 asignados Ver en GitHub
area: cdk/a11y P4
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con el servicio AriaDescriber y reproduce el problema usando el ejemplo de StackBlitz enlazado con ViewEncapsulation.ShadowDom. Verifica el comportamiento mediante el inspector de accesibilidad del navegador; se considera terminado cuando el botón expone «Some description» y conserva la encapsulación de Shadow DOM.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
accessibility, frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Activo
Claridad
Bastante claro
Aptitud para principiantes
55/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.