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

selection-list: improve a11y if list is disabled #9995

Closed
devversion opened this issue Feb 17, 2018 · 1 comment · Fixed by #10137
Closed

selection-list: improve a11y if list is disabled #9995

devversion opened this issue Feb 17, 2018 · 1 comment · Fixed by #10137
Assignees
@devversion
Labels
Accessibility This issue is related to accessibility (a11y) needs: discussion Further discussion with the team is needed before proceeding

Comments

@devversion
Copy link
Member

This is an issue mainly for tracking. Right now if the selection list is disabled, there is no way for the user to navigate to the different options.

This way, screenreader users for example are not able to see what the individual options are. We should make them focusable, but just prevent toggling the selected state of the option. See #9963
@devversion devversion added the Accessibility This issue is related to accessibility (a11y) label Feb 17, 2018
@devversion devversion self-assigned this Feb 17, 2018
@devversion devversion changed the title selection-list: improve a11y if list is disabled. selection-list: improve a11y if list is disabled Feb 17, 2018
This was referenced Feb 17, 2018
Merged
Closed
devversion added a commit to devversion/material2 that referenced this issue Feb 24, 2018
@devversion
fix(selection-list): improve accessibility of selection list
5349f2f 
* Since the selection list is still a `list` that contains some content, there should be a way for screenreader users, to navigate through the options (even if disabled). With this change, if the list is disabled, it's still possible to walk through the options.
* Adds a new functionality to the `ListKeyManager` that allows the developer to control the items that can't be focused. `skipPredicate`. (e.g. for the selection list we want to make sure that users can navigate using the arrow keys to disabled items as well)
* Automatically redirects focus from the selection list element to the first active option, or falls back to the first option if no option is active yet.
* Testing: Fixes that by default all fake events bubble up the DOM. This works in most of the cases, but it's wrong to always bubble events. e.g. `focus` doesn't bubble.

Fixes angular#9995
@devversion devversion mentioned this issue Feb 24, 2018
Merged
devversion added a commit to devversion/material2 that referenced this issue Feb 25, 2018
@devversion
fix(selection-list): improve accessibility of selection list
a625f70 
* Since the selection list is still a `list` that contains some content, there should be a way for screenreader users, to navigate through the options (even if disabled). With this change, if the list is disabled, it's still possible to walk through the options.
* Adds a new functionality to the `ListKeyManager` that allows the developer to control the items that can't be focused. `skipPredicate`. (e.g. for the selection list we want to make sure that users can navigate using the arrow keys to disabled items as well)
* Testing: Fixes that by default all fake events bubble up the DOM. This works in most of the cases, but it's wrong to always bubble events. e.g. `focus` doesn't bubble.

Fixes angular#9995
devversion added a commit to devversion/material2 that referenced this issue Feb 25, 2018
@devversion
fix(selection-list): improve accessibility of selection list
9cb81dc 
* Since the selection list is still a `list` that contains some content, there should be a way for screenreader users, to navigate through the options (even if disabled). With this change, if the list is disabled, it's still possible to walk through the options.
* Adds a new functionality to the `ListKeyManager` that allows the developer to control the items that can't be focused. `skipPredicate`. (e.g. for the selection list we want to make sure that users can navigate using the arrow keys to disabled items as well)
* Testing: Fixes that by default all fake events bubble up the DOM. This works in most of the cases, but it's wrong to always bubble events. e.g. `focus` doesn't bubble.

Fixes angular#9995
devversion added a commit to devversion/material2 that referenced this issue Feb 25, 2018
@devversion
fix(selection-list): improve accessibility of selection list
ca8273f 
* Since the selection list is still a `list` that contains some content, there should be a way for screenreader users, to navigate through the options (even if disabled). With this change, if the list is disabled, it's still possible to walk through the options.
* Adds a new functionality to the `ListKeyManager` that allows the developer to control the items that can't be focused. `skipPredicate`. (e.g. for the selection list we want to make sure that users can navigate using the arrow keys to disabled items as well)
* Testing: Fixes that by default all fake events bubble up the DOM. This works in most of the cases, but it's wrong to always bubble events. e.g. `focus` doesn't bubble.

Fixes angular#9995
tinayuangao pushed a commit that referenced this issue Feb 28, 2018
@devversion @tinayuangao
fix(selection-list): improve accessibility of selection list (#10137)
51fce51 
* Since the selection list is still a `list` that contains some content, there should be a way for screenreader users, to navigate through the options (even if disabled). With this change, if the list is disabled, it's still possible to walk through the options.
* Adds a new functionality to the `ListKeyManager` that allows the developer to control the items that can't be focused. `skipPredicate`. (e.g. for the selection list we want to make sure that users can navigate using the arrow keys to disabled items as well)
* Testing: Fixes that by default all fake events bubble up the DOM. This works in most of the cases, but it's wrong to always bubble events. e.g. `focus` doesn't bubble.

Fixes #9995
tinayuangao pushed a commit that referenced this issue Mar 5, 2018
@devversion @tinayuangao
fix(selection-list): improve accessibility of selection list (#10137)
cbe11d4 
* Since the selection list is still a `list` that contains some content, there should be a way for screenreader users, to navigate through the options (even if disabled). With this change, if the list is disabled, it's still possible to walk through the options.
* Adds a new functionality to the `ListKeyManager` that allows the developer to control the items that can't be focused. `skipPredicate`. (e.g. for the selection list we want to make sure that users can navigate using the arrow keys to disabled items as well)
* Testing: Fixes that by default all fake events bubble up the DOM. This works in most of the cases, but it's wrong to always bubble events. e.g. `focus` doesn't bubble.

Fixes #9995
@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 8, 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

@devversion devversion

Labels
Accessibility This issue is related to accessibility (a11y) needs: discussion Further discussion with the team is needed before proceeding
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(selection-list): improve accessibility of selection list devversion/material2
2 participants
@devversion @mmalerba