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

Commit

Permalink
fix(select): overhaul screen reader support
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
Splaktar committed Jul 29, 2019
1 parent bc7833b commit b7f481c
Show file tree
Hide file tree
Showing 5 changed files with 468 additions and 271 deletions.
2 changes: 1 addition & 1 deletion src/components/select/demoOptionGroups/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ <h1 class="md-title">Pick your pizza below</h1>
</md-select>
</md-input-container>
<md-input-container>
<label>Topping</label>
<label>Toppings</label>
<md-select ng-model="selectedToppings" multiple>
<md-optgroup label="Meats">
<md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>
Expand Down
9 changes: 6 additions & 3 deletions src/components/select/select-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -154,19 +154,22 @@ md-select-menu.md-THEME_NAME-theme {

&:not([disabled]) {
&:focus,
&:hover {
&:hover,
&.md-focused{
background-color: '{{background-500-0.18}}'
}
}

&[selected] {
color: '{{primary-500}}';
&:focus {
&:focus,
&.md-focused {
color: '{{primary-600}}';
}
&.md-accent {
color: '{{accent-color}}';
&:focus {
&:focus,
&.md-focused {
color: '{{accent-A700}}';
}
}
Expand Down
Loading

0 comments on commit b7f481c

Please sign in to comment.