feat(dropdown): add WAI-ARIA attributes

 * Add `aria-haspopup` and `and aria-expanded` attributes to dropdown toggle.
 * Dynamically change `aria-expanded` when the dropdown closes or opens.

Closes #1733

Author: bekos

src/dropdown/docs/demo.html

@@ -2,12 +2,12 @@
 <div ng-controller="DropdownCtrl">
     <!-- Simple dropdown -->
     <span class="dropdown" on-toggle="toggled(open)">
-      <a class="dropdown-toggle">
+      <a href class="dropdown-toggle">
         Click me for a dropdown, yo!
       </a>
       <ul class="dropdown-menu">
         <li ng-repeat="choice in items">
-          <a>{{choice}}</a>
+          <a href>{{choice}}</a>
         </li>
       </ul>
     </span>

src/dropdown/dropdown.js

@@ -53,6 +53,11 @@ angular.module('ui.bootstrap.dropdown', [])
     return $scope.isOpen = arguments.length ? !!open : !$scope.isOpen;
   };
 
+  // Allow other directives to watch status
+  this.isOpen = function() {
+    return $scope.isOpen;
+  };
+
   $scope.$watch('isOpen', function( value ) {
     self.$element.toggleClass( openClass, value );
 
@@ -103,6 +108,12 @@ angular.module('ui.bootstrap.dropdown', [])
           });
         }
       });
+
+      // WAI-ARIA
+      element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
+      scope.$watch(dropdownCtrl.isOpen, function( isOpen ) {
+        element.attr('aria-expanded', !!isOpen);
+      });
     }
   };
 });

src/dropdown/test/dropdown.spec.js

@@ -106,6 +106,18 @@ describe('dropdownToggle', function() {
       checkboxEl.click();
       expect($rootScope.clicked).toBeTruthy();
     });
+
+    // WAI-ARIA
+    it('should aria markup to the `dropdown-toggle`', function() {
+      var toggleEl = element.find('a');
+      expect(toggleEl.attr('aria-haspopup')).toBe('true');
+      expect(toggleEl.attr('aria-expanded')).toBe('false');
+
+      clickDropdownToggle();
+      expect(toggleEl.attr('aria-expanded')).toBe('true');
+      clickDropdownToggle();
+      expect(toggleEl.attr('aria-expanded')).toBe('false');
+    });
   });
 
   describe('without trigger', function() {