From e706b38d2b3a67763e1b21ef7d2bb30f1b70839c Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Thu, 7 Nov 2024 16:31:17 +0200
Subject: [PATCH] fix: ensure grid has tabbable elements after it becomes
 visible (#8102) (#8106)

---
 packages/grid/src/vaadin-grid-mixin.js   |  3 +++
 packages/grid/test/hidden-grid.common.js | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js
index 8bde43fb6a..e7ec87de5d 100644
--- a/packages/grid/src/vaadin-grid-mixin.js
+++ b/packages/grid/src/vaadin-grid-mixin.js
@@ -974,6 +974,9 @@ export const GridMixin = (superClass) =>
         e.stopPropagation();
         this.__tryToRecalculateColumnWidthsIfPending();
 
+        // Ensure header and footer have tabbable elements
+        this._resetKeyboardNavigation();
+
         requestAnimationFrame(() => {
           this.__scrollToPendingIndexes();
         });
diff --git a/packages/grid/test/hidden-grid.common.js b/packages/grid/test/hidden-grid.common.js
index bee76968c9..bb8fdc4479 100644
--- a/packages/grid/test/hidden-grid.common.js
+++ b/packages/grid/test/hidden-grid.common.js
@@ -1,5 +1,6 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextRender, oneEvent } from '@vaadin/testing-helpers';
+import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import { fire, flushGrid, getBodyCellContent, infiniteDataProvider } from './helpers.js';
 
@@ -7,12 +8,13 @@ describe('hidden grid', () => {
   let grid;
 
   describe('initially hidden', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       grid = fixtureSync(`
       <vaadin-grid style="height: 200px; width: 200px;" hidden size="1">
         <vaadin-grid-column header="foo"></vaadin-grid-column>
       </vaadin-grid>
     `);
+      await nextRender();
       grid.querySelector('vaadin-grid-column').renderer = (root, _, model) => {
         root.textContent = model.index;
       };
@@ -31,6 +33,15 @@ describe('hidden grid', () => {
       await nextFrame();
       expect(getBodyCellContent(grid, 0, 0).textContent).to.equal('0');
     });
+
+    it('should make it possible to Tab to header', async () => {
+      grid.removeAttribute('hidden');
+      await oneEvent(grid, 'animationend');
+      await nextFrame();
+
+      await sendKeys({ press: 'Tab' });
+      expect(grid.shadowRoot.activeElement).to.equal(grid.$.header.querySelector('[part~="cell"]'));
+    });
   });
 
   describe('hiding the grid', () => {