bug(MatSelect): With VoiceOver + Safari, VoiceOver doesn't read MatSelect options.
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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
Safari + VO does not read options in `mat-select`. It seems to work fine in Chrome, but Safari+VO seems to have the issue.
### Reproduction
Steps to reproduce:
1. Access [https://material.angular.io/components/select/overview](https://material.angular.io/components/select/overview) in Safari
2. Turn on voiceover
3. Navigate to with tab key
4. Open options panel with enter/space key
5. Navigate options with arrow down, arrow up key
### Expected Behavior
Voiceover read options
example) [https://material.angular.io/components/select/overview](https://material.angular.io/components/select/overview) in Chrome
https://user-images.githubusercontent.com/43070523/153293202-b6ba2a06-5c27-4d5c-8057-2e2942d0afe5.mov
### Actual Behavior
Voiceover does not read options
https://user-images.githubusercontent.com/43070523/153291632-f28713aa-aa3e-4e8e-92e4-d81d61a43190.mov
### Environment
- Angular: v11, v12, v13
- CDK/Material: Material
- Browser(s): Safari
- Operating System (e.g. Windows, macOS, Ubuntu): macOS
Contributor guide
Research direction
Start by reproducing the issue on the Material select overview in Safari with VoiceOver, following the listed keyboard steps, and compare it with Chrome. Trace the mat-select accessibility behavior involved in option navigation; done means VoiceOver reads each option while moving with the arrow keys.
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