diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js index 74b6d4a3bc..7b537b30bc 100644 --- a/src/collapse/collapse.js +++ b/src/collapse/collapse.js @@ -5,7 +5,11 @@ angular.module('ui.bootstrap.collapse', []) return { link: function (scope, element, attrs) { function expand() { - element.removeClass('collapse').addClass('collapsing'); + element.removeClass('collapse') + .addClass('collapsing') + .attr('aria-expanded', true) + .attr('aria-hidden', false); + $animate.addClass(element, 'in', { to: { height: element[0].scrollHeight + 'px' } }).then(expandDone); @@ -29,7 +33,9 @@ angular.module('ui.bootstrap.collapse', []) // initially all panel collapse have the collapse class, this removal // prevents the animation from jumping to collapsed state .removeClass('collapse') - .addClass('collapsing'); + .addClass('collapsing') + .attr('aria-expanded', false) + .attr('aria-hidden', true); $animate.removeClass(element, 'in', { to: {height: '0'} diff --git a/src/collapse/test/collapse.spec.js b/src/collapse/test/collapse.spec.js index 8ed51fb6ec..6e9ca7c5cd 100644 --- a/src/collapse/test/collapse.spec.js +++ b/src/collapse/test/collapse.spec.js @@ -70,6 +70,26 @@ describe('collapse directive', function () { expect(element.height()).toBe(0); }); + it('should change aria-expanded attribute', function() { + scope.isCollapsed = false; + scope.$digest(); + expect(element.attr('aria-expanded')).toBe('true'); + + scope.isCollapsed = true; + scope.$digest(); + expect(element.attr('aria-expanded')).toBe('false'); + }); + + it('should change aria-hidden attribute', function() { + scope.isCollapsed = false; + scope.$digest(); + expect(element.attr('aria-hidden')).toBe('false'); + + scope.isCollapsed = true; + scope.$digest(); + expect(element.attr('aria-hidden')).toBe('true'); + }); + describe('dynamic content', function() { var element;