This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
select: does not work well with VoiceOver #10967
Assignees
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
os: iOS
This issue is specific to iOS
P1: urgent
Urgent issues that should be addressed in the next minor or patch release.
resolution: fixed
type: bug
Milestone
Comments
Splaktar
added
- needs: Pull Request
needs: investigation
|
|
Adding more issues with VoiceOver and
|
Splaktar
changed the title
Splaktar
added
g3: reported
Splaktar
added
the
for: internal contributor
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
|
After some significant investigation, it doesn't appear that the WAI-ARIA Collapsible Dropdown Listbox pattern is well supported across screen readers (especially VoiceOver and NVDA). I'm currently exploring other patterns and options. |
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.
|
After experimenting with and testing a number of approaches, I've pushed a big update to PR #11761 that provides a refined version of the WAI-ARIA Collapsible Dropdown Listbox pattern. It seems to be working considerably better in VoiceOver on macOS and testing on other platforms/screen readers is in progress. More testing, review, and feedback is needed. There are also some known issues listed in the PR under TODO. Single SelectionI believe that the selection issues mentioned in #10967 (comment) should be addressed. I haven't yet tested with the VoiceOver rotor. Multiple SelectionAs far as escaping a multiple selection pop-up panel mentioned in #10967 (comment), even on desktop it's not straightforward to get out of a multiple selection pop-up panel. You need to either tab out or use the Escape key to exit with the keyboard. With the mouse, you can click the backdrop. It would be nice if there was some guidance for working with multiple selection drop downs like this in the Material Design spec, but as far as I can tell, there is not. This sounds like a topic to raise with @jelbourn for consultation with the UX team as this also affects Angular Material. |
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.
The component does not act as one whole form control; we may want to explore changing this from
role="listbox"to"combobox"to get better results with VoiceOver specifically. Will be tricky to not mess up NVDA and JAWS at the same time.The text was updated successfully, but these errors were encountered: