bug(MatSelect): With VoiceOver + Safari, VoiceOver reads 2 letters of the label.

[lynnkim-prev]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

With VoiceOver + Safari, VoiceOver reads 2 letters of the label.

Reproduction

Steps to reproduce:

1. Access https://material.angular.io/components/select/overview in Safari
2. Navigate to Basic mat-select with tab

Expected Behavior

Actual Behavior

VO reads Steak Fa, Favorite food Steak, ...

Environment

• Angular: v11, v12, v13 (observed from the latest 3 versions on the official website)
• CDK/Material: Material
• Browser(s): Safari
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

I can reproduce it too, although nothing specific stands out that could be causing it so it may be a browser bug. All we're doing is setting an aria-labelledby pointing to the form field label.

[omarboulbaze]

It seems that the VoiceOver with Chrome reads out the value twice : Favourite Food Steak Steak on Chrome. Source: https://material.angular.io/components/select/examples

[zarend]

Hello,

I cannot reproduce. We might have already fixed this. @lynnkim-prev does the issue still happen for you?

• macos 12.6.1 (21G217)
• Safari Version 16.1 (17614.2.9.1.13, 17614)
• VoiceOver

-Zach

[zarend]

Hello @lynnkim-prev ,

Thank you for reporting this issue. Unfortunately we are not able to take action if we cannot reproduce it. This might have already been fixed. We hope Angular Material meets your needs. If you continue to have problems please reopen this issue with reproduction steps or file a new issue.

• Zach

[angular-automatic-lock-bot[bot]]

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.}