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 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.

src/components/select/demoBasicUsage/index.html

@@ -30,7 +30,8 @@
           <label>State</label>
           <md-select ng-model="ctrl.userState">
             <md-option><em>None</em></md-option>
-            <md-option ng-repeat="state in ctrl.states" ng-value="state.abbrev" ng-disabled="$index === 1">
+            <md-option ng-repeat="state in ctrl.states" ng-value="state.abbrev"
+                       ng-disabled="$index === 1">
               {{state.abbrev}}
             </md-option>
           </md-select>
@@ -60,7 +61,8 @@
 
       <div layout="row" layout-align="space-between center">
         <span>What armor do you wear?</span>
-        <md-select ng-model="armor" placeholder="Armor" class="md-no-underline" required md-no-asterisk="false">
+        <md-select ng-model="armor" placeholder="Armor" class="md-no-underline" required
+                   md-no-asterisk="false">
           <md-option value="cloth">Cloth</md-option>
           <md-option value="leather">Leather</md-option>
           <md-option value="chain">Chainmail</md-option>

src/components/select/demoOptionGroups/index.html

@@ -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>

src/components/select/select-theme.scss

@@ -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}}';
           }
         }