components
components copied to clipboard
angular
bug(MatSelect): With VoiceOver + Safari, VoiceOver doesn't read MatSelect options.
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:
- Access https://material.angular.io/components/select/overview in Safari
- Turn on voiceover
- Navigate to
with tab key - Open options panel with enter/space key
- Navigate options with arrow down, arrow up key
Expected Behavior
Voiceover read options example) 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
Confirmed that I can reproduce.
Safari Version 15.4 (17613.1.17.1.13) MacOS 12.3.1 (21E258)
Action item to address this issue is to confirm that we're following WAI ARIA best practices for combobox and listbox. Some of the ARIA we have for select does not look quite right to me. There's likely an issue with how we add an extra aria description to read the value of a select option. That seems suspicious to me. IIRC we added that to work around an issue with NVDA and I suspect that work-around is either not necessary or incorrect.