From 1a51f2416f668f4f13cf0cb1f5546fcd44ebaa64 Mon Sep 17 00:00:00 2001
From: Michael Prentice <splaktar@gmail.com>
Date: Wed, 12 Jun 2019 04:55:01 -0400
Subject: [PATCH] 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

Fixes #11742
---
 .../autocomplete/autocomplete-theme.scss      |   4 +-
 src/components/autocomplete/autocomplete.scss |   4 +-
 .../autocomplete/autocomplete.spec.js         | 426 ++++++++++++++++--
 .../autocomplete/demoBasicUsage/index.html    |   4 +-
 .../demoCustomTemplate/index.html             |   3 +-
 .../demoCustomTemplate/style.global.css       |   4 +-
 .../autocomplete/demoFloatingLabel/index.html |  23 +-
 .../demoInsideDialog/dialog.tmpl.html         |   3 +-
 .../autocomplete/demoRepeatMode/index.html    |   6 +-
 .../demoRepeatMode/style.global.css           |   8 +-
 .../autocomplete/js/autocompleteController.js |  75 +--
 .../autocomplete/js/autocompleteDirective.js  |  38 +-
 src/core/util/util.js                         |   4 +-
 test/angular-material-mocks.js                |   2 +-
 14 files changed, 494 insertions(+), 110 deletions(-)

diff --git a/src/components/autocomplete/autocomplete-theme.scss b/src/components/autocomplete/autocomplete-theme.scss
index 03585333e0..aece493afd 100644
--- a/src/components/autocomplete/autocomplete-theme.scss
+++ b/src/components/autocomplete/autocomplete-theme.scss
@@ -49,10 +49,10 @@ md-autocomplete.md-THEME_NAME-theme {
 .md-autocomplete-suggestions-container.md-THEME_NAME-theme,
 .md-autocomplete-standard-list-container.md-THEME_NAME-theme {
   background: '{{background-hue-1}}';
-  li {
+  .md-autocomplete-suggestion {
     color: '{{foreground-1}}';
     &:hover,
-    &#selected_option {
+    &.selected {
       background: '{{background-500-0.18}}';
     }
   }
diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss
index b9302f4d3c..ddc9127449 100644
--- a/src/components/autocomplete/autocomplete.scss
+++ b/src/components/autocomplete/autocomplete.scss
@@ -174,7 +174,7 @@ md-autocomplete {
     input {
       border: 1px solid $border-color;
     }
-    li:focus {
+    .md-autocomplete-suggestion:focus {
       color: #fff;
     }
   }
@@ -214,7 +214,7 @@ md-autocomplete {
   list-style: none;
   padding: 0;
 
-  li {
+  .md-autocomplete-suggestion {
     font-size: 14px;
     overflow: hidden;
     padding: 0 15px;
diff --git a/src/components/autocomplete/autocomplete.spec.js b/src/components/autocomplete/autocomplete.spec.js
index 6ef3052c5a..c97a873b32 100644
--- a/src/components/autocomplete/autocomplete.spec.js
+++ b/src/components/autocomplete/autocomplete.spec.js
@@ -1769,10 +1769,12 @@ describe('<md-autocomplete>', function() {
   });
 
   describe('Accessibility', function() {
-    var $timeout = null;
+    var $timeout = null, $mdConstant = null, $material = null;
 
     beforeEach(inject(function ($injector) {
       $timeout = $injector.get('$timeout');
+      $material = $injector.get('$material');
+      $mdConstant = $injector.get('$mdConstant');
     }));
 
     it('should add the placeholder as the input\'s aria-label', function() {
@@ -1795,6 +1797,393 @@ describe('<md-autocomplete>', function() {
       expect(input.attr('aria-label')).toBe('placeholder');
     });
 
+    it('should set activeOption when autoselect is off', function() {
+      var template =
+        '<md-autocomplete' +
+        '   md-selected-item="selectedItem"' +
+        '   md-search-text="searchText"' +
+        '   md-items="item in match(searchText)"' +
+        '   md-item-text="item.display"' +
+        '   placeholder="placeholder"' +
+        '   md-autoselect="false">' +
+        '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+      var scope = createScope();
+      var element = compile(template, scope);
+      var ctrl = element.controller('mdAutocomplete');
+      var ul = element.find('ul');
+      var input = element.find('input');
+      // Run our initial flush
+      $timeout.flush();
+
+      expect(ctrl.index).toBe(-1);
+      expect(ctrl.hidden).toBe(true);
+      expect(ctrl.activeOption).toBe(null);
+      expect(input[0].getAttribute('aria-owns')).toBe(null);
+      expect(input[0].getAttribute('aria-activedescendant')).toBe(null);
+
+      // Focus the input
+      ctrl.focus();
+
+      // Update the scope
+      element.scope().searchText = 'ba';
+      waitForVirtualRepeat(element);
+
+      var suggestions = ul.find('li');
+      expect(suggestions[0].classList).not.toContain('selected');
+
+      expect(ctrl.hidden).toBe(false);
+
+      ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.DOWN_ARROW));
+      $material.flushInterimElement();
+
+      expect(suggestions[0].classList).toContain('selected');
+
+      expect(ctrl.index).toBe(0);
+      expect(ctrl.hidden).toBe(false);
+      expect(ctrl.activeOption).toBe('md-option-' + ctrl.id + '-0');
+      expect(input[0].getAttribute('aria-owns')).toBe('ul-' + ctrl.id);
+      expect(input[0].getAttribute('aria-activedescendant')).toBe('md-option-' + ctrl.id + '-0');
+    });
+
+    it('should start from the end when up arrow is pressed', function() {
+      var template =
+        '<md-autocomplete' +
+        '   md-selected-item="selectedItem"' +
+        '   md-search-text="searchText"' +
+        '   md-items="item in match(searchText)"' +
+        '   md-item-text="item.display"' +
+        '   placeholder="placeholder"' +
+        '   md-autoselect="false">' +
+        '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+      var scope = createScope();
+      var element = compile(template, scope);
+      var ctrl = element.controller('mdAutocomplete');
+      var ul = element.find('ul');
+      var input = element.find('input');
+      // Run our initial flush
+      $timeout.flush();
+
+      expect(ctrl.index).toBe(-1);
+      expect(ctrl.hidden).toBe(true);
+      expect(ctrl.activeOption).toBe(null);
+      expect(input[0].getAttribute('aria-owns')).toBe(null);
+      expect(input[0].getAttribute('aria-activedescendant')).toBe(null);
+
+      // Focus the input
+      ctrl.focus();
+
+      // Update the scope
+      element.scope().searchText = 'ba';
+      waitForVirtualRepeat(element);
+
+      var suggestions = ul.find('li');
+      expect(suggestions[0].classList).not.toContain('selected');
+
+      expect(ctrl.hidden).toBe(false);
+
+      ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.UP_ARROW));
+      $material.flushInterimElement();
+
+      expect(suggestions[1].classList).toContain('selected');
+
+      expect(ctrl.index).toBe(1);
+      expect(ctrl.hidden).toBe(false);
+      expect(ctrl.activeOption).toBe('md-option-' + ctrl.id + '-1');
+      expect(input[0].getAttribute('aria-owns')).toBe('ul-' + ctrl.id);
+      expect(input[0].getAttribute('aria-activedescendant')).toBe('md-option-' + ctrl.id + '-1');
+    });
+
+    it('should set activeOption when autoselect is on', function() {
+      var template =
+        '<md-autocomplete' +
+        '   md-selected-item="selectedItem"' +
+        '   md-search-text="searchText"' +
+        '   md-items="item in match(searchText)"' +
+        '   md-item-text="item.display"' +
+        '   placeholder="placeholder"' +
+        '   md-autoselect="true">' +
+        '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+      var scope = createScope();
+      var element = compile(template, scope);
+      var ctrl = element.controller('mdAutocomplete');
+      var ul = element.find('ul');
+      var input = element.find('input');
+      // Run our initial flush
+      $timeout.flush();
+
+      expect(ctrl.index).toBe(0);
+      expect(ctrl.hidden).toBe(true);
+      expect(ctrl.activeOption).toBe(null);
+      expect(input[0].getAttribute('aria-owns')).toBe(null);
+      expect(input[0].getAttribute('aria-activedescendant')).toBe(null);
+
+      // Focus the input
+      ctrl.focus();
+
+      // Update the scope
+      element.scope().searchText = 'ba';
+      waitForVirtualRepeat(element);
+
+      // Wait for the next tick when the values will be updated
+      $timeout.flush();
+
+      var suggestions = ul.find('li');
+      expect(suggestions[0].classList).toContain('selected');
+      expect(ctrl.activeOption).toBe('md-option-' + ctrl.id + '-0');
+      expect(input[0].getAttribute('aria-owns')).toBe('ul-' + ctrl.id);
+      expect(input[0].getAttribute('aria-activedescendant')).toBe('md-option-' + ctrl.id + '-0');
+
+      expect(ctrl.hidden).toBe(false);
+
+      ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.DOWN_ARROW));
+      $material.flushInterimElement();
+
+      expect(suggestions[1].classList).toContain('selected');
+
+      expect(ctrl.index).toBe(1);
+      expect(ctrl.hidden).toBe(false);
+      expect(ctrl.activeOption).toBe('md-option-' + ctrl.id + '-1');
+    });
+
+    it('should update activeOption when selection is cleared and autoselect is off', function() {
+      var template =
+        '<md-autocomplete' +
+        '   md-selected-item="selectedItem"' +
+        '   md-search-text="searchText"' +
+        '   md-items="item in match(searchText)"' +
+        '   md-item-text="item.display"' +
+        '   placeholder="placeholder"' +
+        '   md-autoselect="false">' +
+        '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+      var scope = createScope();
+      var element = compile(template, scope);
+      var ctrl = element.controller('mdAutocomplete');
+      var ul = element.find('ul');
+      var input = element.find('input');
+      // Run our initial flush
+      $timeout.flush();
+
+      expect(ctrl.index).toBe(-1);
+      expect(ctrl.hidden).toBe(true);
+      expect(ctrl.activeOption).toBe(null);
+      expect(input[0].getAttribute('aria-owns')).toBe(null);
+      expect(input[0].getAttribute('aria-activedescendant')).toBe(null);
+
+      // Focus the input
+      ctrl.focus();
+
+      // Update the scope
+      element.scope().searchText = 'ba';
+      waitForVirtualRepeat(element);
+
+      // Wait for the next tick when the values will be updated
+      $timeout.flush();
+
+      var suggestions = ul.find('li');
+      expect(suggestions[0].classList).not.toContain('selected');
+      expect(ctrl.activeOption).toBe(null);
+      expect(ctrl.hidden).toBe(false);
+      expect(input[0].getAttribute('aria-owns')).toBe('ul-' + ctrl.id);
+      expect(input[0].getAttribute('aria-activedescendant')).toBe(null);
+
+      ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.DOWN_ARROW));
+      $material.flushInterimElement();
+
+      expect(suggestions[0].classList).toContain('selected');
+      expect(input[0].getAttribute('aria-activedescendant')).toBe('md-option-' + ctrl.id + '-0');
+
+      ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ENTER));
+      $material.flushInterimElement();
+      expect(ctrl.hidden).toBe(true);
+
+      ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ESCAPE));
+      $timeout.flush();
+
+      expect(ctrl.index).toBe(-1);
+      expect(ctrl.hidden).toBe(true);
+      expect(ctrl.activeOption).toBe(null);
+      expect(input[0].getAttribute('aria-owns')).toBe(null);
+      expect(input[0].getAttribute('aria-activedescendant')).toBe(null);
+    });
+
+    it('should update activeOption when selection is cleared and autoselect is on', function() {
+      var template =
+        '<md-autocomplete' +
+        '   md-selected-item="selectedItem"' +
+        '   md-search-text="searchText"' +
+        '   md-items="item in match(searchText)"' +
+        '   md-item-text="item.display"' +
+        '   placeholder="placeholder"' +
+        '   md-autoselect="true">' +
+        '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+      var scope = createScope();
+      var element = compile(template, scope);
+      var ctrl = element.controller('mdAutocomplete');
+      var ul = element.find('ul');
+      var input = element.find('input');
+      // Run our initial flush
+      $timeout.flush();
+
+      expect(ctrl.index).toBe(0);
+      expect(ctrl.hidden).toBe(true);
+      expect(ctrl.activeOption).toBe(null);
+      expect(input[0].getAttribute('aria-owns')).toBe(null);
+      expect(input[0].getAttribute('aria-activedescendant')).toBe(null);
+
+      // Focus the input
+      ctrl.focus();
+
+      // Update the scope
+      element.scope().searchText = 'ba';
+      waitForVirtualRepeat(element);
+
+      // Wait for the next tick when the values will be updated
+      $timeout.flush();
+
+      var suggestions = ul.find('li');
+      expect(suggestions[0].classList).toContain('selected');
+      expect(ctrl.activeOption).toBe('md-option-' + ctrl.id + '-0');
+      expect(input[0].getAttribute('aria-owns')).toBe('ul-' + ctrl.id);
+      expect(input[0].getAttribute('aria-activedescendant')).toBe('md-option-' + ctrl.id + '-0');
+
+      expect(ctrl.hidden).toBe(false);
+
+      ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ENTER));
+      $material.flushInterimElement();
+      expect(ctrl.hidden).toBe(true);
+
+      ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ESCAPE));
+      $timeout.flush();
+
+      expect(ctrl.index).toBe(0);
+      expect(ctrl.hidden).toBe(true);
+      expect(ctrl.activeOption).toBe('md-option-' + ctrl.id + '-0');
+      expect(input[0].getAttribute('aria-owns')).toBe(null);
+      expect(input[0].getAttribute('aria-activedescendant')).toBe(null);
+    });
+
+    it('should always define the name attribute on the input', function() {
+      var template =
+        '<md-autocomplete' +
+        '   md-selected-item="selectedItem"' +
+        '   md-search-text="searchText"' +
+        '   md-items="item in match(searchText)"' +
+        '   md-item-text="item.display"' +
+        '   placeholder="placeholder">' +
+        '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+      var scope = createScope();
+      var element = compile(template, scope);
+      var ctrl = element.controller('mdAutocomplete');
+      var input = element.find('input');
+      // Run our initial flush
+      $timeout.flush();
+
+      expect(input[0].getAttribute('name')).toBe('input-' + ctrl.id);
+    });
+
+    it('should always define the name attribute on the input when floating label is enabled',
+      function() {
+        var template =
+          '<md-autocomplete' +
+          '   md-floating-label="Test Label"' +
+          '   md-selected-item="selectedItem"' +
+          '   md-search-text="searchText"' +
+          '   md-items="item in match(searchText)"' +
+          '   md-item-text="item.display"' +
+          '   placeholder="placeholder">' +
+          '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+          '</md-autocomplete>';
+        var scope = createScope();
+        var element = compile(template, scope);
+        var ctrl = element.controller('mdAutocomplete');
+        var input = element.find('input');
+        // Run our initial flush
+        $timeout.flush();
+
+        expect(input[0].getAttribute('name')).toBe('fl-input-' + ctrl.id);
+    });
+
+    it('should set proper aria values and remove attributes on input when ng-disabled', function() {
+      var template =
+        '<md-autocomplete' +
+        '   ng-disabled="true"' +
+        '   md-selected-item="selectedItem"' +
+        '   md-search-text="searchText"' +
+        '   md-items="item in match(searchText)"' +
+        '   md-item-text="item.display"' +
+        '   placeholder="placeholder">' +
+        '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+      var scope = createScope();
+      var element = compile(template, scope);
+      var ctrl = element.controller('mdAutocomplete');
+      var input = element.find('input');
+      // Run our initial flush
+      $timeout.flush();
+
+      expect(input[0].getAttribute('role')).toBe(null);
+      expect(input[0].getAttribute('aria-autocomplete')).toBe(null);
+      expect(input[0].getAttribute('aria-owns')).toBe(null);
+      expect(input[0].getAttribute('aria-haspopup')).toBe('false');
+    });
+
+    it('should set proper aria values and remove attributes on input when disabled', function() {
+      var template =
+        '<md-autocomplete' +
+        '   disabled' +
+        '   md-selected-item="selectedItem"' +
+        '   md-search-text="searchText"' +
+        '   md-items="item in match(searchText)"' +
+        '   md-item-text="item.display"' +
+        '   placeholder="placeholder">' +
+        '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+      var scope = createScope();
+      var element = compile(template, scope);
+      var ctrl = element.controller('mdAutocomplete');
+      var input = element.find('input');
+      // Run our initial flush
+      $timeout.flush();
+
+      expect(input[0].getAttribute('role')).toBe(null);
+      expect(input[0].getAttribute('aria-autocomplete')).toBe(null);
+      expect(input[0].getAttribute('aria-owns')).toBe(null);
+      expect(input[0].getAttribute('aria-haspopup')).toBe('false');
+    });
+
+    it('should add IDs to each option', function() {
+      var template =
+        '<md-autocomplete' +
+        '   md-selected-item="selectedItem"' +
+        '   md-search-text="searchText"' +
+        '   md-items="item in match(searchText)"' +
+        '   md-item-text="item.display"' +
+        '   placeholder="placeholder">' +
+        '  <span md-highlight-text="searchText">{{item.display}}</span>' +
+        '</md-autocomplete>';
+      var scope = createScope();
+      var element = compile(template, scope);
+      var ctrl = element.controller('mdAutocomplete');
+      var ul = element.find('ul');
+
+      // Focus the input
+      ctrl.focus();
+
+      // Update the scope
+      element.scope().searchText = 'fo';
+      waitForVirtualRepeat(element);
+
+      var suggestions = ul.find('li');
+
+      expect(suggestions[0].getAttribute('id')).toContain('md-option-');
+    });
+
     it('should add the input-aria-label as the input\'s aria-label', function() {
       var template =
       '<md-autocomplete' +
@@ -1982,49 +2371,18 @@ describe('<md-autocomplete>', function() {
       expect(liveEl.textContent).toBe(scope.items[0].display + ' There are 3 matches available.');
     });
 
-    it('should announce the selection when using the arrow keys', function() {
+    it('should announce when an option is picked', function() {
       ctrl.focus();
       waitForVirtualRepeat();
 
       expect(ctrl.hidden).toBe(false);
 
       ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.DOWN_ARROW));
-
-      // Flush twice, because the display value will be resolved asynchronously and then the live-announcer will
-      // be triggered.
-      $timeout.flush();
       $timeout.flush();
 
       expect(ctrl.index).toBe(0);
-      expect(liveEl.textContent).toBe(scope.items[0].display);
-
-      ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.DOWN_ARROW));
-
-      // Flush twice, because the display value will be resolved asynchronously and then the
-      // live-announcer will be triggered.
-      $timeout.flush();
-      $timeout.flush();
-
-      expect(ctrl.index).toBe(1);
-      expect(liveEl.textContent).toBe(scope.items[1].display);
-    });
-
-    it('should announce when an option is selected', function() {
-      ctrl.focus();
-      waitForVirtualRepeat();
-
       expect(ctrl.hidden).toBe(false);
 
-      ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.DOWN_ARROW));
-
-      // Flush twice, because the display value will be resolved asynchronously and then the
-      // live-announcer will be triggered.
-      $timeout.flush();
-      $timeout.flush();
-
-      expect(ctrl.index).toBe(0);
-      expect(liveEl.textContent).toBe(scope.items[0].display);
-
       ctrl.keydown(keydownEvent($mdConstant.KEY_CODE.ENTER));
 
       // Flush twice, because the display value will be resolved asynchronously and then the
@@ -2033,6 +2391,7 @@ describe('<md-autocomplete>', function() {
       $timeout.flush();
 
       expect(liveEl.textContent).toBe(scope.items[0].display + ' ' + ctrl.selectedMessage);
+      expect(ctrl.hidden).toBe(true);
     });
 
     it('should announce the count when matches change', function() {
@@ -2133,6 +2492,7 @@ describe('<md-autocomplete>', function() {
 
       element.remove();
     }));
+
     it('passes the value to the item watcher', inject(function($timeout) {
       var scope = createScope();
       var itemValue = null;
diff --git a/src/components/autocomplete/demoBasicUsage/index.html b/src/components/autocomplete/demoBasicUsage/index.html
index e5ac536ef2..8bb8cd24d2 100644
--- a/src/components/autocomplete/demoBasicUsage/index.html
+++ b/src/components/autocomplete/demoBasicUsage/index.html
@@ -15,9 +15,9 @@
           md-items="item in ctrl.querySearch(ctrl.searchText)"
           md-item-text="item.display"
           md-min-length="0"
+          md-escape-options="clear"
           placeholder="Ex. Alaska"
-          input-aria-labelledby="favoriteStateLabel"
-          input-aria-describedby="autocompleteDetailedDescription">
+          input-aria-labelledby="favoriteStateLabel">
         <md-item-template>
           <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
         </md-item-template>
diff --git a/src/components/autocomplete/demoCustomTemplate/index.html b/src/components/autocomplete/demoCustomTemplate/index.html
index 0074a57a81..1540796902 100644
--- a/src/components/autocomplete/demoCustomTemplate/index.html
+++ b/src/components/autocomplete/demoCustomTemplate/index.html
@@ -13,13 +13,14 @@
           md-items="item in ctrl.querySearch(ctrl.searchText)"
           md-item-text="item.name"
           md-min-length="0"
+          md-escape-options="clear"
           input-aria-label="Current Repository"
           placeholder="Pick an Angular repository"
           md-menu-class="autocomplete-custom-template"
           md-menu-container-class="custom-container">
         <md-item-template>
           <span class="item-title">
-            <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
+            <md-icon md-svg-icon="img/icons/octicon-repo.svg" aria-hidden="true"></md-icon>
             <span> {{item.name}} </span>
           </span>
           <span class="item-metadata">
diff --git a/src/components/autocomplete/demoCustomTemplate/style.global.css b/src/components/autocomplete/demoCustomTemplate/style.global.css
index a3ba6ec6e2..7744aa3735 100644
--- a/src/components/autocomplete/demoCustomTemplate/style.global.css
+++ b/src/components/autocomplete/demoCustomTemplate/style.global.css
@@ -1,14 +1,14 @@
 md-autocomplete#custom-template {
   width: 200px;
 }
-.autocomplete-custom-template li {
+.autocomplete-custom-template .md-autocomplete-suggestion {
   border-bottom: 1px solid #ccc;
   height: auto;
   padding-top: 8px;
   padding-bottom: 8px;
   white-space: normal;
 }
-.autocomplete-custom-template li:last-child {
+.autocomplete-custom-template .md-autocomplete-suggestion:last-child {
   border-bottom-width: 0;
 }
 .autocomplete-custom-template .item-title,
diff --git a/src/components/autocomplete/demoFloatingLabel/index.html b/src/components/autocomplete/demoFloatingLabel/index.html
index 03be8b4810..0b25deab21 100644
--- a/src/components/autocomplete/demoFloatingLabel/index.html
+++ b/src/components/autocomplete/demoFloatingLabel/index.html
@@ -8,17 +8,18 @@
           <input id="floatingLabelName" type="text"/>
         </md-input-container>
         <md-autocomplete flex required
-            md-input-name="autocompleteField"
-            md-input-minlength="2"
-            md-input-maxlength="18"
-            md-no-cache="ctrl.noCache"
-            md-selected-item="ctrl.selectedItem"
-            md-search-text="ctrl.searchText"
-            md-items="item in ctrl.querySearch(ctrl.searchText)"
-            md-item-text="item.display"
-            md-require-match=""
-            md-floating-label="Favorite state"
-            input-aria-describedby="favoriteStateDescription">
+          md-input-name="autocompleteField"
+          md-input-minlength="2"
+          md-input-maxlength="18"
+          md-no-cache="ctrl.noCache"
+          md-selected-item="ctrl.selectedItem"
+          md-search-text="ctrl.searchText"
+          md-items="item in ctrl.querySearch(ctrl.searchText)"
+          md-item-text="item.display"
+          md-escape-options="clear"
+          md-require-match=""
+          md-floating-label="Favorite state"
+          input-aria-describedby="favoriteStateDescription">
           <md-item-template>
             <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
           </md-item-template>
diff --git a/src/components/autocomplete/demoInsideDialog/dialog.tmpl.html b/src/components/autocomplete/demoInsideDialog/dialog.tmpl.html
index d66473db3a..656923f4e7 100644
--- a/src/components/autocomplete/demoInsideDialog/dialog.tmpl.html
+++ b/src/components/autocomplete/demoInsideDialog/dialog.tmpl.html
@@ -22,9 +22,10 @@ <h2>Autocomplete Dialog Example</h2>
             md-items="item in ctrl.querySearch(ctrl.searchText)"
             md-item-text="item.display"
             md-min-length="0"
+            md-escape-options="clear"
             placeholder="What is your favorite US state?"
             input-aria-label="Favorite State"
-            md-autofocus="">
+            md-autofocus md-autoselect>
           <md-item-template>
             <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
           </md-item-template>
diff --git a/src/components/autocomplete/demoRepeatMode/index.html b/src/components/autocomplete/demoRepeatMode/index.html
index 33be6f1d9e..45cca4943b 100644
--- a/src/components/autocomplete/demoRepeatMode/index.html
+++ b/src/components/autocomplete/demoRepeatMode/index.html
@@ -22,6 +22,7 @@ <h4>Standard mode</h4>
               md-items="item in ctrl.querySearch(ctrl.searchText)"
               md-item-text="item.name"
               md-min-length="0"
+              md-escape-options="clear"
               input-aria-describedby="standard-autocomplete-description"
               input-aria-label="Current Repository"
               placeholder="Pick an Angular repository"
@@ -30,7 +31,7 @@ <h4>Standard mode</h4>
               md-mode="standard">
             <md-item-template>
               <span class="item-title">
-                <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
+                <md-icon md-svg-icon="img/icons/octicon-repo.svg" aria-hidden="true"></md-icon>
                 <span> {{item.name}} </span>
               </span>
               <p class="item-desc">{{item.desc}}</p>
@@ -70,6 +71,7 @@ <h4>Virtual mode</h4>
               md-items="item in ctrl.querySearch(ctrl.searchText)"
               md-item-text="item.name"
               md-min-length="0"
+              md-escape-options="clear"
               input-aria-describedby="virtual-autocomplete-description"
               input-aria-label="Current Repository"
               placeholder="Pick an Angular repository"
@@ -78,7 +80,7 @@ <h4>Virtual mode</h4>
               md-mode="virtual">
             <md-item-template>
               <span class="item-title">
-                <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
+                <md-icon md-svg-icon="img/icons/octicon-repo.svg" aria-hidden="true"></md-icon>
                 <span> {{item.name}} </span>
               </span>
               <p class="item-desc">
diff --git a/src/components/autocomplete/demoRepeatMode/style.global.css b/src/components/autocomplete/demoRepeatMode/style.global.css
index 977d80112d..cb7014c812 100644
--- a/src/components/autocomplete/demoRepeatMode/style.global.css
+++ b/src/components/autocomplete/demoRepeatMode/style.global.css
@@ -2,16 +2,16 @@
 #virtual-autocomplete {
   width: 200px;
 }
-.autocomplete-standard-template li,
-.autocomplete-virtual-template li {
+.autocomplete-standard-template .md-autocomplete-suggestion,
+.autocomplete-virtual-template .md-autocomplete-suggestion {
   border-bottom: 1px solid #ccc;
   height: auto;
   padding-top: 8px;
   padding-bottom: 8px;
   white-space: normal;
 }
-.autocomplete-virtual-template li:last-child,
-.autocomplete-standard-template li:last-child {
+.autocomplete-virtual-template .md-autocomplete-suggestion:last-child,
+.autocomplete-standard-template .md-autocomplete-suggestion:last-child {
   border-bottom-width: 0;
 }
 .autocomplete-virtual-template .item-title,
diff --git a/src/components/autocomplete/js/autocompleteController.js b/src/components/autocomplete/js/autocompleteController.js
index 717374e4c0..8dbfdb7e7e 100644
--- a/src/components/autocomplete/js/autocompleteController.js
+++ b/src/components/autocomplete/js/autocompleteController.js
@@ -40,14 +40,15 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
   defineProperty('hidden', handleHiddenChange, true);
 
   // Public Exported Variables
-  ctrl.scope      = $scope;
-  ctrl.parent     = $scope.$parent;
-  ctrl.itemName   = itemParts[ 0 ];
-  ctrl.matches    = [];
-  ctrl.loading    = false;
-  ctrl.hidden     = true;
-  ctrl.index      = null;
-  ctrl.id         = $mdUtil.nextUid();
+  ctrl.scope = $scope;
+  ctrl.parent = $scope.$parent;
+  ctrl.itemName = itemParts[0];
+  ctrl.matches = [];
+  ctrl.loading = false;
+  ctrl.hidden = true;
+  ctrl.index = -1;
+  ctrl.activeOption = null;
+  ctrl.id = $mdUtil.nextUid();
   ctrl.isDisabled = null;
   ctrl.isRequired = null;
   ctrl.isReadonly = null;
@@ -55,20 +56,20 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
   ctrl.selectedMessage = $scope.selectedMessage || 'selected';
 
   // Public Exported Methods
-  ctrl.keydown                       = keydown;
-  ctrl.blur                          = blur;
-  ctrl.focus                         = focus;
-  ctrl.clear                         = clearValue;
-  ctrl.select                        = select;
-  ctrl.listEnter                     = onListEnter;
-  ctrl.listLeave                     = onListLeave;
-  ctrl.mouseUp                       = onMouseup;
-  ctrl.getCurrentDisplayValue        = getCurrentDisplayValue;
-  ctrl.registerSelectedItemWatcher   = registerSelectedItemWatcher;
+  ctrl.keydown = keydown;
+  ctrl.blur = blur;
+  ctrl.focus = focus;
+  ctrl.clear = clearValue;
+  ctrl.select = select;
+  ctrl.listEnter = onListEnter;
+  ctrl.listLeave = onListLeave;
+  ctrl.mouseUp = onMouseup;
+  ctrl.getCurrentDisplayValue = getCurrentDisplayValue;
+  ctrl.registerSelectedItemWatcher = registerSelectedItemWatcher;
   ctrl.unregisterSelectedItemWatcher = unregisterSelectedItemWatcher;
-  ctrl.notFoundVisible               = notFoundVisible;
-  ctrl.loadingIsVisible              = loadingIsVisible;
-  ctrl.positionDropdown              = positionDropdown;
+  ctrl.notFoundVisible = notFoundVisible;
+  ctrl.loadingIsVisible = loadingIsVisible;
+  ctrl.positionDropdown = positionDropdown;
 
   /**
    * Report types to be used for the $mdLiveAnnouncer
@@ -239,6 +240,22 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
     elements.input.focus();
   }
 
+  /**
+   * Update the activeOption based on the selected item in the listbox.
+   * The activeOption is used in the template to set the aria-activedescendant attribute, which
+   * enables screen readers to properly handle visual focus within the listbox and announce the
+   * item's place in the list. I.e. "List item 3 of 50". Anytime that `ctrl.index` changes, this
+   * function needs to be called to update the activeOption.
+   */
+  function updateActiveOption() {
+    var selectedOption = elements.scroller.querySelector('.selected');
+    if (selectedOption) {
+      ctrl.activeOption = selectedOption.id;
+    } else {
+      ctrl.activeOption = null;
+    }
+  }
+
   /**
    * Sets up any watchers used by autocomplete
    */
@@ -366,6 +383,7 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
         $mdUtil.disableScrollAround(elements.ul);
         enableWrapScroll = disableElementScrollEvents(angular.element(elements.wrap));
         ctrl.documentElement.on('click', handleClickOutside);
+        $mdUtil.nextTick(updateActiveOption);
       }
     } else if (hidden && !oldHidden) {
       ctrl.documentElement.off('click', handleClickOutside);
@@ -509,8 +527,8 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
 
   /**
    * Handles changes to the searchText property.
-   * @param searchText
-   * @param previousSearchText
+   * @param {string} searchText
+   * @param {string} previousSearchText
    */
   function handleSearchText (searchText, previousSearchText) {
     ctrl.index = getDefaultIndex();
@@ -594,17 +612,17 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
         if (ctrl.loading || hasSelection()) return;
         event.stopPropagation();
         event.preventDefault();
-        ctrl.index   = Math.min(ctrl.index + 1, ctrl.matches.length - 1);
+        ctrl.index = Math.min(ctrl.index + 1, ctrl.matches.length - 1);
+        $mdUtil.nextTick(updateActiveOption);
         updateScroll();
-        reportMessages(false, ReportType.Selected);
         break;
       case $mdConstant.KEY_CODE.UP_ARROW:
         if (ctrl.loading || hasSelection()) return;
         event.stopPropagation();
         event.preventDefault();
-        ctrl.index   = ctrl.index < 0 ? ctrl.matches.length - 1 : Math.max(0, ctrl.index - 1);
+        ctrl.index = ctrl.index < 0 ? ctrl.matches.length - 1 : Math.max(0, ctrl.index - 1);
+        $mdUtil.nextTick(updateActiveOption);
         updateScroll();
-        reportMessages(false, ReportType.Selected);
         break;
       case $mdConstant.KEY_CODE.TAB:
         // If we hit tab, assume that we've left the list so it will close
@@ -868,7 +886,8 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
    */
   function clearSelectedItem () {
     // Reset our variables
-    ctrl.index = 0;
+    ctrl.index = -1;
+    $mdUtil.nextTick(updateActiveOption);
     ctrl.matches = [];
   }
 
diff --git a/src/components/autocomplete/js/autocompleteDirective.js b/src/components/autocomplete/js/autocompleteDirective.js
index 23a3cae6e8..2d94f9be83 100644
--- a/src/components/autocomplete/js/autocompleteDirective.js
+++ b/src/components/autocomplete/js/autocompleteDirective.js
@@ -404,9 +404,9 @@ function MdAutocomplete ($$mdSvgRegistry) {
                 ng-mouseleave="$mdAutocompleteCtrl.listLeave()"\
                 ng-mouseup="$mdAutocompleteCtrl.mouseUp()"\
                 role="listbox">\
-              <li ' + getRepeatType(attr.mdMode) + ' ="item in $mdAutocompleteCtrl.matches"\
+              <li class="md-autocomplete-suggestion" ' + getRepeatType(attr.mdMode) + ' ="item in $mdAutocompleteCtrl.matches"\
                   ng-class="{ selected: $index === $mdAutocompleteCtrl.index }"\
-                  ng-attr-id="{{$index === $mdAutocompleteCtrl.index ? \'selected_option\' : undefined}}"\
+                  ng-attr-id="{{\'md-option-\' + $mdAutocompleteCtrl.id + \'-\' + $index}}"\
                   ng-click="$mdAutocompleteCtrl.select($index)"\
                   role="option"\
                   aria-setsize="{{$mdAutocompleteCtrl.matches.length}}"\
@@ -483,10 +483,10 @@ function MdAutocomplete ($$mdSvgRegistry) {
           return '\
             <md-input-container ng-if="floatingLabel">\
               <label>{{floatingLabel}}</label>\
-              <input type="search"\
+              <input type="text"\
                 ' + (tabindex != null ? 'tabindex="' + tabindex + '"' : '') + '\
-                id="{{ inputId || \'fl-input-\' + $mdAutocompleteCtrl.id }}"\
-                name="{{inputName}}"\
+                id="{{inputId || \'fl-input-\' + $mdAutocompleteCtrl.id}}"\
+                name="{{inputName || \'fl-input-\' + $mdAutocompleteCtrl.id }}"\
                 ng-class="::inputClass"\
                 autocomplete="off"\
                 ng-required="$mdAutocompleteCtrl.isRequired"\
@@ -500,20 +500,20 @@ function MdAutocomplete ($$mdSvgRegistry) {
                 ng-blur="$mdAutocompleteCtrl.blur($event)"\
                 ng-focus="$mdAutocompleteCtrl.focus($event)"\
                 aria-label="{{floatingLabel}}"\
-                aria-autocomplete="list"\
-                role="combobox"\
-                aria-haspopup="true"\
+                ng-attr-aria-autocomplete="{{$mdAutocompleteCtrl.isDisabled ? undefined : \'list\'}}"\
+                ng-attr-role="{{$mdAutocompleteCtrl.isDisabled ? undefined : \'combobox\'}}"\
+                aria-haspopup="{{!$mdAutocompleteCtrl.isDisabled}}"\
                 aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"\
-                aria-owns="ul-{{$mdAutocompleteCtrl.id}}"\
-                ng-attr-aria-activedescendant="{{$mdAutocompleteCtrl.index >= 0 ? \'selected_option\' : undefined}}">\
+                ng-attr-aria-owns="{{$mdAutocompleteCtrl.hidden || $mdAutocompleteCtrl.isDisabled ? undefined : \'ul-\' + $mdAutocompleteCtrl.id}}"\
+                ng-attr-aria-activedescendant="{{!$mdAutocompleteCtrl.hidden && $mdAutocompleteCtrl.activeOption ? $mdAutocompleteCtrl.activeOption : undefined}}">\
               <div md-autocomplete-parent-scope md-autocomplete-replace>' + leftover + '</div>\
             </md-input-container>';
         } else {
           return '\
-            <input type="search"\
+            <input type="text"\
               ' + (tabindex != null ? 'tabindex="' + tabindex + '"' : '') + '\
-              id="{{ inputId || \'input-\' + $mdAutocompleteCtrl.id }}"\
-              name="{{inputName}}"\
+              id="{{inputId || \'input-\' + $mdAutocompleteCtrl.id}}"\
+              name="{{inputName || \'input-\' + $mdAutocompleteCtrl.id }}"\
               ng-class="::inputClass"\
               ng-if="!floatingLabel"\
               autocomplete="off"\
@@ -528,12 +528,12 @@ function MdAutocomplete ($$mdSvgRegistry) {
               ng-focus="$mdAutocompleteCtrl.focus($event)"\
               placeholder="{{placeholder}}"\
               aria-label="{{placeholder}}"\
-              aria-autocomplete="list"\
-              role="combobox"\
-              aria-haspopup="true"\
+              ng-attr-aria-autocomplete="{{$mdAutocompleteCtrl.isDisabled ? undefined : \'list\'}}"\
+              ng-attr-role="{{$mdAutocompleteCtrl.isDisabled ? undefined : \'combobox\'}}"\
+              aria-haspopup="{{!$mdAutocompleteCtrl.isDisabled}}"\
               aria-expanded="{{!$mdAutocompleteCtrl.hidden}}"\
-              aria-owns="ul-{{$mdAutocompleteCtrl.id}}"\
-              ng-attr-aria-activedescendant="{{$mdAutocompleteCtrl.index >= 0 ? \'selected_option\' : undefined}}">';
+              ng-attr-aria-owns="{{$mdAutocompleteCtrl.hidden || $mdAutocompleteCtrl.isDisabled ? undefined : \'ul-\' + $mdAutocompleteCtrl.id}}"\
+              ng-attr-aria-activedescendant="{{!$mdAutocompleteCtrl.hidden && $mdAutocompleteCtrl.activeOption ? $mdAutocompleteCtrl.activeOption : undefined}}">';
         }
       }
 
@@ -542,7 +542,7 @@ function MdAutocomplete ($$mdSvgRegistry) {
           '<button ' +
               'type="button" ' +
               'aria-label="Clear Input" ' +
-              'tabindex="-1" ' +
+              'tabindex="0" ' +
               'ng-if="clearButton && $mdAutocompleteCtrl.scope.searchText" ' +
               'ng-click="$mdAutocompleteCtrl.clear($event)">' +
             '<md-icon md-svg-src="' + $$mdSvgRegistry.mdClose + '"></md-icon>' +
diff --git a/src/core/util/util.js b/src/core/util/util.js
index d36e418ec2..2576ec9cc6 100644
--- a/src/core/util/util.js
+++ b/src/core/util/util.js
@@ -696,8 +696,8 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
      * to minimize $digest thrashing
      *
      * @param {Function} callback function to be called after the tick
-     * @param {boolean} digest true to call $rootScope.$digest() after callback
-     * @param scope scope associated with callback. If the scope is destroyed, the callback will
+     * @param {boolean=} digest true to call $rootScope.$digest() after callback
+     * @param {Object=} scope associated with callback. If the scope is destroyed, the callback will
      *  be skipped.
      * @returns {*}
      */
diff --git a/test/angular-material-mocks.js b/test/angular-material-mocks.js
index a125108658..0ceaae44e2 100644
--- a/test/angular-material-mocks.js
+++ b/test/angular-material-mocks.js
@@ -61,7 +61,7 @@ angular.module('ngMaterial-mock', [
 
     /**
       * AngularJS Material dynamically generates Style tags
-      * based on themes and palletes; for each ng-app.
+      * based on themes and palettes; for each ng-app.
       *
       * For testing, we want to disable generation and
       * <style> DOM injections. So we clear the huge THEME