From fdc6b86cdf5db91b58dc036e4dae2db4b0e80de2 Mon Sep 17 00:00:00 2001 From: Vaadin Bot Date: Tue, 15 Feb 2022 11:05:36 +0100 Subject: [PATCH] fix: do not set aria-expanded on grid cells (#3441) (#3443) Co-authored-by: Serhii Kulykov --- packages/grid/src/vaadin-grid-a11y-mixin.js | 17 ------------- .../grid/src/vaadin-grid-row-details-mixin.js | 1 - packages/grid/src/vaadin-grid.js | 1 - packages/grid/test/accessibility.test.js | 25 ------------------- packages/grid/test/row-details.test.js | 3 --- 5 files changed, 47 deletions(-) diff --git a/packages/grid/src/vaadin-grid-a11y-mixin.js b/packages/grid/src/vaadin-grid-a11y-mixin.js index 0843c38106..2080b18bcd 100644 --- 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 index 719b1d7d78..57b7e87b35 100644 --- 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 index e655725f32..003e7787f3 100644 --- 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 index 25d47ab7ad..b67f329e9e 100644 --- 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 index 68909fa537..60e0c5b459 100644 --- 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'); }); }); });