feat(base): keyboard-navigate the row-number column for selection

apps/client/src/ee/base/components/grid/grid-container.tsx

@@ -125,7 +125,7 @@ export function GridContainer({
   const editingCellRef = useRef(editingCell);
   editingCellRef.current = editingCell;
 
-  const { selectionCount, clear: clearSelection } = useRowSelection(pageId);
+  const { selectionCount, clear: clearSelection, toggle: toggleRow } = useRowSelection(pageId);
   const { deleteSelected } = useDeleteSelectedRows(pageId);
 
   const { t } = useTranslation();
@@ -323,6 +323,17 @@ export function GridContainer({
     [editable, properties, setPendingTypeInsert, setEditingCell, openEditor],
   );
 
+  const toggleRowSelection = useCallback(
+    (rowId: string) => {
+      toggleRow(rowId, {
+        shiftKey: false,
+        rowIndex: rowIdsRef.current.indexOf(rowId),
+        orderedRowIds: rowIdsRef.current,
+      });
+    },
+    [toggleRow],
+  );
+
   const prevEditingRef = useRef(editingCell);
   useEffect(() => {
     const prev = prevEditingRef.current;
@@ -373,6 +384,7 @@ export function GridContainer({
     selectionCount,
     clearSelection,
     deleteSelected,
+    toggleRowSelection,
   });
 
   const activeCell = editingCell ?? focusedCell;

apps/client/src/ee/base/components/grid/grid-header-cell.tsx

@@ -57,10 +57,12 @@ export const GridHeaderCell = memo(function GridHeaderCell({
   const isRowNumber = header.column.id === "__row_number";
   const isPinned = header.column.getIsPinned();
   const pinOffset = isPinned ? header.column.getStart("left") : undefined;
-  const { selectionCount } = useRowSelection(pageId);
+  const { selectionCount, toggleAll } = useRowSelection(pageId);
   const hasSelection = selectionCount > 0;
   const editable = useBaseEditable();
   const isHeaderInteractive = editable && !!property && !isRowNumber;
+  const isRowNumberHeaderInteractive =
+    isRowNumber && editable && loadedRowIds.length > 0;
 
   const [activePropertyMenu, setActivePropertyMenu] = useAtom(activePropertyMenuAtomFamily(pageId)) as unknown as [string | null, (val: string | null) => void];
   const menuOpened = activePropertyMenu === header.column.id;
@@ -209,9 +211,10 @@ export const GridHeaderCell = memo(function GridHeaderCell({
   return (
     <div
       ref={cellRef}
-      role={isRowNumber ? undefined : "columnheader"}
-      tabIndex={isHeaderInteractive ? 0 : undefined}
+      role="columnheader"
+      tabIndex={isHeaderInteractive || isRowNumberHeaderInteractive ? 0 : undefined}
       aria-haspopup={isHeaderInteractive ? "menu" : undefined}
+      aria-label={isRowNumberHeaderInteractive ? t("Select all loaded rows") : undefined}
       className={`${classes.headerCell} ${isPinned ? classes.headerCellPinned : ""} ${hasSelection ? classes.hasSelection : ""}`}
       style={{
         ...(isPinned
@@ -227,7 +230,11 @@ export const GridHeaderCell = memo(function GridHeaderCell({
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
-          handleHeaderClick();
+          if (isRowNumber) {
+            if (isRowNumberHeaderInteractive) toggleAll(loadedRowIds);
+          } else {
+            handleHeaderClick();
+          }
         }
       }}
       data-dragging={isDragging || undefined}

apps/client/src/ee/base/components/grid/row-number-cell.tsx

@@ -1,7 +1,11 @@
-import { memo, useCallback } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { Checkbox } from "@mantine/core";
 import { IconGripVertical } from "@tabler/icons-react";
+import { useAtomValue, useSetAtom, type PrimitiveAtom } from "jotai";
+import { selectAtom } from "jotai/utils";
 import { useRowSelection } from "@/ee/base/hooks/use-row-selection";
+import { focusedCellAtomFamily } from "@/ee/base/atoms/base-atoms";
+import { FocusedCell } from "@/ee/base/types/base.types";
 import { useBaseEditable } from "@/ee/base/context/base-editable";
 import { useGridRowOrder } from "@/ee/base/context/grid-row-order";
 import classes from "@/ee/base/styles/grid.module.css";
@@ -26,6 +30,30 @@ export const RowNumberCell = memo(function RowNumberCell({
   const editable = useBaseEditable();
   const getOrderedRowIds = useGridRowOrder();
 
+  const setFocusedCell = useSetAtom(
+    focusedCellAtomFamily(pageId) as PrimitiveAtom<FocusedCell>,
+  );
+  const isFocused = useAtomValue(
+    useMemo(
+      () =>
+        selectAtom(
+          focusedCellAtomFamily(pageId),
+          (fc) => fc?.rowId === rowId && fc?.propertyId === "__row_number",
+        ),
+      [pageId, rowId],
+    ),
+  );
+
+  const handleCellClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      setFocusedCell({ rowId, propertyId: "__row_number" });
+      (e.currentTarget.closest('[role="grid"]') as HTMLElement | null)?.focus({
+        preventScroll: true,
+      });
+    },
+    [rowId, setFocusedCell],
+  );
+
   const handleCheckboxChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const nativeEvent = e.nativeEvent as MouseEvent;
@@ -40,12 +68,15 @@ export const RowNumberCell = memo(function RowNumberCell({
 
   return (
     <div
-      className={`${classes.cell} ${classes.rowNumberCell} ${isPinned ? classes.cellPinned : ""}`}
+      id={`base-cell-${rowId}-__row_number`}
+      role="gridcell"
+      className={`${classes.cell} ${classes.rowNumberCell} ${isPinned ? classes.cellPinned : ""} ${isFocused ? classes.cellFocused : ""}`}
       style={
         isPinned
           ? ({ "--pin-offset": `${pinOffset ?? 0}px` } as React.CSSProperties)
           : undefined
       }
+      onClick={handleCellClick}
     >
       <div className={classes.rowNumberCellInner}>
         {editable && (
@@ -60,6 +91,7 @@ export const RowNumberCell = memo(function RowNumberCell({
               checked={selected}
               onChange={handleCheckboxChange}
               aria-label="Select row"
+              tabIndex={-1}
             />
           </span>
         )}

apps/client/src/ee/base/components/grid/row-number-header-cell.tsx

@@ -42,6 +42,7 @@ export const RowNumberHeaderCell = memo(function RowNumberHeaderCell({
             indeterminate={indeterminate}
             onChange={() => toggleAll(loadedRowIds)}
             aria-label="Select all loaded rows"
+            tabIndex={-1}
           />
         </Tooltip>
       </span>