From f946b4f165dc05e55f6ed66a0f6722dcfe22a7af Mon Sep 17 00:00:00 2001
From: Andrey Morozov <mauk.lekph@gmail.com>
Date: Tue, 13 Oct 2026 19:48:54 +0200
Subject: [PATCH] f-1579 improve keyboard accessibility in Grader

---
 .../routes/Grader/Grader.module.css           |  4 ++
 .../Grader/components/ShortcutsHelpDialog.tsx |  4 +-
 .../components/StudentListSidebar.module.css  |  4 ++
 .../components/StudentListSidebar.spec.tsx    | 42 ++++++++++++
 .../Grader/components/StudentListSidebar.tsx  | 46 +++++++++++--
 .../Grader/components/ViewModeToggle.spec.tsx | 18 +++++
 .../Grader/hooks/useGraderHotkeys.spec.ts     | 34 +++++++++-
 .../routes/Grader/hooks/useGraderHotkeys.ts   | 36 +++++++---
 .../GraderQuestionsPage.tsx                   | 15 ++---
 .../src/components/shell/AppNavBar.spec.tsx   | 30 +++++++++
 .../src/components/ui/DataGrid.module.css     | 33 +++++++++
 .../src/components/ui/DataGrid.spec.tsx       | 67 ++++++++++++++++++-
 .../src/components/ui/DataGrid.tsx            | 48 +++++++++++++
 13 files changed, 351 insertions(+), 30 deletions(-)
 create mode 100644 bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ViewModeToggle.spec.tsx

diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/Grader.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/Grader.module.css
index cc0ba494a..b886eb751 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/Grader.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/Grader.module.css
@@ -163,6 +163,10 @@
   border-color: var(--rs-border-brand);
   box-shadow: var(--rs-shadow-sm);
 }
+.card:focus-visible {
+  outline: 3px solid var(--rs-brand-500);
+  outline-offset: 2px;
+}
 .card:hover::before {
   opacity: 1;
 }
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ShortcutsHelpDialog.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ShortcutsHelpDialog.tsx
index 89f1af467..87c19f7f6 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ShortcutsHelpDialog.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ShortcutsHelpDialog.tsx
@@ -87,8 +87,8 @@ export const ShortcutsHelpDialog: React.FC<Props> = ({ visible, onHide }) => {
           </div>
         ))}
         <div className={styles.dialogFootnote}>
-          Letter shortcuts are ignored while a text field has focus. Finish typing, then click
-          outside the field to use them.
+          Grader shortcuts are ignored while a form control, menu, link, or list option has focus.
+          Move focus back to the page to use them.
           <br />
           Tip: enable <strong>Auto-advance after save</strong> in the grade panel to jump to the
           next ungraded student automatically. You can always undo from the toast that appears.
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.module.css
index 7d4d57e89..1b58986ed 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.module.css
@@ -115,6 +115,10 @@
 .item:hover {
   background: var(--rs-surface-sunken);
 }
+.item:focus-visible {
+  outline: 3px solid var(--rs-brand-500);
+  outline-offset: 2px;
+}
 .item.active {
   background: var(--rs-brand-50);
   box-shadow: inset 3px 0 0 var(--rs-brand-500);
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.spec.tsx
index 61821df84..45d1234b7 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.spec.tsx
@@ -90,6 +90,48 @@ describe("StudentListSidebar", () => {
     expect(onSelect).toHaveBeenCalledWith("s2");
   });
 
+  it("keeps only the active option in the Tab order", () => {
+    renderSidebar({ activeSid: "s2" });
+    const options = screen.getAllByRole("option");
+
+    expect(options[0]).toHaveAttribute("tabindex", "-1");
+    expect(options[1]).toHaveAttribute("tabindex", "0");
+    expect(options[2]).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("uses the first visible option as the Tab stop when the active student is filtered out", () => {
+    renderSidebar({ activeSid: "missing" });
+    const options = screen.getAllByRole("option");
+
+    expect(options[0]).toHaveAttribute("tabindex", "0");
+    expect(options[1]).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("moves and selects with ArrowDown", async () => {
+    const { onSelect } = renderSidebar({ activeSid: "s1" });
+    const options = screen.getAllByRole("option");
+
+    options[0].focus();
+    await userEvent.keyboard("{ArrowDown}");
+
+    expect(options[1]).toHaveFocus();
+    expect(onSelect).toHaveBeenCalledWith("s2");
+  });
+
+  it("supports Home and End navigation", async () => {
+    const { onSelect } = renderSidebar({ activeSid: "s2" });
+    const options = screen.getAllByRole("option");
+
+    options[1].focus();
+    await userEvent.keyboard("{End}");
+    expect(options[2]).toHaveFocus();
+    expect(onSelect).toHaveBeenLastCalledWith("s3");
+
+    await userEvent.keyboard("{Home}");
+    expect(options[0]).toHaveFocus();
+    expect(onSelect).toHaveBeenLastCalledWith("s1");
+  });
+
   it("reports changes to both student filters", async () => {
     const { onToggleHideFullCredit, onToggleHideUnanswered } = renderSidebar();
 
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.tsx
index 5168f315f..7c7e4d142 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/StudentListSidebar.tsx
@@ -68,6 +68,42 @@ export const StudentListSidebar: React.FC<Props> = ({
   }, [answers, filter, hideFullCredit, hideUnanswered]);
 
   const listRef = useRef<HTMLUListElement | null>(null);
+  const focusableSid = filtered.some((answer) => answer.sid === activeSid)
+    ? activeSid
+    : filtered[0]?.sid;
+
+  const handleOptionKeyDown = (event: React.KeyboardEvent<HTMLLIElement>, sid: string) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onSelect(sid);
+      return;
+    }
+
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+
+    const options = Array.from(
+      listRef.current?.querySelectorAll<HTMLElement>("[role='option']") ?? []
+    );
+    const currentIndex = options.indexOf(event.currentTarget);
+
+    if (currentIndex < 0 || options.length === 0) return;
+
+    event.preventDefault();
+
+    const nextIndex =
+      event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? options.length - 1
+          : event.key === "ArrowDown"
+            ? Math.min(currentIndex + 1, options.length - 1)
+            : Math.max(currentIndex - 1, 0);
+    const nextOption = options[nextIndex];
+    const nextSid = nextOption.dataset.sid;
+
+    nextOption.focus();
+    if (nextSid && nextSid !== sid) onSelect(nextSid);
+  };
 
   return (
     <aside className={styles.sidebar} data-tour="grader-student-sidebar" aria-label="Students">
@@ -158,17 +194,13 @@ export const StudentListSidebar: React.FC<Props> = ({
               key={a.sid}
               role="option"
               aria-selected={active}
+              data-sid={a.sid}
               data-tour={active ? "grader-active-student" : undefined}
               title={lateTitle}
               className={`${styles.item} ${active ? styles.active : ""} ${late ? styles.late : ""}`}
               onClick={() => onSelect(a.sid)}
-              tabIndex={0}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  onSelect(a.sid);
-                }
-              }}
+              tabIndex={a.sid === focusableSid ? 0 : -1}
+              onKeyDown={(event) => handleOptionKeyDown(event, a.sid)}
             >
               <StatusDot status={status} />
               <div className={styles.itemBody}>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ViewModeToggle.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ViewModeToggle.spec.tsx
new file mode 100644
index 000000000..83391af34
--- /dev/null
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/components/ViewModeToggle.spec.tsx
@@ -0,0 +1,18 @@
+import userEvent from "@testing-library/user-event";
+
+import { renderWithMantine, screen } from "@/test/renderWithMantine";
+
+import { ViewModeToggle } from "./ViewModeToggle";
+
+describe("ViewModeToggle", () => {
+  it("moves between view options with arrow keys", async () => {
+    const onChange = vi.fn();
+
+    renderWithMantine(<ViewModeToggle value="cards" onChange={onChange} />);
+
+    screen.getByRole("radio", { name: /cards/i }).focus();
+    await userEvent.keyboard("{ArrowRight}");
+
+    expect(onChange).toHaveBeenCalledWith("table");
+  });
+});
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/hooks/useGraderHotkeys.spec.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/hooks/useGraderHotkeys.spec.ts
index 786733829..7cacf2c3c 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/hooks/useGraderHotkeys.spec.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/hooks/useGraderHotkeys.spec.ts
@@ -27,6 +27,14 @@ const makeInput = (tag: "INPUT" | "TEXTAREA" | "SELECT"): HTMLElement => {
   return el;
 };
 
+const makeInteractive = (tag: "BUTTON" | "DIV", role?: string): HTMLElement => {
+  const el = document.createElement(tag);
+
+  if (role) el.setAttribute("role", role);
+  document.body.appendChild(el);
+  return el;
+};
+
 describe("useGraderHotkeys", () => {
   beforeEach(() => {
     mockDetectPlatform.mockReturnValue("other");
@@ -160,7 +168,7 @@ describe("useGraderHotkeys", () => {
     });
   });
 
-  describe("input target — keys are suppressed", () => {
+  describe("interactive target — keys are suppressed", () => {
     it("does not call next when target is INPUT", () => {
       const handlers: GraderHotkeyHandlers = { next: vi.fn() };
 
@@ -200,6 +208,30 @@ describe("useGraderHotkeys", () => {
 
       expect(handlers.openHelp).not.toHaveBeenCalled();
     });
+
+    it("does not intercept ArrowDown from a menu button", () => {
+      const handlers: GraderHotkeyHandlers = { next: vi.fn() };
+      const button = makeInteractive("BUTTON");
+
+      renderHook(() => useGraderHotkeys(handlers));
+
+      fireKeyDown("ArrowDown", {}, button);
+
+      expect(handlers.next).not.toHaveBeenCalled();
+      button.remove();
+    });
+
+    it("does not intercept arrows from a listbox option", () => {
+      const handlers: GraderHotkeyHandlers = { prev: vi.fn() };
+      const option = makeInteractive("DIV", "option");
+
+      renderHook(() => useGraderHotkeys(handlers));
+
+      fireKeyDown("ArrowUp", {}, option);
+
+      expect(handlers.prev).not.toHaveBeenCalled();
+      option.remove();
+    });
   });
 
   describe("modifier key — keys are suppressed (non-mac uses ctrlKey)", () => {
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/hooks/useGraderHotkeys.ts b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/hooks/useGraderHotkeys.ts
index 4b06b7088..391cac194 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/hooks/useGraderHotkeys.ts
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/hooks/useGraderHotkeys.ts
@@ -24,13 +24,31 @@ interface Options {
   enabled?: boolean;
 }
 
-const isInputTarget = (t: EventTarget | null): boolean => {
-  if (!(t instanceof HTMLElement)) return false;
-  const tag = t.tagName;
-
-  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
-  return t.isContentEditable;
-};
+const INTERACTIVE_SELECTOR = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "summary",
+  "textarea",
+  "[contenteditable='true']",
+  "[role='button']",
+  "[role='checkbox']",
+  "[role='combobox']",
+  "[role='listbox']",
+  "[role='menu']",
+  "[role='menuitem']",
+  "[role='option']",
+  "[role='radio']",
+  "[role='slider']",
+  "[role='spinbutton']",
+  "[role='switch']",
+  "[role='tab']",
+  "[role='textbox']"
+].join(",");
+
+const isInteractiveTarget = (target: EventTarget | null): boolean =>
+  target instanceof Element && target.closest(INTERACTIVE_SELECTOR) !== null;
 
 export const useGraderHotkeys = (
   handlers: GraderHotkeyHandlers,
@@ -43,14 +61,14 @@ export const useGraderHotkeys = (
 
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === "?" && !isMod(e)) {
-        if (!isInputTarget(e.target)) {
+        if (!isInteractiveTarget(e.target)) {
           e.preventDefault();
           handlers.openHelp?.();
         }
         return;
       }
 
-      if (isInputTarget(e.target) || isMod(e) || e.altKey) return;
+      if (isInteractiveTarget(e.target) || isMod(e) || e.altKey) return;
 
       switch (e.key) {
         case "j":
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderQuestionsPage/GraderQuestionsPage.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderQuestionsPage/GraderQuestionsPage.tsx
index b50ee58a6..5571a7d05 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderQuestionsPage/GraderQuestionsPage.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/Grader/pages/GraderQuestionsPage/GraderQuestionsPage.tsx
@@ -200,15 +200,12 @@ export const GraderQuestionsPage: React.FC = () => {
           />
         ),
         cell: ({ row }) => (
-          <span
-            data-tour="grader-question-select"
-            onClick={(e) => e.stopPropagation()}
-            style={{ display: "inline-flex" }}
-          >
+          <span data-tour="grader-question-select" style={{ display: "inline-flex" }}>
             <Checkbox
               aria-label={`Select ${row.original.name}`}
               checked={selectedQuestionIds.includes(row.original.id)}
               onChange={() => toggleSelected(row.original.id)}
+              onClick={(event) => event.stopPropagation()}
             />
           </span>
         )
@@ -505,21 +502,19 @@ export const GraderQuestionsPage: React.FC = () => {
               key={q.id}
               className={`${styles.cardSelectable} ${selected ? styles.cardSelected : ""}`}
             >
-              <span
-                className={styles.cardCheckbox}
-                data-tour="grader-question-select"
-                onClick={(e) => e.stopPropagation()}
-              >
+              <span className={styles.cardCheckbox} data-tour="grader-question-select">
                 <Checkbox
                   aria-label={`Select ${q.name}`}
                   checked={selected}
                   onChange={() => toggleSelected(q.id)}
+                  onClick={(event) => event.stopPropagation()}
                 />
               </span>
               <button
                 data-tour="grader-question-card"
                 className={styles.card}
                 onClick={() => navigate(`/grader/${id}/questions/${q.id}`)}
+                aria-label={`Grade ${q.name}`}
               >
                 <div className={`${styles.cardTitle} ${styles.cardTitleSpread}`}>
                   <span className={styles.cardTitleText} title={q.name}>
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/shell/AppNavBar.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/shell/AppNavBar.spec.tsx
index 8914eb6da..21c75cfed 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/shell/AppNavBar.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/shell/AppNavBar.spec.tsx
@@ -60,6 +60,36 @@ describe("AppNavBar", () => {
     await waitFor(() => expect(logout).toHaveBeenCalledTimes(1));
   });
 
+  it("supports arrow navigation and closes a submenu with Escape", async () => {
+    const items: NavItem[] = [
+      {
+        label: "Help",
+        items: [
+          { label: "Guide", command: vi.fn() },
+          { label: "Contact", command: vi.fn() }
+        ]
+      }
+    ];
+
+    renderWithMantine(<AppNavBar items={items} />);
+    const helpButton = screen.getByRole("button", { name: /help/i });
+
+    helpButton.focus();
+    await userEvent.keyboard("{Enter}");
+
+    const menu = await screen.findByRole("menu");
+    const menuItems = within(menu).getAllByRole("menuitem");
+
+    await userEvent.keyboard("{ArrowDown}");
+    expect(menuItems[0]).toHaveFocus();
+    await userEvent.keyboard("{ArrowDown}");
+    expect(menuItems[1]).toHaveFocus();
+
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("menu")).not.toBeInTheDocument());
+    expect(helpButton).toHaveFocus();
+  });
+
   it("hides sub-items whose visible flag is false", async () => {
     renderWithMantine(<AppNavBar items={makeItems()} />);
     await userEvent.click(screen.getByRole("button", { name: /user/i }));
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.module.css b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.module.css
index 563a58213..ddc2ca1ae 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.module.css
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.module.css
@@ -53,6 +53,39 @@
   color: var(--rs-text-muted);
 }
 
+.clickableRow:focus-visible {
+  outline: none;
+}
+
+.clickableRow:focus-visible > td {
+  background: var(--rs-brand-50);
+  box-shadow:
+    inset 0 3px 0 var(--rs-brand-500),
+    inset 0 -3px 0 var(--rs-brand-500);
+}
+
+.clickableRow:focus-visible > td:first-child {
+  box-shadow:
+    inset 3px 0 0 var(--rs-brand-500),
+    inset 0 3px 0 var(--rs-brand-500),
+    inset 0 -3px 0 var(--rs-brand-500);
+}
+
+.clickableRow:focus-visible > td:last-child {
+  box-shadow:
+    inset -3px 0 0 var(--rs-brand-500),
+    inset 0 3px 0 var(--rs-brand-500),
+    inset 0 -3px 0 var(--rs-brand-500);
+}
+
+.clickableRow:focus-visible > td:only-child {
+  box-shadow:
+    inset 3px 0 0 var(--rs-brand-500),
+    inset -3px 0 0 var(--rs-brand-500),
+    inset 0 3px 0 var(--rs-brand-500),
+    inset 0 -3px 0 var(--rs-brand-500);
+}
+
 .footer {
   padding: var(--rs-space-3) var(--rs-space-4);
 }
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.spec.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.spec.tsx
index 69183fa6b..9bf0ef13e 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.spec.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.spec.tsx
@@ -1,8 +1,9 @@
 import { ColumnDef } from "@tanstack/react-table";
+import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, expect, it, vi } from "vitest";
 
-import { renderWithMantine, screen, fireEvent } from "@/test/renderWithMantine";
+import { act, fireEvent, renderWithMantine, screen } from "@/test/renderWithMantine";
 
 import { DataGrid } from "./DataGrid";
 
@@ -63,6 +64,70 @@ describe("DataGrid", () => {
     expect(onRowClick).toHaveBeenCalledWith(ROWS[1]);
   });
 
+  it("makes clickable rows keyboard accessible", () => {
+    const onRowClick = vi.fn();
+
+    renderGrid({ onRowClick });
+    const row = screen.getByText("Bravo").closest("tr");
+    const rows = screen.getAllByRole("row").slice(1);
+
+    expect(rows[0]).toHaveAttribute("tabindex", "0");
+    expect(rows[1]).toHaveAttribute("tabindex", "-1");
+    fireEvent.keyDown(row!, { key: "Enter" });
+    fireEvent.keyDown(row!, { key: " " });
+    expect(onRowClick).toHaveBeenNthCalledWith(1, ROWS[1]);
+    expect(onRowClick).toHaveBeenNthCalledWith(2, ROWS[1]);
+  });
+
+  it("places the first clickable row in the sequential Tab order", async () => {
+    renderGrid({
+      onRowClick: vi.fn(),
+      columns: COLUMNS.map((column) => ({ ...column, enableSorting: false }))
+    });
+    const firstRow = screen.getByText("Alpha").closest("tr");
+
+    await userEvent.tab();
+
+    expect(firstRow).toHaveFocus();
+  });
+
+  it("moves through clickable rows with arrow, Home, and End keys", () => {
+    const onRowClick = vi.fn();
+
+    renderGrid({ onRowClick });
+    const rows = screen.getAllByRole("row").slice(1);
+
+    act(() => rows[0].focus());
+    fireEvent.keyDown(rows[0], { key: "ArrowDown" });
+    expect(rows[1]).toHaveFocus();
+
+    fireEvent.keyDown(rows[1], { key: "End" });
+    expect(rows[2]).toHaveFocus();
+
+    fireEvent.keyDown(rows[2], { key: "Home" });
+    expect(rows[0]).toHaveFocus();
+    expect(onRowClick).not.toHaveBeenCalled();
+  });
+
+  it("does not activate a clickable row from a nested control keypress", () => {
+    const onRowClick = vi.fn();
+    const columns: ColumnDef<Row, unknown>[] = [
+      { accessorKey: "name", header: "Name" },
+      {
+        id: "action",
+        header: "Action",
+        cell: () => <button type="button">Nested action</button>
+      }
+    ];
+
+    renderGrid({ onRowClick, columns });
+    fireEvent.keyDown(screen.getAllByRole("button", { name: "Nested action" })[0], {
+      key: "Enter"
+    });
+
+    expect(onRowClick).not.toHaveBeenCalled();
+  });
+
   it("orders rows by initialSorting before user interaction", () => {
     renderGrid({ initialSorting: [{ id: "score", desc: false }], initialPageSize: 1 });
     expect(screen.getByText("Bravo")).toBeInTheDocument();
diff --git a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.tsx b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.tsx
index 5cf376409..e7bb23103 100644
--- a/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.tsx
+++ b/bases/rsptx/assignment_server_api/assignment_builder/src/components/ui/DataGrid.tsx
@@ -201,6 +201,7 @@ export function DataGrid<T>({
     pageSize: initialPageSize
   });
   const [internalSelection, setInternalSelection] = useState<RowSelectionState>({});
+  const [keyboardRowId, setKeyboardRowId] = useState<string | null>(null);
 
   const sorting = controlledSorting ?? internalSorting;
   const setSorting = onSortingChange ?? setInternalSorting;
@@ -243,6 +244,7 @@ export function DataGrid<T>({
 
   const resolvedPageCount = table.getPageCount();
   const rows = table.getRowModel().rows;
+  const tabbableRowId = rows.some((row) => row.id === keyboardRowId) ? keyboardRowId : rows[0]?.id;
 
   // Column filters shrink the table from the inside, so a page index that came
   // from somewhere else (a restored preference, say) can point past the last
@@ -349,6 +351,52 @@ export function DataGrid<T>({
             <Table.Tr
               key={row.id}
               onClick={onRowClick ? () => onRowClick(row.original) : undefined}
+              onFocus={
+                onRowClick
+                  ? (event) => {
+                      if (event.target === event.currentTarget) setKeyboardRowId(row.id);
+                    }
+                  : undefined
+              }
+              onKeyDown={
+                onRowClick
+                  ? (event) => {
+                      if (event.target !== event.currentTarget) return;
+
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        onRowClick(row.original);
+                        return;
+                      }
+
+                      if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+
+                      const rowElements = Array.from(
+                        event.currentTarget.parentElement?.querySelectorAll<HTMLElement>(
+                          "tr[data-clickable-row='true']"
+                        ) ?? []
+                      );
+                      const currentIndex = rowElements.indexOf(event.currentTarget);
+
+                      if (currentIndex < 0 || rowElements.length === 0) return;
+
+                      event.preventDefault();
+                      const nextIndex =
+                        event.key === "Home"
+                          ? 0
+                          : event.key === "End"
+                            ? rowElements.length - 1
+                            : event.key === "ArrowDown"
+                              ? Math.min(currentIndex + 1, rowElements.length - 1)
+                              : Math.max(currentIndex - 1, 0);
+
+                      rowElements[nextIndex].focus();
+                    }
+                  : undefined
+              }
+              tabIndex={onRowClick ? (row.id === tabbableRowId ? 0 : -1) : undefined}
+              data-clickable-row={onRowClick ? "true" : undefined}
+              className={onRowClick ? styles.clickableRow : undefined}
               style={onRowClick ? { cursor: "pointer" } : undefined}
               data-selected={row.getIsSelected() || undefined}
             >