refactor: move header and footer slots outside scroller for better Tab navigation

- Move header and footer divs outside the #scroller element
- Add flex-direction: column to host and flex: 1 to scroller for proper layout
- Fix Tab navigation to naturally flow to footer slot content
- Update keyboard navigation to skip focusexit when tabbing forward
- Set navigating attribute even when Tab exits naturally
- Update tests to reflect new DOM structure and Tab behavior

This change improves accessibility by ensuring Tab navigation flows
naturally from header content → grid cells → footer content → next element

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: Artur-

packages/grid/src/styles/vaadin-grid-base-styles.js

@@ -15,6 +15,7 @@ export const gridStyles = css`
 
   :host {
     display: flex;
+    flex-direction: column;
     animation: 1ms vaadin-grid-appear;
     max-width: 100%;
     height: 400px;
@@ -67,6 +68,7 @@ export const gridStyles = css`
     width: 100%;
     min-width: 0;
     min-height: 0;
+    flex: 1 1 auto;
     align-self: stretch;
     overflow: hidden;
   }

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

@@ -715,6 +715,13 @@ export const KeyboardNavigationMixin = (superClass) =>
         return;
       }
 
+      // When Tab (forward) would go to focusexit, let the natural Tab order work instead
+      // This allows tabbing to footer slot content that's outside the scroller
+      if (focusTarget === this.$.focusexit && !e.shiftKey) {
+        this.toggleAttribute('navigating', true);
+        return;
+      }
+
       // Prevent focus-trap logic from intercepting the event.
       e.stopPropagation();
 

packages/grid/src/vaadin-grid.js

@@ -281,6 +281,10 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
   /** @protected */
   render() {
     return html`
+      <div part="header" id="gridHeader">
+        <slot name="header"></slot>
+      </div>
+
       <div
         id="scroller"
         ?safari="${this._safari}"
@@ -289,10 +293,6 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
         ?column-reordering-allowed="${this.columnReorderingAllowed}"
         ?empty-state="${this.__emptyState}"
       >
-        <div part="header" id="gridHeader">
-          <slot name="header"></slot>
-        </div>
-
         <table
           id="table"
           role="treegrid"
@@ -313,16 +313,16 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
           <tfoot id="footer" role="rowgroup"></tfoot>
         </table>
 
-        <div id="focusexit" tabindex="0"></div>
-
-        <div part="footer" id="gridFooter">
-          <slot name="footer"></slot>
-        </div>
-
         <div part="reorder-ghost"></div>
       </div>
 
+      <div part="footer" id="gridFooter">
+        <slot name="footer"></slot>
+      </div>
+
       <slot name="tooltip"></slot>
+
+      <div id="focusexit" tabindex="0"></div>
     `;
   }
 }

packages/grid/test/accessibility-slots.test.js

@@ -50,18 +50,24 @@ describe('accessibility - header and footer slots', () => {
 
     it('should position header before the table', () => {
       const header = grid.shadowRoot.querySelector('[part="header"]');
-      const table = grid.shadowRoot.querySelector('#table');
-      const headerIndex = Array.from(header.parentElement.children).indexOf(header);
-      const tableIndex = Array.from(table.parentElement.children).indexOf(table);
-      expect(headerIndex).to.be.below(tableIndex);
+      const scroller = grid.shadowRoot.querySelector('#scroller');
+      const shadowChildren = Array.from(grid.shadowRoot.children).filter(
+        (child) => child.localName !== 'style' && child.localName !== 'slot',
+      );
+      const headerIndex = shadowChildren.indexOf(header);
+      const scrollerIndex = shadowChildren.indexOf(scroller);
+      expect(headerIndex).to.be.below(scrollerIndex);
     });
 
     it('should position footer after the table', () => {
       const footer = grid.shadowRoot.querySelector('[part="footer"]');
-      const table = grid.shadowRoot.querySelector('#table');
-      const footerIndex = Array.from(footer.parentElement.children).indexOf(footer);
-      const tableIndex = Array.from(table.parentElement.children).indexOf(table);
-      expect(footerIndex).to.be.above(tableIndex);
+      const scroller = grid.shadowRoot.querySelector('#scroller');
+      const shadowChildren = Array.from(grid.shadowRoot.children).filter(
+        (child) => child.localName !== 'style' && child.localName !== 'slot',
+      );
+      const footerIndex = shadowChildren.indexOf(footer);
+      const scrollerIndex = shadowChildren.indexOf(scroller);
+      expect(footerIndex).to.be.above(scrollerIndex);
     });
   });
 

packages/grid/test/keyboard-navigation-row-focus.test.js

@@ -199,16 +199,12 @@ describe('keyboard navigation - row focus', () => {
       const tabbableElements = getTabbableElements(grid.shadowRoot);
       tabbableElements[3].focus(); // Focus footer row
 
-      let keydownEvent;
-      listenOnce(grid.shadowRoot.activeElement, 'keydown', (e) => {
-        keydownEvent = e;
-      });
       tab();
 
-      // Expect programmatic focus on focus exit element
-      expect(grid.shadowRoot.activeElement).to.equal(grid.$.focusexit);
-      // Ensure native focus jump is allowed
-      expect(keydownEvent.defaultPrevented).to.be.false;
+      // With header and footer slots outside scroller, Tab exits naturally
+      // without focusing focusexit when tabbing forward
+      // The last focused element should remain the footer row
+      expect(grid.shadowRoot.activeElement).to.equal(tabbableElements[3]);
     });
 
     it('should be possible to exit grid with shift+tab', () => {

packages/grid/test/keyboard-navigation.test.js

@@ -383,12 +383,13 @@ describe('keyboard navigation', () => {
       expect(tabIndexes).to.eql([0, 0, 0, 0, 0]);
     });
 
-    it('should have a focus exit element with tabindex', () => {
+    it('should have a focus exit as the very last child', () => {
       expect(grid.$.focusexit).to.be.ok;
       expect(grid.$.focusexit.tabIndex).to.equal(0);
-      // Focus exit is positioned between the table and footer slot for proper tab navigation
-      const focusExitParent = grid.$.focusexit.parentElement;
-      expect(focusExitParent).to.equal(grid.$.scroller);
+      const lastChild = Array.from(grid.shadowRoot.children)
+        .filter((child) => child.localName !== 'style')
+        .pop();
+      expect(lastChild).to.equal(grid.$.focusexit);
     });
 
     it('should be possible to tab through the grid', () => {
@@ -495,9 +496,10 @@ describe('keyboard navigation', () => {
       });
       tab();
 
-      // Expect programmatic focus on focus exit element
-      expect(grid.shadowRoot.activeElement).to.equal(grid.$.focusexit);
-      // Ensure native focus jump is allowed
+      // With header and footer slots outside scroller, Tab exits naturally
+      // without focusing focusexit when tabbing forward
+      // The keydown event fires but default is not prevented
+      expect(keydownEvent).to.exist;
       expect(keydownEvent.defaultPrevented).to.be.false;
     });
 
@@ -2004,8 +2006,9 @@ describe('empty grid', () => {
     tabToHeader();
     tab();
 
-    // Expect programmatic focus on focus exit element
-    expect(grid.shadowRoot.activeElement).to.equal(grid.$.focusexit);
+    // With header and footer slots, Tab exits naturally without focusing focusexit
+    // The focus should move out of the grid
+    expect(document.activeElement).to.equal(grid);
   });
 
   it('should not throw on Shift + Tab when grid has tabindex', () => {