fix: adjust aria-rowcount and aria-colcount based on grid state (#9872)

Author: DiegoCardoso

packages/grid/src/vaadin-grid-a11y-mixin.js

@@ -22,7 +22,7 @@ export const A11yMixin = (superClass) =>
       };
     }
     static get observers() {
-      return ['_a11yUpdateGridSize(size, _columnTree)'];
+      return ['_a11yUpdateGridSize(size, _columnTree, __emptyState)'];
     }
 
     /** @private */
@@ -34,21 +34,27 @@ export const A11yMixin = (superClass) =>
 
     /** @private */
     _a11yGetFooterRowCount(_columnTree) {
-      return _columnTree.filter((level) => level.some((col) => col.headerRenderer)).length;
+      return _columnTree.filter((level) => level.some((col) => col.footerRenderer)).length;
     }
 
     /** @private */
-    _a11yUpdateGridSize(size, _columnTree) {
+    _a11yUpdateGridSize(size, _columnTree, emptyState) {
       if (size === undefined || _columnTree === undefined) {
         return;
       }
 
+      const headerRowsCount = this._a11yGetHeaderRowCount(_columnTree);
+      const footerRowsCount = this._a11yGetFooterRowCount(_columnTree);
+      const bodyRowsCount = emptyState ? 1 : size;
+      const rowsCount = bodyRowsCount + headerRowsCount + footerRowsCount;
+
+      this.$.table.setAttribute('aria-rowcount', rowsCount);
+
       const bodyColumns = _columnTree[_columnTree.length - 1];
-      this.$.table.setAttribute(
-        'aria-rowcount',
-        size + this._a11yGetHeaderRowCount(_columnTree) + this._a11yGetFooterRowCount(_columnTree),
-      );
-      this.$.table.setAttribute('aria-colcount', (bodyColumns && bodyColumns.length) || 0);
+      // If no header and footer rows while the empty state is active, count as one column
+      // Otherwise, use the number of body columns, if present
+      const columnsCount = emptyState ? 1 : (rowsCount && bodyColumns && bodyColumns.length) || 0;
+      this.$.table.setAttribute('aria-colcount', columnsCount);
 
       this._a11yUpdateHeaderRows();
       this._a11yUpdateFooterRows();

packages/grid/src/vaadin-grid-mixin.js

@@ -630,6 +630,7 @@ export const GridMixin = (superClass) =>
 
       // Make sure the section has a tabbable element
       this._resetKeyboardNavigation();
+      this._a11yUpdateGridSize(this.size, this._columnTree, this.__emptyState);
     }
 
     /** @private */

packages/grid/test/accessibility.test.js

@@ -240,6 +240,19 @@ describe('accessibility', () => {
         await nextFrame();
         expect(grid.$.table.getAttribute('aria-colcount')).to.equal('4');
       });
+
+      it('should update aria-colcount when grid is empty with empty-state and no header/footer rendered', async () => {
+        const emptyStateText = document.createElement('span');
+        emptyStateText.setAttribute('slot', 'empty-state');
+        grid.appendChild(emptyStateText);
+        grid.querySelectorAll('vaadin-grid-column').forEach((col) => {
+          col.headerRenderer = null;
+          col.footerRenderer = null;
+        });
+        grid.items = [];
+        await nextFrame();
+        expect(grid.$.table.getAttribute('aria-colcount')).to.equal('1');
+      });
     });
 
     describe('row details in use', () => {
@@ -314,6 +327,26 @@ describe('accessibility', () => {
       // 10 item rows + header row + footer row = 12 in total
       expect(grid.$.table.getAttribute('aria-rowcount')).to.equal('12');
     });
+
+    it('should count the footer rows correctly as part of the aria-rowcount', async () => {
+      // Remove the header renderers
+      grid.querySelectorAll('vaadin-grid-column').forEach((col) => {
+        col.headerRenderer = null;
+      });
+
+      await nextFrame();
+      expect(grid.$.table.getAttribute('aria-rowcount')).to.equal('3');
+    });
+
+    it('should count the header rows correctly as part of the aria-rowcount', async () => {
+      // Remove the footer renderers
+      grid.querySelectorAll('vaadin-grid-column').forEach((col) => {
+        col.footerRenderer = null;
+      });
+
+      await nextFrame();
+      expect(grid.$.table.getAttribute('aria-rowcount')).to.equal('3');
+    });
   });
 
   describe('group', () => {