fix: reflect row aria-expanded state for toggle cells (#10156)

ugur-vaadin · vursen · web-flow · commit d70d60d34072 · 2025-09-16T15:00:28.000+03:00
* refactor: reflect row aria-expanded state for toggle cells

* refactor: get toggle cell once to avoid duplication

* refactor: extract logic for finding toggle cell into helper

* Update packages/grid/src/vaadin-grid-helpers.js

Co-authored-by: Sergey Vinogradov &lt;mr.vursen@gmail.com&gt;

---------

Co-authored-by: Sergey Vinogradov &lt;mr.vursen@gmail.com&gt;
diff --git a/packages/grid/src/vaadin-grid-a11y-mixin.js b/packages/grid/src/vaadin-grid-a11y-mixin.js
@@ -3,7 +3,7 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { iterateChildren, iterateRowCells } from './vaadin-grid-helpers.js';
+import { findTreeToggleCell, iterateChildren, iterateRowCells } from './vaadin-grid-helpers.js';
 
 /**
  * @polymerMixin
@@ -101,12 +101,22 @@ export const A11yMixin = (superClass) =>
      * @protected
      */
     _a11yUpdateRowExpanded(row) {
+      const toggleCell = findTreeToggleCell(row);
       if (this.__isRowExpandable(row)) {
         row.setAttribute('aria-expanded', 'false');
+        if (toggleCell) {
+          toggleCell.setAttribute('aria-expanded', 'false');
+        }
       } else if (this.__isRowCollapsible(row)) {
         row.setAttribute('aria-expanded', 'true');
+        if (toggleCell) {
+          toggleCell.setAttribute('aria-expanded', 'true');
+        }
       } else {
         row.removeAttribute('aria-expanded');
+        if (toggleCell) {
+          toggleCell.removeAttribute('aria-expanded');
+        }
       }
     }
 
diff --git a/packages/grid/src/vaadin-grid-helpers.js b/packages/grid/src/vaadin-grid-helpers.js
@@ -173,6 +173,15 @@ export function updateCellState(cell, attribute, value, part, oldPart) {
   updatePart(cell, value, part || `${attribute}-cell`);
 }
 
+/**
+ * Finds the cell containing the tree toggle element
+ * @param {!HTMLElement} row
+ * @return {HTMLElement | null}
+ */
+export function findTreeToggleCell(row) {
+  return getBodyRowCells(row).find((cell) => cell._content.querySelector('vaadin-grid-tree-toggle'));
+}
+
 /**
  * A helper for observing flattened child column list of an element.
  */
diff --git a/packages/grid/test/accessibility.test.js b/packages/grid/test/accessibility.test.js
@@ -1,4 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
+import { sendKeys } from '@vaadin/test-runner-commands';
 import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import './grid-test-styles.js';
 import '../all-imports.js';
@@ -219,6 +220,103 @@ describe('accessibility', () => {
       grid.collapseItem({ name: '0' });
       expect(grid.$.items.children[1].getAttribute('aria-level')).to.be.null;
     });
+
+    describe('toggle cell', () => {
+      function setupTreeGrid(additionalColumns = []) {
+        grid = fixtureSync(`
+        <vaadin-grid item-id-path="name">
+          ${additionalColumns.join('')}
+          <vaadin-grid-tree-column path="name" width="200px" header="Name" flex-shrink="0"></vaadin-grid-tree-column>
+          <vaadin-grid-column path="value" header="Value"></vaadin-grid-column>
+        </vaadin-grid>
+      `);
+        grid.dataProvider = ({ parentItem }, callback) => {
+          const itemsOnEachLevel = 5;
+          const items = [...Array(itemsOnEachLevel)].map((_, i) => {
+            return {
+              name: `${parentItem ? `${parentItem.name}-` : ''}${i}`,
+              value: `value-${i}`,
+              children: i % 2 === 0,
+              id: `${parentItem ? `${parentItem.id}-` : ''}${i}`,
+            };
+          });
+          callback(items, itemsOnEachLevel);
+        };
+        flushGrid(grid);
+        return grid;
+      }
+
+      function getToggleCell(row) {
+        for (const cell of row.querySelectorAll('td')) {
+          if (cell._content && cell._content.querySelector('vaadin-grid-tree-toggle')) {
+            return cell;
+          }
+        }
+        return null;
+      }
+
+      function getExpandableRows() {
+        return Array.from(grid.$.items.children).filter((row) => row.getAttribute('aria-expanded') !== null);
+      }
+
+      describe('aria-expanded', () => {
+        beforeEach(() => {
+          setupTreeGrid();
+        });
+
+        it('should reflect aria-expanded state of rows', () => {
+          Array.from(grid.$.items.children).forEach((row) => {
+            const toggleCell = getToggleCell(row);
+            expect(toggleCell).to.exist;
+            expect(toggleCell.getAttribute('aria-expanded')).to.equal(row.getAttribute('aria-expanded'));
+          });
+        });
+
+        it('should update cell aria-expanded when row expanded state changes', () => {
+          const row = getExpandableRows()[0];
+          const toggleCell = getToggleCell(row);
+          const itemName = row._item.name;
+
+          expect(row.getAttribute('aria-expanded')).to.equal('false');
+          expect(toggleCell.getAttribute('aria-expanded')).to.equal('false');
+
+          grid.expandItem({ name: itemName });
+          expect(row.getAttribute('aria-expanded')).to.equal('true');
+          expect(toggleCell.getAttribute('aria-expanded')).to.equal('true');
+
+          grid.collapseItem({ name: itemName });
+          expect(row.getAttribute('aria-expanded')).to.equal('false');
+          expect(toggleCell.getAttribute('aria-expanded')).to.equal('false');
+        });
+
+        it('should handle expansion via keyboard interaction', async () => {
+          const toggleCell = getToggleCell(getExpandableRows()[0]);
+          toggleCell.focus();
+          await sendKeys({ press: 'Space' });
+          expect(toggleCell.getAttribute('aria-expanded')).to.equal('true');
+          await sendKeys({ press: 'Space' });
+          expect(toggleCell.getAttribute('aria-expanded')).to.equal('false');
+        });
+      });
+
+      describe('with selection column', () => {
+        beforeEach(() => {
+          setupTreeGrid(['<vaadin-grid-selection-column></vaadin-grid-selection-column>']);
+        });
+
+        it('should update correct cell when selection column is present', () => {
+          const expandableRows = getExpandableRows();
+          expect(expandableRows.length).to.be.above(0);
+          expandableRows.forEach((row) => {
+            const toggleCell = getToggleCell(row);
+            expect(toggleCell).to.exist;
+            expect(toggleCell).to.not.equal(row.querySelector('td'));
+            expect(toggleCell._content.querySelector('vaadin-grid-tree-toggle')).to.exist;
+            expect(toggleCell.getAttribute('aria-expanded')).to.equal(row.getAttribute('aria-expanded'));
+          });
+        });
+      });
+    });
   });
 
   describe('details', () => {
