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 (
{ + 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;