feat(typeahead): add WAI-ARIA markup

src/typeahead/test/typeahead.spec.js

@@ -130,11 +130,16 @@ describe('typeahead tests', function () {
 
     it('should open and close typeahead based on matches', function () {
       var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue"></div>');
+      var inputEl = findInput(element);
+      expect(inputEl.attr('aria-expanded')).toBe('false');
+
       changeInputValueTo(element, 'ba');
       expect(element).toBeOpenWithActive(2, 0);
+      expect(inputEl.attr('aria-expanded')).toBe('true');
 
       changeInputValueTo(element, '');
       expect(element).toBeClosed();
+      expect(inputEl.attr('aria-expanded')).toBe('false');
     });
 
     it('should not open typeahead if input value smaller than a defined threshold', function () {

src/typeahead/typeahead.js

@@ -69,6 +69,12 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
 
       var hasFocus;
 
+      // WAI-ARIA
+      element.attr({
+        'aria-autocomplete': 'list',
+        'aria-expanded': false
+      });
+
       //pop-up element used to display matches
       var popUpEl = angular.element('<div typeahead-popup></div>');
       popUpEl.attr({
@@ -93,6 +99,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
       var resetMatches = function() {
         scope.matches = [];
         scope.activeIdx = -1;
+        element.attr('aria-expanded', false);
       };
 
       var getMatchesAsync = function(inputValue) {
@@ -125,6 +132,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
               scope.position = appendToBody ? $position.offset(element) : $position.position(element);
               scope.position.top = scope.position.top + element.prop('offsetHeight');
 
+              element.attr('aria-expanded', true);
             } else {
               resetMatches();
             }

template/typeahead/typeahead-popup.html

@@ -1,5 +1,5 @@
-<ul class="dropdown-menu" ng-if="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;">
-    <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
+<ul class="dropdown-menu" ng-if="isOpen()" ng-style="{top: position.top+'px', left: position.left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
+    <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option">
         <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
     </li>
 </ul>