From 5e8002a8e410e7052490b9a74b3f63eac2b1f30d Mon Sep 17 00:00:00 2001 From: Ricardo Faria Date: Wed, 8 Jul 2015 16:40:09 -0300 Subject: [PATCH 1/2] - Improved accessibility of collapse - Updated documentation with accessibility --- src/collapse/collapse.js | 5 +++++ src/collapse/test/collapse.spec.js | 20 ++++++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js index 8f24d29ba7..457dfaf2d2 100644 --- a/src/collapse/collapse.js +++ b/src/collapse/collapse.js @@ -6,6 +6,9 @@ angular.module('ui.bootstrap.collapse', []) link: function (scope, element, attrs) { function expand() { element.removeClass('collapse').addClass('collapsing'); + element.attr('aria-expanded', true); + element.attr('aria-hidden', false); + $animate.addClass(element, 'in', { to: { height: element[0].scrollHeight + 'px' } }).then(expandDone); @@ -26,6 +29,8 @@ angular.module('ui.bootstrap.collapse', []) // prevents the animation from jumping to collapsed state .removeClass('collapse') .addClass('collapsing'); + element.attr('aria-expanded', false); + element.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; From 0b9e7639395d100c5e360c56a76e3a9a427f7834 Mon Sep 17 00:00:00 2001 From: Ricardo Faria Date: Fri, 17 Jul 2015 16:08:22 -0300 Subject: [PATCH 2/2] Adjust to chain element call --- src/collapse/collapse.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js index 457dfaf2d2..7765dbba68 100644 --- a/src/collapse/collapse.js +++ b/src/collapse/collapse.js @@ -5,9 +5,10 @@ angular.module('ui.bootstrap.collapse', []) return { link: function (scope, element, attrs) { function expand() { - element.removeClass('collapse').addClass('collapsing'); - element.attr('aria-expanded', true); - element.attr('aria-hidden', false); + element.removeClass('collapse') + .addClass('collapsing') + .attr('aria-expanded', true) + .attr('aria-hidden', false); $animate.addClass(element, 'in', { to: { height: element[0].scrollHeight + 'px' } @@ -28,9 +29,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'); - element.attr('aria-expanded', false); - element.attr('aria-hidden', true); + .addClass('collapsing') + .attr('aria-expanded', false) + .attr('aria-hidden', true); $animate.removeClass(element, 'in', { to: {height: '0'}