From 308079af8b5403f6b9ed2a14c6d530516fda04a2 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 15 Jun 2026 03:13:27 +0100
Subject: [PATCH] feat(base): make column headers keyboard-focusable as tab
 stops

---
 .../src/ee/base/components/grid/grid-header-cell.tsx  | 11 +++++++++++
 apps/client/src/ee/base/styles/grid.module.css        |  6 ++++++
 2 files changed, 17 insertions(+)

diff --git a/apps/client/src/ee/base/components/grid/grid-header-cell.tsx b/apps/client/src/ee/base/components/grid/grid-header-cell.tsx
index 680c3a2d9..77773e97c 100644
--- a/apps/client/src/ee/base/components/grid/grid-header-cell.tsx
+++ b/apps/client/src/ee/base/components/grid/grid-header-cell.tsx
@@ -60,6 +60,7 @@ export const GridHeaderCell = memo(function GridHeaderCell({
   const { selectionCount } = useRowSelection(pageId);
   const hasSelection = selectionCount > 0;
   const editable = useBaseEditable();
+  const isHeaderInteractive = editable && !!property && !isRowNumber;
 
   const [activePropertyMenu, setActivePropertyMenu] = useAtom(activePropertyMenuAtomFamily(pageId)) as unknown as [string | null, (val: string | null) => void];
   const menuOpened = activePropertyMenu === header.column.id;
@@ -208,6 +209,9 @@ export const GridHeaderCell = memo(function GridHeaderCell({
   return (
     <div
       ref={cellRef}
+      role={isRowNumber ? undefined : "columnheader"}
+      tabIndex={isHeaderInteractive ? 0 : undefined}
+      aria-haspopup={isHeaderInteractive ? "menu" : undefined}
       className={`${classes.headerCell} ${isPinned ? classes.headerCellPinned : ""} ${hasSelection ? classes.hasSelection : ""}`}
       style={{
         ...(isPinned
@@ -220,6 +224,12 @@ export const GridHeaderCell = memo(function GridHeaderCell({
         resizeIntentRef.current = false;
       }}
       onClick={handleHeaderClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleHeaderClick();
+        }
+      }}
       data-dragging={isDragging || undefined}
     >
       {isRowNumber ? (
@@ -269,6 +279,7 @@ export const GridHeaderCell = memo(function GridHeaderCell({
           shadow="md"
           width={260}
           trapFocus
+          returnFocus
           withinPortal
           closeOnClickOutside
           closeOnEscape
diff --git a/apps/client/src/ee/base/styles/grid.module.css b/apps/client/src/ee/base/styles/grid.module.css
index 3a1fd942e..384365810 100644
--- a/apps/client/src/ee/base/styles/grid.module.css
+++ b/apps/client/src/ee/base/styles/grid.module.css
@@ -242,6 +242,12 @@
   z-index: 1;
 }
 
+.headerCell:focus-visible {
+  outline: 2px solid var(--mantine-color-blue-5);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
 .cellContent {
   flex: 1;
   min-width: 0;