diff --git a/src/components/autocomplete/demoBasicUsage/index.html b/src/components/autocomplete/demoBasicUsage/index.html index 20b11da630..bd6b844e50 100644 --- a/src/components/autocomplete/demoBasicUsage/index.html +++ b/src/components/autocomplete/demoBasicUsage/index.html @@ -1,7 +1,9 @@
-

Use md-autocomplete to search for matches from local or remote data sources.

+

+ Use md-autocomplete to search for matches from local or remote data sources. +

+ placeholder="What is your favorite US state?" + aria-describedby="autocompleteDescription autocompleteDetailedDescription"> {{item.display}} @@ -25,7 +28,7 @@ Simulate query for results? Disable caching of queries? Disable the input? -

+

By default, md-autocomplete 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. diff --git a/src/components/autocomplete/demoFloatingLabel/index.html b/src/components/autocomplete/demoFloatingLabel/index.html index 84872098be..881cea7066 100644 --- a/src/components/autocomplete/demoFloatingLabel/index.html +++ b/src/components/autocomplete/demoFloatingLabel/index.html @@ -4,8 +4,8 @@

The following example demonstrates floating labels being used as a normal form element.

- - + + + md-floating-label="Favorite state" + aria-describedby="favoriteStateDescription"> {{item.display}} @@ -28,6 +29,9 @@
Your entry is too long.
+

+ A person's favorite state tells you a lot about them +

diff --git a/src/components/autocomplete/js/autocompleteController.js b/src/components/autocomplete/js/autocompleteController.js index 95b8f38d15..6af4d255db 100644 --- a/src/components/autocomplete/js/autocompleteController.js +++ b/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); + } }); } diff --git a/src/components/autocomplete/js/autocompleteDirective.js b/src/components/autocomplete/js/autocompleteDirective.js index e0fa96e213..1975270356 100644 --- a/src/components/autocomplete/js/autocompleteDirective.js +++ b/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',