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

Commit 928c71d

Browse files
committed
fix(select): overhaul screen reader support
- 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.
1 parent 2f77095 commit 928c71d

File tree

7 files changed

+495
-284
lines changed

7 files changed

+495
-284
lines changed

docs/app/css/style.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,13 +155,13 @@ ul {
155155
margin: 0;
156156
padding: 0;
157157
}
158-
ul li:not(.md-nav-item) {
158+
ul:not(.md-autocomplete-suggestions) li:not(.md-nav-item) {
159159
margin-left: 16px;
160160
padding: 0;
161161
margin-top: 3px;
162162
list-style-position: inside;
163163
}
164-
ul li:not(.md-nav-item):first-child {
164+
ul:not(.md-autocomplete-suggestions) li:not(.md-nav-item):first-child {
165165
margin-top: 0;
166166
}
167167
/************

src/components/select/demoBasicUsage/index.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
<label>State</label>
3131
<md-select ng-model="ctrl.userState">
3232
<md-option><em>None</em></md-option>
33-
<md-option ng-repeat="state in ctrl.states" ng-value="state.abbrev" ng-disabled="$index === 1">
33+
<md-option ng-repeat="state in ctrl.states" ng-value="state.abbrev"
34+
ng-disabled="$index === 1">
3435
{{state.abbrev}}
3536
</md-option>
3637
</md-select>
@@ -60,7 +61,8 @@
6061

6162
<div layout="row" layout-align="space-between center">
6263
<span>What armor do you wear?</span>
63-
<md-select ng-model="armor" placeholder="Armor" class="md-no-underline" required md-no-asterisk="false">
64+
<md-select ng-model="armor" placeholder="Armor" class="md-no-underline" required
65+
md-no-asterisk="false">
6466
<md-option value="cloth">Cloth</md-option>
6567
<md-option value="leather">Leather</md-option>
6668
<md-option value="chain">Chainmail</md-option>

src/components/select/demoOptionGroups/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h1 class="md-title">Pick your pizza below</h1>
99
</md-select>
1010
</md-input-container>
1111
<md-input-container>
12-
<label>Topping</label>
12+
<label>Toppings</label>
1313
<md-select ng-model="selectedToppings" multiple>
1414
<md-optgroup label="Meats">
1515
<md-option ng-value="topping.name" ng-repeat="topping in toppings | filter: {category: 'meat' }">{{topping.name}}</md-option>

src/components/select/select-theme.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -154,19 +154,22 @@ md-select-menu.md-THEME_NAME-theme {
154154

155155
&:not([disabled]) {
156156
&:focus,
157-
&:hover {
157+
&:hover,
158+
&.md-focused {
158159
background-color: '{{background-500-0.18}}'
159160
}
160161
}
161162

162163
&[selected] {
163164
color: '{{primary-500}}';
164-
&:focus {
165+
&:focus,
166+
&.md-focused {
165167
color: '{{primary-600}}';
166168
}
167169
&.md-accent {
168170
color: '{{accent-color}}';
169-
&:focus {
171+
&:focus,
172+
&.md-focused {
170173
color: '{{accent-A700}}';
171174
}
172175
}

0 commit comments

Comments
 (0)