bug(MatTooltip): A11y - Screen readers landmark issue with matTooltip
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
#### 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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Ouvrez le StackBlitz lié et commencez par src/app/tooltip-overview-example.html ; reproduisez les annonces avec les lecteurs d’écran indiqués et les étapes au clavier. Suivez le comportement de matTooltip impliqué dans l’annonce du landmark, puis vérifiez que l’exemple annonce le landmark une seule fois et correspond à la sortie attendue.
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é
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 45/100