components
components copied to clipboard
bug(MatSelect): With VoiceOver + Safari, VoiceOver reads 2 letters of the label.
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:
- Access https://material.angular.io/components/select/overview in Safari
- Navigate to Basic mat-select with tab
Expected Behavior
![chrome](https://user-images.githubusercontent.com/43070523/153297148-0ed4bd4a-9fdd-44f2-8413-f6f20f720640.png)
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
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.
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