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

Accessibility md-select aria-owns #7023

Closed
Lindsor opened this issue Sep 12, 2017 · 5 comments · Fixed by #9091
Closed

Accessibility md-select aria-owns #7023

Lindsor opened this issue Sep 12, 2017 · 5 comments · Fixed by #9091
Assignees
@crisbeto
Labels
Accessibility This issue is related to accessibility (a11y) needs: discussion Further discussion with the team is needed before proceeding P4 A relatively minor issue that is not relevant to core functions

Comments

@Lindsor
Copy link
Contributor

Lindsor commented Sep 12, 2017

Bug:

aria-owns in the DOM even though the elements it points to are not

What is the expected behavior?

aria-owns should not point to elements not in the DOM, if the elements are not in the DOM then aria-owns should be removed as well

What is the current behavior?

aria-owns shows up in the DOM when those elements are not in the DOM

What are the steps to reproduce?

http://embed.plnkr.co/cLXRzvn2uWQ5y5YmiU8L/
inspect select, notice non-empty aria-owns

What is the use-case or motivation for changing an existing behavior?

Currently throws accessibility issues

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/material": "2.0.0-beta.8"

Is there anything else we should know?
@crisbeto crisbeto self-assigned this Sep 13, 2017
@crisbeto
Copy link
Member

crisbeto commented Sep 13, 2017 •
edited
Loading

It does make sense to clear the attribute when the panel is hidden, however it looks like it causes a regression in the user experience. Previously NVDA would read out something like "{{option label}}, selected" when selecting, but it doesn't do it anymore if the attribute is cleared. Also looking at the documentation, it seems like pointing to unexisting elements isn't disallowed explicitly.

@Lindsor
Copy link
Contributor Author

Lindsor commented Sep 13, 2017

Hmm yes reading the spec theres no specific mention of not allowing it. But if you read this part it implies it.

The value of the aria-owns attribute is a space-separated list of IDREFS that reference one or more elements in the document by ID.

It says "one or more elements IN the document by ID.

I'm ok with leaving it if thats what you think though.
Our business has flagged it as an accessibility bug we need to fix.

Let me know what you think, I'll create a PR if you think we should implement

@crisbeto crisbeto added Accessibility This issue is related to accessibility (a11y) P4 A relatively minor issue that is not relevant to core functions labels Nov 28, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 21, 2017
@crisbeto
fix(select): remove aria-owns when options aren't in the DOM
ab657ee 
Removes the select's `aria-owns` attribute when the options aren't in the DOM, in order to avoid pointing non-existing elements.

Fixes angular#7023.
@crisbeto crisbeto mentioned this issue Dec 21, 2017
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 26, 2017
@crisbeto
fix(select): remove aria-owns when options aren't in the DOM
80a338a 
Removes the select's `aria-owns` attribute when the options aren't in the DOM, in order to avoid pointing non-existing elements.

Fixes angular#7023.
jelbourn pushed a commit that referenced this issue Jan 5, 2018
@crisbeto @jelbourn
fix(select): remove aria-owns when options aren't in the DOM (#9091)
d85c44b 
Removes the select's `aria-owns` attribute when the options aren't in the DOM, in order to avoid pointing non-existing elements.

Fixes #7023.
jelbourn pushed a commit to jelbourn/components that referenced this issue Jan 8, 2018
@crisbeto @jelbourn
fix(select): remove aria-owns when options aren't in the DOM (angular…
4a03497 
…#9091)

Removes the select's `aria-owns` attribute when the options aren't in the DOM, in order to avoid pointing non-existing elements.

Fixes angular#7023.
jelbourn pushed a commit to jelbourn/components that referenced this issue Jan 9, 2018
@crisbeto @jelbourn
fix(select): remove aria-owns when options aren't in the DOM (angular…
08cb925 
…#9091)

Removes the select's `aria-owns` attribute when the options aren't in the DOM, in order to avoid pointing non-existing elements.

Fixes angular#7023.
jelbourn pushed a commit that referenced this issue Jan 9, 2018
@crisbeto @jelbourn
fix(select): remove aria-owns when options aren't in the DOM (#9091)
68c8a79 
Removes the select's `aria-owns` attribute when the options aren't in the DOM, in order to avoid pointing non-existing elements.

Fixes #7023.
tinayuangao pushed a commit that referenced this issue Jan 10, 2018
@crisbeto @tinayuangao
fix(select): remove aria-owns when options aren't in the DOM (#9091)
d9380e2 
Removes the select's `aria-owns` attribute when the options aren't in the DOM, in order to avoid pointing non-existing elements.

Fixes #7023.
@drewterry
Copy link

This causes issues with axe-core when testing for aria roles and required children (listbox requires options). If the aria-owns tag is removed when the listbox is closed, the test fails even though the tags are added when the listbox is opened.

@lozanol
Copy link

lozanol commented Aug 29, 2018

This is also an issue when using the Chrome accessibility tools

@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 Sep 9, 2019
@mmalerba mmalerba added the needs: discussion Further discussion with the team is needed before proceeding label Mar 3, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
Accessibility This issue is related to accessibility (a11y) needs: discussion Further discussion with the team is needed before proceeding P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(select): remove aria-owns when options aren't in the DOM crisbeto/material2
5 participants
@Lindsor @crisbeto @mmalerba @lozanol @drewterry