feat: 🎸 add 'aria-expanded' to expand buttons for accessibility

Author: Phil Salter

packages/expandable/src/templates/expandableRowHeader.html

@@ -3,7 +3,8 @@
     <i class="clickable"
        ng-if="!(row.groupHeader==true || row.entity.subGridOptions.disableRowExpandable)"
        ng-class="{ 'ui-grid-icon-plus-squared' : !row.isExpanded, 'ui-grid-icon-minus-squared' : row.isExpanded }"
-       ng-click="grid.api.expandable.toggleRowExpansion(row.entity, $event)">
+       ng-click="grid.api.expandable.toggleRowExpansion(row.entity, $event)"
+       aria-expanded="{{!!row.isExpanded}}">
     </i>
   </div>
 </div>

packages/expandable/src/templates/expandableTopRowHeader.html

@@ -4,7 +4,8 @@
     <button type="button" class="ui-grid-icon-button clickable"
       ng-if="grid.options.showExpandAllButton"
       ng-class="{ 'ui-grid-icon-plus-squared' : !grid.expandable.expandedAll, 'ui-grid-icon-minus-squared' : grid.expandable.expandedAll }"
-      ng-click="grid.api.expandable.toggleAllRows()">
+      ng-click="grid.api.expandable.toggleAllRows()"
+      aria-expanded="{{grid.expandable.expandedAll}}">
     </button>
   </div>
 </div>

packages/expandable/test/expandable.spec.js

@@ -89,6 +89,36 @@ describe('ui.grid.expandable', function() {
         expect(element.find('.test').length).toBe(1);
       });
     });
+
+    it('expand row icon should set the accessibility property aria-expanded', function() {
+      scope.gridOptions.data.push({ col1: 'row2col1', col2: 'row2col2' });
+      scope.$apply();
+
+      var expandAllButton = element.find('.ui-grid-icon-button');
+      var expandRowIcons = element.find('.ui-grid-viewport .ui-grid-expandable-buttons-cell .clickable');
+
+      expect(expandAllButton.attr('aria-expanded')).toBe('false');
+      expect(expandRowIcons.eq(0).attr('aria-expanded')).toBe('false');
+      expect(expandRowIcons.eq(1).attr('aria-expanded')).toBe('false');
+
+      scope.gridApi.expandable.toggleRowExpansion(scope.grid.rows[0].entity);
+      scope.$apply();
+      expect(expandAllButton.attr('aria-expanded')).toBe('false');
+      expect(expandRowIcons.eq(0).attr('aria-expanded')).toBe('true');
+      expect(expandRowIcons.eq(1).attr('aria-expanded')).toBe('false');
+
+      scope.gridApi.expandable.toggleRowExpansion(scope.grid.rows[1].entity);
+      scope.$apply();
+      expect(expandAllButton.attr('aria-expanded')).toBe('true');
+      expect(expandRowIcons.eq(0).attr('aria-expanded')).toBe('true');
+      expect(expandRowIcons.eq(1).attr('aria-expanded')).toBe('true');
+
+      scope.gridApi.expandable.toggleAllRows();
+      scope.$apply();
+      expect(expandAllButton.attr('aria-expanded')).toBe('false');
+      expect(expandRowIcons.eq(0).attr('aria-expanded')).toBe('false');
+      expect(expandRowIcons.eq(1).attr('aria-expanded')).toBe('false');
+    });
   });
 
   describe('uiGridExpandableService', function() {