diff --git a/src/dropdown/docs/demo.html b/src/dropdown/docs/demo.html
index 6b389c9a1a..c58117de1f 100644
--- a/src/dropdown/docs/demo.html
+++ b/src/dropdown/docs/demo.html
@@ -2,12 +2,12 @@
-
+
Click me for a dropdown, yo!
diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
index a14963426b..f89b7f2c75 100644
--- a/src/dropdown/dropdown.js
+++ b/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);
+ });
}
};
});
diff --git a/src/dropdown/test/dropdown.spec.js b/src/dropdown/test/dropdown.spec.js
index e4e4c521cd..a0a4c51f72 100644
--- a/src/dropdown/test/dropdown.spec.js
+++ b/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() {