fix(select): overhaul screen reader support

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