Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

VoiceOver reads out "selected" after each mat-option inside mat-select #21491

Closed
crisbeto opened this issue Jan 5, 2021 · 5 comments · Fixed by #26673
Closed

VoiceOver reads out "selected" after each mat-option inside mat-select #21491

crisbeto opened this issue Jan 5, 2021 · 5 comments · Fixed by #26673
Assignees
@zarend
Labels
Accessibility This issue is related to accessibility (a11y) area: material/select P2 The issue is important to a large percentage of users, with a workaround

Comments

@crisbeto
Copy link
Member

crisbeto commented Jan 5, 2021

I noticed this after updating to Big Sur and trying out mat-select with VoiceOver. While navigating through the list of options, VoiceOver reads out something like "Coffee, selected (5 of 10)" for every single option. My first thought was that it might be due to the fact that we remove aria-selected from unselected options in order to reduce noise, but the behavior got even weirder once I got it to set aria-selected="false". Now VoiceOver started reading out both "not selected" and "selected" for each option, e.g. "Coffee not selected, selected (5 of 10)". We'll have to investigate this, because I don't see anything obvious that could be causing it. My best bet is that there's a random "selected" string somewhere in the DOM that is being picked up by VoiceOver.
@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround Accessibility This issue is related to accessibility (a11y) need a11y consult Team needs to consult with an accessibility expert before proceeding needs investigation A member of the team needs to do further investigation to determine the root cause area: material/select labels Jan 5, 2021
@allan-chen
Copy link

Probably need to file a bug on voiceover for this one - appears to be a regression since Big Sur. We're able to reproduce this on canonical examples as well:
https://codepen.io/smhigley/pen/gObMVzv

@annieyw annieyw added this to To do in Accessibility 2021 Mar 25, 2021
@Splaktar
Copy link
Member

I emailed this over to accessibility@apple.com to report it after not finding it in the list of reported issues on https://www.applevis.com/bugs/macos-active.

@Splaktar Splaktar added blocked This issue is blocked by some external factor, such as a prerequisite PR P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs investigation A member of the team needs to do further investigation to determine the root cause need a11y consult Team needs to consult with an accessibility expert before proceeding P2 The issue is important to a large percentage of users, with a workaround labels Jun 19, 2021
@Splaktar Splaktar removed this from To do in Accessibility 2021 Jun 19, 2021
@Splaktar
Copy link
Member

Response:

Thank you for your email and including a link that provided the technical details we require. We appreciate you taking the time to bring this to our attention, and have passed this information along to the appropriate team for consideration.

Sincerely,

Apple Accessibility

@zarend zarend self-assigned this Oct 7, 2022
@zarend zarend removed the blocked This issue is blocked by some external factor, such as a prerequisite PR label Oct 7, 2022
@zarend zarend mentioned this issue Oct 7, 2022
Closed
1 task
@zarend
Copy link
Contributor

zarend commented Feb 1, 2023

Hello folks,

I looked at the a11y tree that we're producing for Select component. Looks like we're putting aria-selected="true" on every option. That would explain why VoiceOver is reading them all as selected.

For fixing, I recommend changing how we set aria-selected to align with how we did it for MDC Chips and MDC List component.

  • If an option is not selectable, omit aria-selected attribute
  • If option is not selected, put aria-selected="false"
  • If option is selected, put aria-selected="true"

-Zach

@zarend zarend added P2 The issue is important to a large percentage of users, with a workaround and removed P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Feb 6, 2023
zarend added a commit to zarend/components that referenced this issue Feb 21, 2023
@zarend
fix(material/core): mat-option sets aria-selected="false"
41f17cb 
For mat-option, set `aria-selected="false"` on deselected options.
Confirms with [WAI ARIA Listbox authoring practices
guide](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/), which says to
always include aria-selected attribute on listbox options that can be
selected. Fix issue where VoiceOver reads every option as "selected"
(21491).

Fix angular#21491
zarend added a commit to zarend/components that referenced this issue Feb 21, 2023
@zarend
fix(material/core): mat-option sets aria-selected="false"
f58d8dd 
For mat-option, set `aria-selected="false"` on deselected options.
Confirms with [WAI ARIA Listbox authoring practices
guide](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/), which says to
always include aria-selected attribute on listbox options that can be
selected. Fix issue where VoiceOver reads every option as "selected"
(21491).

Fix angular#21491
@zarend zarend mentioned this issue Feb 21, 2023
Merged
zarend added a commit to zarend/components that referenced this issue Feb 21, 2023
@zarend
fix(material/core): mat-option sets aria-selected="false"
d436d1e 
For mat-option, set `aria-selected="false"` on deselected options.
Confirms with [WAI ARIA Listbox authoring practices
guide](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/), which says to
always include aria-selected attribute on listbox options that can be
selected. Fix issue where VoiceOver reads every option as "selected"
(21491).

Fix angular#21491
zarend added a commit to zarend/components that referenced this issue Feb 21, 2023
@zarend
fix(material/core): mat-option sets aria-selected="false"
2914d81 
For mat-option, set `aria-selected="false"` on deselected options.
Confirms with [WAI ARIA Listbox authoring practices
guide](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/), which says to
always include aria-selected attribute on listbox options that can be
selected. Fix issue where VoiceOver reads every option as "selected"
(21491).

Fix angular#21491
angular-robot bot pushed a commit that referenced this issue Mar 7, 2023
@zarend
fix(material/core): mat-option sets aria-selected="false" (#26673)
4c8f505 
For mat-option, set `aria-selected="false"` on deselected options.
Confirms with [WAI ARIA Listbox authoring practices
guide](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/), which says to
always include aria-selected attribute on listbox options that can be
selected. Fix issue where VoiceOver reads every option as "selected"
(21491).

Fix #21491
angular-robot bot pushed a commit that referenced this issue Mar 7, 2023
@zarend
fix(material/core): mat-option sets aria-selected="false" (#26673)
1bf2fc2 
For mat-option, set `aria-selected="false"` on deselected options.
Confirms with [WAI ARIA Listbox authoring practices
guide](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/), which says to
always include aria-selected attribute on listbox options that can be
selected. Fix issue where VoiceOver reads every option as "selected"
(21491).

Fix #21491

(cherry picked from commit 4c8f505)
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 7, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@zarend zarend

Labels
Accessibility This issue is related to accessibility (a11y) area: material/select P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/core): mat-option sets aria-selected="false" zarend/components
4 participants
@Splaktar @crisbeto @zarend @allan-chen