Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

select(multiple): aria-checked and aria-selected broken #10748

Closed
npbenjohnson opened this issue Jun 17, 2017 · 5 comments · Fixed by #11761
Closed

select(multiple): aria-checked and aria-selected broken #10748

npbenjohnson opened this issue Jun 17, 2017 · 5 comments · Fixed by #11761
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 P1: urgent Urgent issues that should be addressed in the next minor or patch release. resolution: fixed type: bug
Milestone

Comments

@npbenjohnson
Copy link

npbenjohnson commented Jun 17, 2017

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 to md-option with a correct binding will prevent the ng-aria behavior. Ideally md-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

@benjiallen
Copy link

Related issue: #10969

@Splaktar 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 Splaktar added this to the 1.1.8 milestone Feb 18, 2018
@Splaktar Splaktar modified the milestones: 1.1.8, 1.1.9 Mar 16, 2018
@Splaktar 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 Splaktar modified the milestones: 1.1.9, 1.1.10 Apr 19, 2018
@Splaktar Splaktar modified the milestones: 1.1.10, 1.1.11 Jun 19, 2018
@Splaktar Splaktar modified the milestones: 1.1.11, 1.1.12 Sep 24, 2018
@Splaktar Splaktar modified the milestones: 1.1.12, 1.1.13 Jan 3, 2019
@Splaktar Splaktar self-assigned this Jan 22, 2019
@Splaktar Splaktar modified the milestones: 1.1.13, 1.1.14 Feb 10, 2019
@Splaktar Splaktar modified the milestones: 1.1.14, g3: sync Feb 15, 2019
@Splaktar Splaktar modified the milestones: g3: sync, 1.1.18, 1.1.19 Apr 1, 2019
@Splaktar 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 Jun 24, 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`

Fixes #10748. Fixes #10967.
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.
@Splaktar
Copy link
Member

Upon further testing and review, it does not appear that aria-checked has any role to play at all in select components. It appears that the aria-selected and selected attributes are what screen readers look for with listbox implementations.

When the select has the multiple attribute, multiple options are allowed to have the aria-selected and selected attributes.

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.
@Splaktar
Copy link
Member

I've pushed a big update to PR #11761 that gets rid of aria-checked and resolves a lot of other related issues. More testing, review, and feedback is needed. There are also some known issues listed in the PR under TODO.

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 Splaktar added the has: Pull Request A PR has been created to address this issue label Aug 5, 2019
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 Splaktar modified the milestones: 1.1.20, 1.1.21 Aug 15, 2019
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 Splaktar modified the milestones: 1.1.21, 1.1.22 Oct 22, 2019
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
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants