fix: ensure grid has tabbable elements after it becomes visible (#8102)…

… (#8105)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

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

@@ -998,6 +998,9 @@ export const GridMixin = (superClass) =>
         e.stopPropagation();
         this.__tryToRecalculateColumnWidthsIfPending();
 
+        // Ensure header and footer have tabbable elements
+        this._resetKeyboardNavigation();
+
         requestAnimationFrame(() => {
           this.__scrollToPendingIndexes();
         });

packages/grid/test/hidden-grid.common.js

@@ -1,18 +1,20 @@
 import { expect } from '@vaadin/chai-plugins';
-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';
 
 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', () => {