Improved accessibility of collapse

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);
@@ -25,7 +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');
+            .addClass('collapsing')
+            .attr('aria-expanded', false)
+            .attr('aria-hidden', true);
 
           $animate.removeClass(element, 'in', {
             to: {height: '0'}

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;