From 22ebd2300e1931b16b17a334aeafaf74a1470711 Mon Sep 17 00:00:00 2001 From: Tasos Bekos Date: Tue, 4 Feb 2014 13:19:55 +0100 Subject: [PATCH] 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 --- src/dropdown/docs/demo.html | 4 ++-- src/dropdown/dropdown.js | 11 +++++++++++ src/dropdown/test/dropdown.spec.js | 12 ++++++++++++ 3 files changed, 25 insertions(+), 2 deletions(-) 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() {