fix(autocomplete): improve implementation of aria-activedescendant

- allow screen readers to do more and us to do less
  - remove extra calls to announce the item that is visually focused
  - remove tests for these extra live announcements
  - give every option an id for use with `aria-activedescendant`
  - use the `selected` class for styling and finding the active option
- implement recommendations from a11y guides
  - add the clear button to the tab order
  - change input type to `text`
  - always define a `name` attribute
- when the popup isn't expanded
  - `aria-owns` and `aria-activedescendant` shouldn't be defined
- when the autocomplete is disabled
  - `aria-autocomplete` and `aria-role` shouldn't be defined
  - `aria-haspopup` should be false
- add md-autocomplete-suggestion class for styling instead of using `li`
- add `md-autoselect` to the dialog demo for help w/ manual testing
- remove overly verbose `aria-describedby` from basic demo
- mark `md-icons` in `md-item-templates` of autocomplete demos as hidden
- update demos to use `md-escape-options="clear"` for better a11y
- fix docs css to not interfere with autocomplete suggestion styling

Fixes #11742

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