angular / angular/components

bug(MatTooltip): A11y - Screen readers landmark issue with matTooltip

Abierto
#21,173 4 comentarios 0 reacciones 0 asignados Ver en GitHub
Accessibility area: material/tooltip P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### Reproduction
When using the `matTooltip` screen readers confused about the landmark and duplicate the announcement (e.g. main, list, group etc.).
This can make a lot of confusion for visually impaired users.

https://stackblitz.com/edit/angular-gizwqa?file=src%2Fapp%2Ftooltip-overview-example.html

Steps to reproduce (in the example above):
1. Navigate to the first button with keyboard (using Tab key).
2. Screen reader will announce the new landmark, the button and the tooltip: _My buttons grouping Button1 button Info about the action_
3. Navigate to second and last buttons, in the last button the landmark will be announced again.
4. Navigate only throw 2 last buttons - the screen reader will announce only the button as expected.
5. Navigate to the first button - the landmark will be announced again (and so on the last 3 button).


#### Expected Behavior

Screen readers will announce the landmark only once (when entering to the landmark)
In the example:
- My buttons grouping Button1 button Info about the action
- Button2 button
- Button3 button

#### Actual Behavior

Screen readers duplicated the announcement.
In the example:
- My buttons grouping Button1 button Info about the action
- Button2 button
- My buttons grouping Button3 button

#### Environment

- Angular: 11.0.2 (also in V10)
- CDK/Material: 11.0.1
- Browser(s): Chrome V87
(tested with NVDA in Firefox and worked as expected).
- Screen readers: NVDA V2020.2, JAWS 2020

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Abre el StackBlitz enlazado y empieza con src/app/tooltip-overview-example.html; reproduce los anuncios con los lectores de pantalla indicados y los pasos de teclado. Rastrea el comportamiento de matTooltip implicado en el anuncio del landmark y, después, verifica que el ejemplo anuncie el landmark solo una vez y coincida con la salida esperada.

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
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.