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

[nirkai]

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

[crisbeto]

I could reproduce it against NVDA as well. From what I can tell, the problem comes from the fact that our aria-describedby elements are in a different landmark than the element they're describing.

[nirkai]

@crisbeto I also thought in that direction, but I have checked it with the cdk AriaDescriber service too. This issue didn't reproduce without the tooltip.

[crisbeto]

That's odd since the AriaDescriber is basically the only accessibility treatment that we're doing on the tooltip. I tried to use aria-describedby directly myself and I couldn't reproduce it when the description was within the landmark.

[nirkai]

I know, couldn't figured yet what the root of this problem. Could it be connected to the removing/adding the mat-tooltip to the cdk-overlay-container in DOM?

Here is a quick example of both MatTooltip and AriaDescriber: