fix: do not set aria-expanded on grid cells (#3441) (#3443)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Feb 15, 2022 · fdc6b86 · fdc6b86
1 parent d214578
commit fdc6b86
Show file tree

Hide file tree

Showing 5 changed files with 0 additions and 47 deletions.
diff --git a/packages/grid/src/vaadin-grid-a11y-mixin.js b/packages/grid/src/vaadin-grid-a11y-mixin.js
@@ -97,23 +97,6 @@ export const A11yMixin = (superClass) =>
       row.setAttribute('aria-level', level + 1);
     }
 
-    /**
-     * @param {!HTMLElement} row
-     * @param {boolean} detailsOpened
-     * @protected
-     */
-    _a11yUpdateRowDetailsOpened(row, detailsOpened) {
-      const detailsCell = row.querySelector('[part~=details-cell]');
-
-      Array.from(row.children).forEach((cell) => {
-        if (detailsCell) {
-          cell.setAttribute('aria-expanded', detailsOpened);
-        } else {
-          cell.removeAttribute('aria-expanded');
-        }
-      });
-    }
-
     /**
      * @param {!HTMLElement} row
      * @param {!HTMLElement} detailsCell

diff --git a/packages/grid/src/vaadin-grid-row-details-mixin.js b/packages/grid/src/vaadin-grid-row-details-mixin.js
@@ -84,7 +84,6 @@ export const RowDetailsMixin = (superClass) =>
           if (!row.querySelector('[part~=details-cell]')) {
             this._updateRow(row, this._columnTree[this._columnTree.length - 1]);
             const isDetailsOpened = this._isDetailsOpened(row._item);
-            this._a11yUpdateRowDetailsOpened(row, isDetailsOpened);
             this._toggleDetailsCell(row, isDetailsOpened);
           }
         });

diff --git a/packages/grid/src/vaadin-grid.js b/packages/grid/src/vaadin-grid.js
@@ -908,7 +908,6 @@ class Grid extends ElementMixin(
 
     this._a11yUpdateRowLevel(row, model.level);
     this._a11yUpdateRowSelected(row, model.selected);
-    this._a11yUpdateRowDetailsOpened(row, model.detailsOpened);
 
     row.toggleAttribute('expanded', model.expanded);
     row.toggleAttribute('selected', model.selected);

diff --git a/packages/grid/test/accessibility.test.js b/packages/grid/test/accessibility.test.js
@@ -173,10 +173,6 @@ describe('accessibility', () => {
     });
 
     describe('row details not in use', () => {
-      it('should not have aria-expanded on body cells', () => {
-        expect(uniqueAttrValues(grid.$.items.querySelectorAll('td'), 'aria-expanded')).to.eql([null]);
-      });
-
       it('should not have aria-controls on body cells', () => {
         expect(uniqueAttrValues(grid.$.items.querySelectorAll('td'), 'aria-controls')).to.eql([null]);
       });
@@ -259,10 +255,6 @@ describe('accessibility', () => {
     });
 
     describe('row details in use', () => {
-      it('should have aria-expanded false on body cells', () => {
-        expect(uniqueAttrValues(grid.$.items.querySelectorAll('td'), 'aria-expanded')).to.eql(['false']);
-      });
-
       it('should have aria-controls referencing detail cell id on body cells', () => {
         Array.from(grid.$.items.children).forEach((row) => {
           const detailsCell = row.querySelector('td[part~="details-cell"]');
@@ -274,23 +266,6 @@ describe('accessibility', () => {
           ]);
         });
       });
-
-      it('should set aria-expanded true on cells after row details opened', () => {
-        grid.openItemDetails(grid.items[0]);
-
-        expect(uniqueAttrValues(grid.$.items.children[0].children, 'aria-expanded')).to.eql(['true']);
-
-        expect(uniqueAttrValues(grid.$.items.children[1].children, 'aria-expanded')).to.eql(['false']);
-      });
-
-      it('should set aria-expanded false on cells after row details closed', () => {
-        grid.openItemDetails(grid.items[0]);
-        grid.closeItemDetails(grid.items[0]);
-
-        expect(uniqueAttrValues(grid.$.items.children[0].children, 'aria-expanded')).to.eql(['false']);
-
-        expect(uniqueAttrValues(grid.$.items.children[1].children, 'aria-expanded')).to.eql(['false']);
-      });
     });
   });
 

diff --git a/packages/grid/test/row-details.test.js b/packages/grid/test/row-details.test.js
@@ -403,7 +403,6 @@ describe('row details', () => {
       await nextFrame();
       const detailsCell = bodyRows[0].querySelector('[part~="details-cell"]');
       expect(detailsCell.hidden).to.be.true;
-      expect(detailsCell.getAttribute('aria-expanded')).to.equal('false');
     });
 
     it('should have the details cell initially visible', async () => {
@@ -412,7 +411,6 @@ describe('row details', () => {
       await nextFrame();
       const detailsCell = bodyRows[0].querySelector('[part~="details-cell"]');
       expect(detailsCell.hidden).to.be.false;
-      expect(detailsCell.getAttribute('aria-expanded')).to.equal('true');
     });
 
     it('should have the details cell become visible when details opened', async () => {
@@ -422,7 +420,6 @@ describe('row details', () => {
       await nextFrame();
       const detailsCell = bodyRows[0].querySelector('[part~="details-cell"]');
       expect(detailsCell.hidden).to.be.false;
-      expect(detailsCell.getAttribute('aria-expanded')).to.equal('true');
     });
   });
 });