angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

MatTooltip: element description duplicates it's accessible name #29503

Closed svetsem closed 3 months ago

svetsem commented 3 months ago

Is this a regression?

The previous version in which this bug was not present was

No response

Description

Currently, AriaDescriber doesn't set descriptions if they are exactly the same as the aria-label of the element because screen readers will end up reading the same text twice in a row. However, it doesn't cover the cases when the accessibleName is set from the text content or aria-labelledby, so the duplication still happens.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-nhj9lq?file=src%2Fmain.ts Steps to reproduce:

Use a screen reader to hear the icon button's descriptions, which are the same as the accessible name (for the first two examples; third works as expected).

Expected Behavior

A screen reader doesn't read the element's description if it's exactly the same as its accessible name.

Actual Behavior

A screen reader reads the element's description if it's exactly the same as its accessible name, which leads the user to hear the same text twice. Only using aria-label to determine the accessible name allows avoiding this.

Environment

CDK/Material: 18.1.2 Browser(s): Safari, Chrome Operating System: macOS 14.2.1 Screen reader: VoiceOver

crisbeto commented 3 months ago

Handling this on our end would require monitoring the DOM for text changes which will degrade the performance. I'm closing the issue since it can be easily worked around by the user.

angular-automatic-lock-bot[bot] commented 2 months ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.