Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(collapse): add accessibility support
Browse files Browse the repository at this point in the history
- Add addition of appropriate `aria-` attributes for representation of states for the collapse component

Closes #3920
  • Loading branch information
Ricardo Faria authored and wesleycho committed Jul 17, 2015
1 parent ede9ea4 commit 9255134
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 2 deletions.
10 changes: 8 additions & 2 deletions src/collapse/collapse.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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'}
Expand Down
20 changes: 20 additions & 0 deletions src/collapse/test/collapse.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 9255134

Please sign in to comment.