Skip to content

VoiceOver doesn't read MatSelect option inside of a dialog #20694

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
Closed
jelbourn opened this issue Sep 30, 2020 · 4 comments · Fixed by #20695
Closed

VoiceOver doesn't read MatSelect option inside of a dialog #20694

jelbourn opened this issue Sep 30, 2020 · 4 comments · Fixed by #20695
Labels
Accessibility This issue is related to accessibility (a11y) area: material/select G This is is related to a Google internal issue P2 The issue is important to a large percentage of users, with a workaround

Comments

@jelbourn
Copy link
Member

StackBlitz: https://stackblitz.com/edit/angular-q2ppnn?file=src%2Fapp%2Fdialog-overview-example-dialog.html

While MatSelect seems to work fine under normal circumstances, I can't get it to read the options when the select is inside of a dialog. I'm wondering if this might be a bug in VoiceOver, since it's surprising that the interaction would present different based on the dialog context.
@jelbourn jelbourn added P2 The issue is important to a large percentage of users, with a workaround Accessibility This issue is related to accessibility (a11y) G This is is related to a Google internal issue area: material/select labels Sep 30, 2020
@zelliott
Copy link
Collaborator

zelliott commented Sep 30, 2020 •
edited
Loading

It's due to the aria-modal="true" on the dialog container (i.e. aria-modal blocking VO from accessing content outside of the dialog container).

It's not immediately obvious to me what the correct fix is. One idea is to construct the select's overlay within the aria-modal dialog container, but I imagine that would require non-trivial changes to overlays. Another idea is to try to use aria-owns to re-parent the select's overlay to the select itself.

jelbourn added a commit to jelbourn/components that referenced this issue Oct 1, 2020
@jelbourn
fix(material/select): make VoiceOver read options for selects in dialogs
8257e1c 
Fixes angular#20694

@zelliot noted that this issue was caused by `aria-modal` preventing
VoiceOver from accessing the select's listbox overlay. He suggested
using `aria-owns` to re-parent the overlay element to the select
trigger. I tried this and it works great.
@jelbourn jelbourn mentioned this issue Oct 1, 2020
Merged
jelbourn added a commit to jelbourn/components that referenced this issue Oct 1, 2020
@jelbourn
fix(material/select): make VoiceOver read options for selects in dialogs
56c5c0f 
Fixes angular#20694

@zelliot noted that this issue was caused by `aria-modal` preventing
VoiceOver from accessing the select's listbox overlay. He suggested
using `aria-owns` to re-parent the overlay element to the select
trigger. I tried this and it works great.
jelbourn added a commit to jelbourn/components that referenced this issue Oct 1, 2020
@jelbourn
fix(material/select): make VoiceOver read options for selects in dialogs
2317968 
Fixes angular#20694

@zelliot noted that this issue was caused by `aria-modal` preventing
VoiceOver from accessing the select's listbox overlay. He suggested
using `aria-owns` to re-parent the overlay element to the select
trigger. I tried this and it works great.
jelbourn added a commit to jelbourn/components that referenced this issue Oct 1, 2020
@jelbourn
fix(material/select): make VoiceOver read options for selects in dialogs
fe4c893 
Fixes angular#20694

@zelliot noted that this issue was caused by `aria-modal` preventing
VoiceOver from accessing the select's listbox overlay. He suggested
using `aria-owns` to re-parent the overlay element to the select
trigger. I tried this and it works great.
wagnermaciel pushed a commit that referenced this issue Oct 7, 2020
@jelbourn
fix(material/select): make VoiceOver read options for selects in dial…
33a43f7 
…ogs (#20695)

Fixes #20694

@zelliot noted that this issue was caused by `aria-modal` preventing
VoiceOver from accessing the select's listbox overlay. He suggested
using `aria-owns` to re-parent the overlay element to the select
trigger. I tried this and it works great.
@rameshworsht
Copy link
Contributor

@wagnermaciel Could you please re-open this issue. #20695 Does not fix this issue on Safari and Firefox.

@wagnermaciel wagnermaciel reopened this Oct 20, 2020
@jelbourn jelbourn added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent P2 The issue is important to a large percentage of users, with a workaround and removed P2 The issue is important to a large percentage of users, with a workaround P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Oct 27, 2020
@jelbourn jelbourn mentioned this issue Oct 27, 2020
Closed
@jelbourn
Copy link
Member Author

jelbourn commented Oct 27, 2020 •
edited
Loading

Tracking via #20900 as a separate, distinct issue for Safari and Firefox on macOS.

@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 Nov 27, 2020
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Jan 14, 2021
@jelbourn @wagnermaciel
fix(material/select): make VoiceOver read options for selects in dial…
b91c6a1 
…ogs (angular#20695)

Fixes angular#20694

@zelliot noted that this issue was caused by `aria-modal` preventing
VoiceOver from accessing the select's listbox overlay. He suggested
using `aria-owns` to re-parent the overlay element to the select
trigger. I tried this and it works great.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Accessibility This issue is related to accessibility (a11y) area: material/select G This is is related to a Google internal issue 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/select): make VoiceOver read options for selects in dialogs jelbourn/components
4 participants
@jelbourn @zelliott @rameshworsht @wagnermaciel