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.

docs/app/css/style.css

@@ -155,13 +155,13 @@ ul {
   margin: 0;
   padding: 0;
 }
-ul li:not(.md-nav-item) {
+ul:not(.md-autocomplete-suggestions) li:not(.md-nav-item) {
   margin-left: 16px;
   padding: 0;
   margin-top: 3px;
   list-style-position: inside;
 }
-ul li:not(.md-nav-item):first-child {
+ul:not(.md-autocomplete-suggestions) li:not(.md-nav-item):first-child {
   margin-top: 0;
 }
 /************

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