This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
select(multiple): aria-checked and aria-selected broken #10748
Labels
a11y
This issue is related to accessibility
for: internal contributor
The team will address this issue and community PRs are not requested.
g3: reported
The issue was reported by an internal or external product team.
has: Pull Request
A PR has been created to address this issue
P1: urgent
Urgent issues that should be addressed in the next minor or patch release.
resolution: fixed
type: bug
Milestone
Comments
Related issue: #10969 |
Splaktar
added
a11y
This issue is related to accessibility
needs: investigation
The cause of this issue is not well understood and needs to be investigated by the team or community
needs: Pull Request
P1: urgent
Urgent issues that should be addressed in the next minor or patch release.
labels
Feb 18, 2018
Splaktar
changed the title
md-select multiple: aria-checked and aria-selected broken
select(multiple): aria-checked and aria-selected broken
Mar 27, 2018
Splaktar
added
for: internal contributor
The team will address this issue and community PRs are not requested.
and removed
needs: investigation
The cause of this issue is not well understood and needs to be investigated by the team or community
labels
Jun 23, 2019
Splaktar
added a commit
that referenced
this issue
Jul 5, 2019
move to WAI-ARIA's Collapsible Dropdown Listbox practice only set `aria-checked` for selects with `multiple` - manually remove `aria-checked` set by ngAria due to ngValue usage apply `md-focused` class to the option with focus implement `aria-activedescendant` and `aria-multiselectable` improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` - put `aria-multiselectable` on the correct element remove unused `deregisterCollectionWatch()` fix overloaded variable names Fixes #10748. Fixes #10967.
Splaktar
added a commit
that referenced
this issue
Jul 14, 2019
move to WAI-ARIA's Collapsible Dropdown Listbox practice only set `aria-checked` for selects with `multiple` - manually remove `aria-checked` set by ngAria due to ngValue usage apply `md-focused` class to the option with focus implement `aria-activedescendant` and `aria-multiselectable` improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` - put `aria-multiselectable` on the correct element remove unused `deregisterCollectionWatch()` fix overloaded variable names Fixes #10748. Fixes #10967.
Splaktar
added a commit
that referenced
this issue
Jul 15, 2019
move to WAI-ARIA's Collapsible Dropdown Listbox practice only set `aria-checked` for selects with `multiple` - manually remove `aria-checked` set by ngAria due to ngValue usage apply `md-focused` class to the option with focus implement `aria-activedescendant` and `aria-multiselectable` improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` - put `aria-multiselectable` on the correct element remove unused `deregisterCollectionWatch()` fix overloaded variable names Fixes #10748. Fixes #10967.
20 tasks
Upon further testing and review, it does not appear that When the |
Splaktar
added a commit
that referenced
this issue
Jul 24, 2019
move to WAI-ARIA's Collapsible Dropdown Listbox practice - https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/examples/listbox/listbox-collapsible.html - don't apply aria-required to md-select as it isn't compatible with the button role - the md-content element is now the listbox - has the appropriate attributes and a unique id - and receives focus when the pop-up panel opens - aria-owns now points to this listbox element so that indexes work - option focus is handled via `aria-activedescendant` - remove `aria-expanded` when collapsed - remove `aria-disabled` attribute when not disabled manually remove `aria-checked` set by ngAria due to ngValue usage apply `md-focused` class to the option with focus improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` remove unused `deregisterCollectionWatch()` fix overloaded variable names don't set aria-selected="false" on options in single selection mode stop labels and values from being announced multiple times add JSDoc/Closure Compiler details and types refinements for VoiceOver users clean up watchers, observers, and event handlers on $destroy fix a case where the initial selection model could contain two values - for the empty option, i.e. "" and "None" - deselection was only clearing the first one in single selection mode reduce duplicated code for focusing option nodes improve keyboard option scrolling behavior eliminate duplicate call to `autoFocus()` TODO: Escape doesn't set the model back to the previous value Fixes #10748. Fixes #10967.
I've pushed a big update to PR #11761 that gets rid of |
Splaktar
added a commit
that referenced
this issue
Jul 29, 2019
move to WAI-ARIA's Collapsible Dropdown Listbox practice - https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/examples/listbox/listbox-collapsible.html - don't apply `aria-required` to `md-select` as it isn't compatible with the button role - the `md-content` element is now the listbox - has the appropriate attributes and a unique id - and receives focus when the pop-up panel opens - `aria-owns` now points to this listbox element so that indexes work - option focus is handled via `aria-activedescendant` - remove `aria-expanded` when collapsed - remove `aria-disabled` attribute when not disabled manually remove `aria-checked` set by ngAria due to ngValue usage apply `md-focused` class to the option with focus improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` remove unused `deregisterCollectionWatch()` fix overloaded variable names don't set `aria-selected="false"` on options in single selection mode stop labels and values from being announced multiple times add JSDoc/Closure Compiler details and types refinements for VoiceOver users clean up watchers, observers, and event handlers on $destroy fix a case where the initial selection model could contain two values - for the empty option, i.e. "" and "None" - deselection was only clearing the first one in single selection mode reduce duplicated code for focusing option nodes improve keyboard option scrolling behavior eliminate duplicate call to `autoFocus()` Fixes #10748. Fixes #10967.
Splaktar
added a commit
that referenced
this issue
Jul 29, 2019
move to WAI-ARIA's Collapsible Dropdown Listbox practice - https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/examples/listbox/listbox-collapsible.html - don't apply `aria-required` to `md-select` as it isn't compatible with the button role - the `md-content` element is now the listbox - has the appropriate attributes and a unique id - and receives focus when the pop-up panel opens - `aria-owns` now points to this listbox element so that indexes work - option focus is handled via `aria-activedescendant` - remove `aria-expanded` when collapsed - remove `aria-disabled` attribute when not disabled manually remove `aria-checked` set by ngAria due to ngValue usage apply `md-focused` class to the option with focus improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` remove unused `deregisterCollectionWatch()` fix overloaded variable names don't set `aria-selected="false"` on options in single selection mode stop labels and values from being announced multiple times add JSDoc/Closure Compiler details and types refinements for VoiceOver users clean up watchers, observers, and event handlers on $destroy fix a case where the initial selection model could contain two values - for the empty option, i.e. "" and "None" - deselection was only clearing the first one in single selection mode reduce duplicated code for focusing option nodes improve keyboard option scrolling behavior eliminate duplicate call to `autoFocus()` Fixes #10748. Fixes #10967.
Splaktar
added a commit
that referenced
this issue
Jul 29, 2019
move to WAI-ARIA's Collapsible Dropdown Listbox practice - https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/examples/listbox/listbox-collapsible.html - don't apply `aria-required` to `md-select` as it isn't compatible with the button role - the `md-content` element is now the listbox - has the appropriate attributes and a unique id - and receives focus when the pop-up panel opens - `aria-owns` now points to this listbox element so that indexes work - option focus is handled via `aria-activedescendant` - remove `aria-expanded` when collapsed - remove `aria-disabled` attribute when not disabled manually remove `aria-checked` set by ngAria due to ngValue usage apply `md-focused` class to the option with focus improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` remove unused `deregisterCollectionWatch()` fix overloaded variable names don't set `aria-selected="false"` on options in single selection mode stop labels and values from being announced multiple times add JSDoc/Closure Compiler details and types refinements for VoiceOver users clean up watchers, observers, and event handlers on $destroy fix a case where the initial selection model could contain two values - for the empty option, i.e. "" and "None" - deselection was only clearing the first one in single selection mode reduce duplicated code for focusing option nodes improve keyboard option scrolling behavior eliminate duplicate call to `autoFocus()` Fixes #10748. Fixes #10967.
Splaktar
added a commit
that referenced
this issue
Jul 29, 2019
move to WAI-ARIA's Collapsible Dropdown Listbox practice - https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/examples/listbox/listbox-collapsible.html - don't apply `aria-required` to `md-select` as it isn't compatible with the button role - the `md-content` element is now the listbox - has the appropriate attributes and a unique id - and receives focus when the pop-up panel opens - `aria-owns` now points to this listbox element so that indexes work - option focus is handled via `aria-activedescendant` - remove `aria-expanded` when collapsed - remove `aria-disabled` attribute when not disabled manually remove `aria-checked` set by ngAria due to ngValue usage apply `md-focused` class to the option with focus improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` remove unused `deregisterCollectionWatch()` fix overloaded variable names don't set `aria-selected="false"` on options in single selection mode stop labels and values from being announced multiple times add JSDoc/Closure Compiler details and types refinements for VoiceOver users clean up watchers, observers, and event handlers on $destroy fix a case where the initial selection model could contain two values - for the empty option, i.e. "" and "None" - deselection was only clearing the first one in single selection mode reduce duplicated code for focusing option nodes improve keyboard option scrolling behavior eliminate duplicate call to `autoFocus()` Fixes #10748. Fixes #10967.
Splaktar
added a commit
that referenced
this issue
Aug 5, 2019
- move to [WAI-ARIA's Collapsible Dropdown Listbox practice](https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/examples/listbox/listbox-collapsible.html) - don't apply aria-required to md-select - as it isn't compatible with the button role - the md-content element is now the listbox - has the appropriate attributes and a unique id - and receives focus when the pop-up panel opens - aria-owns now points to this listbox so that indexes work - option focus is handled via `aria-activedescendant` - remove `aria-expanded` when collapsed - remove `aria-disabled` attribute when not disabled - manually remove `aria-checked` set by ngAria due to ngValue usage - apply `md-focused` class to the option with focus - improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` - remove unused `deregisterCollectionWatch()` - fix overloaded variable names - don't set aria-selected="false" on options in single selection mode - stop labels and values from being announced multiple times - add JSDoc/Closure Compiler details and types - refinements for VoiceOver users - clean up watchers, observers, and event handlers on $destroy - fix a case where the initial selection model could contain two values - for the empty option, i.e. "" and "None" - deselection was only clearing the first one in single selection mode - reduce duplicated code for focusing option nodes - improve keyboard option scrolling behavior - eliminate duplicate call to `autoFocus()` - fix docs css to not interfere with autocomplete suggestion styling Fixes #10748. Fixes #10967.
Splaktar
added a commit
that referenced
this issue
Aug 12, 2019
- move to [WAI-ARIA's Collapsible Dropdown Listbox practice](https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/examples/listbox/listbox-collapsible.html) - don't apply aria-required to md-select - as it isn't compatible with the button role - the md-content element is now the listbox - has the appropriate attributes and a unique id - and receives focus when the pop-up panel opens - aria-owns now points to this listbox so that indexes work - option focus is handled via `aria-activedescendant` - remove `aria-expanded` when collapsed - remove `aria-disabled` attribute when not disabled - manually remove `aria-checked` set by ngAria due to ngValue usage - apply `md-focused` class to the option with focus - improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` - remove unused `deregisterCollectionWatch()` - fix overloaded variable names - don't set aria-selected="false" on options in single selection mode - stop labels and values from being announced multiple times - add JSDoc/Closure Compiler details and types - refinements for VoiceOver users - clean up watchers, observers, and event handlers on $destroy - fix a case where the initial selection model could contain two values - for the empty option, i.e. "" and "None" - deselection was only clearing the first one in single selection mode - reduce duplicated code for focusing option nodes - improve keyboard option scrolling behavior - eliminate duplicate call to `autoFocus()` - fix docs css to not interfere with autocomplete suggestion styling Fixes #10748. Fixes #10967.
Splaktar
added a commit
that referenced
this issue
Sep 7, 2019
- move to [WAI-ARIA's Collapsible Dropdown Listbox practice](https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/examples/listbox/listbox-collapsible.html) - don't apply aria-required to md-select - as it isn't compatible with the button role - the md-content element is now the listbox - has the appropriate attributes and a unique id - and receives focus when the pop-up panel opens - aria-owns now points to this listbox so that indexes work - option focus is handled via `aria-activedescendant` - remove `aria-expanded` when collapsed - remove `aria-disabled` attribute when not disabled - manually remove `aria-checked` set by ngAria due to ngValue usage - apply `md-focused` class to the option with focus - improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` - remove unused `deregisterCollectionWatch()` - fix overloaded variable names - don't set aria-selected="false" on options in single selection mode - stop labels and values from being announced multiple times - add JSDoc/Closure Compiler details and types - refinements for VoiceOver users - clean up watchers, observers, and event handlers on $destroy - fix a case where the initial selection model could contain two values - for the empty option, i.e. "" and "None" - deselection was only clearing the first one in single selection mode - reduce duplicated code for focusing option nodes - improve keyboard option scrolling behavior - eliminate duplicate call to `autoFocus()` - fix docs css to not interfere with autocomplete suggestion styling Fixes #10748. Fixes #10967.
Splaktar
added a commit
that referenced
this issue
Mar 6, 2020
- move to [WAI-ARIA's Collapsible Dropdown Listbox practice](https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/examples/listbox/listbox-collapsible.html) - don't apply aria-required to md-select - as it isn't compatible with the button role - the md-content element is now the listbox - has the appropriate attributes and a unique id - and receives focus when the pop-up panel opens - aria-owns now points to this listbox so that indexes work - option focus is handled via `aria-activedescendant` - remove `aria-expanded` when collapsed - remove `aria-disabled` attribute when not disabled - manually remove `aria-checked` set by ngAria due to ngValue usage - apply `md-focused` class to the option with focus - improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` - remove unused `deregisterCollectionWatch()` - fix overloaded variable names - don't set aria-selected="false" on options in single selection mode - stop labels and values from being announced multiple times - add JSDoc/Closure Compiler details and types - refinements for VoiceOver users - clean up watchers, observers, and event handlers on $destroy - fix a case where the initial selection model could contain two values - for the empty option, i.e. "" and "None" - deselection was only clearing the first one in single selection mode - reduce duplicated code for focusing option nodes - improve keyboard option scrolling behavior - eliminate duplicate call to `autoFocus()` - fix docs css to not interfere with autocomplete suggestion styling Fixes #10748. Fixes #10967.
Splaktar
added a commit
that referenced
this issue
Mar 6, 2020
- move to [WAI-ARIA's Collapsible Dropdown Listbox practice](https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/examples/listbox/listbox-collapsible.html) - don't apply aria-required to md-select - as it isn't compatible with the button role - the md-content element is now the listbox - has the appropriate attributes and a unique id - and receives focus when the pop-up panel opens - aria-owns now points to this listbox so that indexes work - option focus is handled via `aria-activedescendant` - remove `aria-expanded` when collapsed - remove `aria-disabled` attribute when not disabled - manually remove `aria-checked` set by ngAria due to ngValue usage - apply `md-focused` class to the option with focus - improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` - remove unused `deregisterCollectionWatch()` - fix overloaded variable names - don't set aria-selected="false" on options in single selection mode - stop labels and values from being announced multiple times - add JSDoc/Closure Compiler details and types - refinements for VoiceOver users - clean up watchers, observers, and event handlers on $destroy - fix a case where the initial selection model could contain two values - for the empty option, i.e. "" and "None" - deselection was only clearing the first one in single selection mode - reduce duplicated code for focusing option nodes - improve keyboard option scrolling behavior - eliminate duplicate call to `autoFocus()` - fix docs css to not interfere with autocomplete suggestion styling Fixes #10748. Fixes #10967.
Splaktar
added a commit
that referenced
this issue
Mar 10, 2020
- move to [WAI-ARIA's Collapsible Dropdown Listbox practice](https://www.w3.org/TR/2019/NOTE-wai-aria-practices-1.1-20190207/examples/listbox/listbox-collapsible.html) - don't apply aria-required to md-select - as it isn't compatible with the button role - the md-content element is now the listbox - has the appropriate attributes and a unique id - and receives focus when the pop-up panel opens - aria-owns now points to this listbox so that indexes work - option focus is handled via `aria-activedescendant` - remove `aria-expanded` when collapsed - remove `aria-disabled` attribute when not disabled - manually remove `aria-checked` set by ngAria due to ngValue usage - apply `md-focused` class to the option with focus - improve `ng-multiple` implementation - account for `multiple` attribute on `md-select-menu` - remove unused `deregisterCollectionWatch()` - fix overloaded variable names - don't set aria-selected="false" on options in single selection mode - stop labels and values from being announced multiple times - add JSDoc/Closure Compiler details and types - refinements for VoiceOver users - clean up watchers, observers, and event handlers on $destroy - fix a case where the initial selection model could contain two values - for the empty option, i.e. "" and "None" - deselection was only clearing the first one in single selection mode - reduce duplicated code for focusing option nodes - improve keyboard option scrolling behavior - eliminate duplicate call to `autoFocus()` - fix docs css to not interfere with autocomplete suggestion styling Fixes #10748. Fixes #10967.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Labels
a11y
This issue is related to accessibility
for: internal contributor
The team will address this issue and community PRs are not requested.
g3: reported
The issue was reported by an internal or external product team.
has: Pull Request
A PR has been created to address this issue
P1: urgent
Urgent issues that should be addressed in the next minor or patch release.
resolution: fixed
type: bug
Actual Behavior:
What is the issue? *
md-select
multiple values are always "checked" because of ngAria, and selected states don't clearly denote the control's intended usage.What is the expected behavior?
Only checked values should be checked. There is a workaround, adding
aria-checked
tomd-option
with a correct binding will prevent the ng-aria behavior. Ideallymd-select
would fix the ngAria behavior internally.The distinction between selected and checked needs to be more clearly defined and expressed. According to specs, selection should be managed with
aria-activedescendant
unless the multiple select actually supports selecting (not checking) multiple values.aria-selected
would be appropriate for a control where holding ctrl highlights (selects) multiple values, and hitting space checks them.The issue is ambiguous because best practices for multiselects follow a pattern that is completely incompatible with
md-select
(md-select
is actually more of a persistent-selectable tree-view than a multiselect based on examples I've seen). Expected behavior is a best-guess based on how I interpret selected and checked when both are present while using a screen reader.Example of the confusion in actual vs expected read values by NVDA for an unchecked item:
Actual:
Foo item 1 of 3 checked not-selected
Expected:
Foo item 1 of 3 not checked
The text was updated successfully, but these errors were encountered: