fix: only set aria-level on tree grid rows (#3450) (#3452)

Co-authored-by: Serhii Kulykov <[email protected]>
vaadin · Feb 16, 2022 · 5ec384f · 5ec384f
1 parent fdc6b86
commit 5ec384f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/packages/grid/src/vaadin-grid-a11y-mixin.js b/packages/grid/src/vaadin-grid-a11y-mixin.js
@@ -94,7 +94,12 @@ export const A11yMixin = (superClass) =>
      * @protected
      */
     _a11yUpdateRowLevel(row, level) {
-      row.setAttribute('aria-level', level + 1);
+      // Set level for the expandable rows itself, and all the nested rows.
+      if (level > 0 || this.__isRowCollapsible(row) || this.__isRowExpandable(row)) {
+        row.setAttribute('aria-level', level + 1);
+      } else {
+        row.removeAttribute('aria-level');
+      }
     }
 
     /**

diff --git a/packages/grid/test/accessibility.test.js b/packages/grid/test/accessibility.test.js
@@ -230,6 +230,25 @@ describe('accessibility', () => {
       grid.collapseItem({ name: '0' });
       expect(grid.$.items.children[1].getAttribute('aria-expanded')).to.be.null;
     });
+
+    it('should have aria-level on expandable rows', () => {
+      expect(grid.$.items.children[0].getAttribute('aria-level')).to.equal('1');
+    });
+
+    it('should not have aria-level on non expandable rows', () => {
+      expect(grid.$.items.children[1].getAttribute('aria-level')).to.be.null;
+    });
+
+    it('should add aria-level to a row that becomes expandable', () => {
+      grid.expandItem({ name: '0' });
+      expect(grid.$.items.children[1].getAttribute('aria-level')).to.equal('2');
+    });
+
+    it('should remove aria-expanded from a row that becomes non expandable', () => {
+      grid.expandItem({ name: '0' });
+      grid.collapseItem({ name: '0' });
+      expect(grid.$.items.children[1].getAttribute('aria-level')).to.be.null;
+    });
   });
 
   describe('details', () => {

diff --git a/packages/grid/test/data-provider.test.js b/packages/grid/test/data-provider.test.js
@@ -13,7 +13,6 @@ import {
   getFirstVisibleItem,
   getLastVisibleItem,
   getPhysicalAverage,
-  getRowCells,
   getRows,
   infiniteDataProvider,
   scrollToEnd
@@ -412,17 +411,6 @@ describe('data provider', () => {
         expect(getRows(grid.$.items)[0].hasAttribute('expanded')).to.be.false;
       });
 
-      it('should toggle aria-level attribute on the row', () => {
-        expect(getRowCells(getRows(grid.$.items)[2])[0].getAttribute('aria-level')).to.equal(null);
-        expect(getRows(grid.$.items)[2].getAttribute('aria-level')).to.equal('1');
-        expandIndex(grid, 0);
-        expect(getRowCells(getRows(grid.$.items)[2])[0].getAttribute('aria-level')).to.equal(null);
-        expect(getRows(grid.$.items)[2].getAttribute('aria-level')).to.equal('2');
-        expandIndex(grid, 1);
-        expect(getRowCells(getRows(grid.$.items)[2])[0].getAttribute('aria-level')).to.equal(null);
-        expect(getRows(grid.$.items)[2].getAttribute('aria-level')).to.equal('3');
-      });
-
       it('should request pages from 0', () => {
         expandIndex(grid, 7); // pageSize is 5, index 7 is on the second page
         expect(grid.dataProvider.getCall(2).args[0].page).to.equal(0);