feat(base): make column headers keyboard-focusable as tab stops

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

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;