angular / angular/components

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

Open
#21,173 4 comments 0 reactions 0 assignees View on GitHub
Accessibility area: material/tooltip P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

Research direction

Open the linked StackBlitz and start with src/app/tooltip-overview-example.html; reproduce the announcements with the listed screen readers and keyboard steps. Trace the matTooltip behavior involved in the landmark announcement, then verify that the example announces the landmark only once and matches the expected output.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.