feat(autocomplete): add support for aria-describedby (#11405)

Fixes #11004

Author: Splaktar

src/components/autocomplete/demoBasicUsage/index.html

@@ -1,7 +1,9 @@
 <div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
   <md-content class="md-padding">
     <form ng-submit="$event.preventDefault()">
-      <p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>
+      <p id="autocompleteDescription">
+        Use <code>md-autocomplete</code> to search for matches from local or remote data sources.
+      </p>
       <md-autocomplete
           ng-disabled="ctrl.isDisabled"
           md-no-cache="ctrl.noCache"
@@ -12,7 +14,8 @@
           md-items="item in ctrl.querySearch(ctrl.searchText)"
           md-item-text="item.display"
           md-min-length="0"
-          placeholder="What is your favorite US state?">
+          placeholder="What is your favorite US state?"
+          aria-describedby="autocompleteDescription autocompleteDetailedDescription">
         <md-item-template>
           <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
         </md-item-template>
@@ -25,7 +28,7 @@
       <md-checkbox ng-model="ctrl.simulateQuery">Simulate query for results?</md-checkbox>
       <md-checkbox ng-model="ctrl.noCache">Disable caching of queries?</md-checkbox>
       <md-checkbox ng-model="ctrl.isDisabled">Disable the input?</md-checkbox>
-      <p>
+      <p id="autocompleteDetailedDescription">
         By default, <code>md-autocomplete</code> will cache results when performing a query.
         After the initial call is performed, it will use the cached results to eliminate unnecessary
         server requests or lookup logic. This can be disabled above.

src/components/autocomplete/demoFloatingLabel/index.html

@@ -4,8 +4,8 @@
       <p>The following example demonstrates floating labels being used as a normal form element.</p>
       <div layout-gt-sm="row">
         <md-input-container flex>
-          <label>Name</label>
-          <input type="text"/>
+          <label for="floatingLabelName">Name</label>
+          <input id="floatingLabelName" type="text"/>
         </md-input-container>
         <md-autocomplete flex required
             md-input-name="autocompleteField"
@@ -17,7 +17,8 @@
             md-items="item in ctrl.querySearch(ctrl.searchText)"
             md-item-text="item.display"
             md-require-match=""
-            md-floating-label="Favorite state">
+            md-floating-label="Favorite state"
+            aria-describedby="favoriteStateDescription">
           <md-item-template>
             <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
           </md-item-template>
@@ -28,6 +29,9 @@
             <div ng-message="maxlength">Your entry is too long.</div>
           </div>
         </md-autocomplete>
+        <p id="favoriteStateDescription" hide>
+          A person's favorite state tells you a lot about them
+        </p>
       </div>
     </form>
   </md-content>

src/components/autocomplete/js/autocompleteController.js

@@ -93,6 +93,9 @@ function MdAutocompleteCtrl ($scope, $element, $mdUtil, $mdConstant, $mdTheming,
       if ($scope.autofocus) {
         $element.on('focus', focusInputElement);
       }
+      if ($scope.ariaDescribedBy) {
+        elements.input.setAttribute('aria-describedby', $scope.ariaDescribedBy);
+      }
     });
   }
 

src/components/autocomplete/js/autocompleteDirective.js

@@ -130,6 +130,10 @@ angular
  *     as much as possible.
  * @param {string=} md-dropdown-position Overrides the default dropdown position. Options: `top`,
  *    `bottom`.
+ * @param {string=} aria-describedby A space-separated list of element IDs. This should contain the
+ *     IDs of any elements that describe this autocomplete. Screen readers will read the content of
+ *     these elements at the end of announcing that the autocomplete has been selected and
+ *     describing its current state. The descriptive elements do not need to be visible on the page.
  * @param {string=} md-selected-message Attribute to specify the text that the screen reader will
  *    announce after a value is selected. Default is: "selected". If `Alaska` is selected in the
  *    options panel, it will read "Alaska selected". You will want to override this when your app
@@ -259,6 +263,7 @@ function MdAutocomplete ($$mdSvgRegistry) {
       itemsExpr:          '@mdItems',
       itemText:           '&mdItemText',
       placeholder:        '@placeholder',
+      ariaDescribedBy:    '@?ariaDescribedby',
       noCache:            '=?mdNoCache',
       requireMatch:       '=?mdRequireMatch',
       selectOnMatch:      '=?mdSelectOnMatch',