@marimo-team/frontend 0.25.3-dev129 → 0.25.3-dev134

package/src/components/ai/ai-model-dropdown.tsx

@@ -276,13 +276,18 @@ const ProviderDropdownContent = ({
             const qualifiedModelId: QualifiedModelId = `${provider}/${model.model}`;
             return (
               <DropdownMenuSub key={qualifiedModelId}>
-                <DropdownMenuSubTrigger showChevron={false} className="py-2">
-                  <div
-                    className="flex items-center gap-2 w-full cursor-pointer"
-                    onClick={() => {
+                <DropdownMenuSubTrigger
+                  showChevron={false}
+                  className="py-2"
+                  onClick={() => onSelect(qualifiedModelId)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
                       onSelect(qualifiedModelId);
-                    }}
-                  >
+                    }
+                  }}
+                >
+                  <div className="flex items-center gap-2 w-full cursor-pointer">
                     <AiModelDropdownItem model={model} provider={provider} />
                   </div>
                 </DropdownMenuSubTrigger>

package/src/components/chat/acp/__tests__/session-tabs.test.tsx

@@ -0,0 +1,43 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { SessionTabs } from "../session-tabs";
+import { addSession, agentSessionStateAtom } from "../state";
+
+vi.mock("../agent-selector", () => ({ AgentSelector: () => null }));
+
+it("keeps session selection and close as separate named buttons", () => {
+  const first = addSession(
+    { sessions: [], activeTabId: null },
+    { agentId: "claude", firstMessage: "First" },
+  ).sessions[0];
+  const second = addSession(
+    { sessions: [], activeTabId: null },
+    { agentId: "codex", firstMessage: "Second" },
+  ).sessions[0];
+  const store = createStore();
+  store.set(agentSessionStateAtom, {
+    sessions: [first, second],
+    activeTabId: first.tabId,
+  });
+  render(
+    <Provider store={store}>
+      <SessionTabs />
+    </Provider>,
+  );
+  const select = screen.getByRole("button", {
+    name: /Second$/,
+    pressed: false,
+  });
+  select.focus();
+  expect(select).toHaveFocus();
+  fireEvent.click(select);
+  expect(select).toHaveAttribute("aria-pressed", "true");
+  fireEvent.click(screen.getByRole("button", { name: "Close First" }));
+  expect(store.get(agentSessionStateAtom).activeTabId).toBe(second.tabId);
+  expect(
+    store.get(agentSessionStateAtom).sessions.map((session) => session.title),
+  ).toEqual(["Second"]);
+});

package/src/components/chat/acp/blocks.tsx

@@ -337,6 +337,7 @@ export const PlansBlock = (props: { data: PlanNotificationEvent[] }) => {
           >
             <input
               type="checkbox"
+              aria-label={item.content}
               checked={item.status === "completed"}
               readOnly={true}
               className="accent-primary h-4 w-4 rounded border border-muted-foreground/30"

package/src/components/chat/acp/session-tabs.tsx

@@ -32,17 +32,22 @@ const SessionTab: React.FC<SessionTabProps> = memo(
           "flex items-center gap-1 px-2 py-1 text-xs border-r border-border bg-muted/30 hover:bg-muted/50 cursor-pointer min-w-0",
           isActive && "bg-background border-b-0 relative z-1",
         )}
-        onClick={() => onSelect(session.tabId)}
       >
-        <div className="flex items-center gap-1 min-w-0 flex-1">
+        <button
+          type="button"
+          aria-pressed={isActive}
+          onClick={() => onSelect(session.tabId)}
+          className="flex items-center gap-1 min-w-0 flex-1 text-left focus-visible:outline focus-visible:outline-ring"
+        >
           <span className="text-muted-foreground text-[10px] font-medium">
             <AiProviderIcon provider={session.agentId} className="h-3 w-3" />
           </span>
           <span className="truncate" title={session.title}>
             {session.title}
           </span>
-        </div>
+        </button>
         <Button
+          aria-label={`Close ${session.title}`}
           variant="ghost"
           size="sm"
           className="h-4 w-4 p-0 hover:bg-destructive/20 hover:text-destructive shrink-0"

package/src/components/data-table/TableTopBar.tsx

@@ -76,6 +76,7 @@ export const TableTopBar = <TData,>({
           <input
             ref={inputRef}
             type="text"
+            aria-label="Search table"
             className="h-6 border-none bg-transparent focus:outline-hidden text-sm w-full min-w-0"
             value={internalValue}
             onKeyDown={(e) => {
@@ -90,6 +91,7 @@ export const TableTopBar = <TData,>({
           {reloading && <Spinner size="small" />}
           {internalValue && (
             <Button
+              aria-label="Clear table search"
               variant="text"
               size="xs"
               className="h-5 w-5 p-0 shrink-0"

package/src/components/data-table/__tests__/data-table.test.tsx

@@ -260,6 +260,7 @@ describe("DataTable", () => {
     );
 
     const cells = within(screen.getAllByRole("row")[1]).getAllByRole("cell");
+    cells[1].scrollIntoView = vi.fn();
     // Start a pending hover-show on cell A, then focus cell B before it fires.
     fireEvent.mouseOver(cells[0], { buttons: 0 });
     fireEvent.focus(cells[1]);

package/src/components/data-table/__tests__/keyboard-selection.test.tsx

@@ -0,0 +1,188 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { copyToClipboard } from "@/utils/copy";
+import type { CellSelectionState } from "../cell-selection/types";
+import { DataTable } from "../data-table";
+
+vi.mock("@/utils/copy", () => ({ copyToClipboard: vi.fn() }));
+
+function SelectableTable({ multiple = false }: { multiple?: boolean }) {
+  const [selection, setSelection] = useState<CellSelectionState>([]);
+  return (
+    <TooltipProvider>
+      <DataTable
+        data={[{ name: "Alice" }, { name: "Bob" }]}
+        columns={[{ accessorKey: "name", header: "Name" }]}
+        totalRows={2}
+        totalColumns={1}
+        pagination={false}
+        selection={multiple ? "multi-cell" : "single-cell"}
+        cellSelection={selection}
+        onCellSelectionChange={setSelection}
+      />
+    </TooltipProvider>
+  );
+}
+
+describe("table keyboard access", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it("includes the initial focused cell when extending a keyboard range", () => {
+    render(<SelectableTable />);
+    const [alice, bob] = screen.getAllByRole("gridcell");
+    act(() => alice.focus());
+    fireEvent.keyDown(alice, { key: "ArrowDown", shiftKey: true });
+    fireEvent.keyDown(bob, { key: "c", ctrlKey: true });
+    expect(copyToClipboard).toHaveBeenLastCalledWith("Alice\nBob", undefined);
+    fireEvent.keyDown(bob, { key: "ArrowUp", shiftKey: true });
+    fireEvent.keyDown(alice, { key: "c", ctrlKey: true });
+    expect(copyToClipboard).toHaveBeenLastCalledWith("Alice", undefined);
+  });
+
+  it.each(["Enter", " "])(
+    "copies the activated cell with %s, including after an older selection",
+    (key) => {
+      render(<SelectableTable />);
+      const [alice, bob] = screen.getAllByRole("gridcell");
+      for (const [cell, value] of [
+        [alice, "Alice"],
+        [bob, "Bob"],
+      ] as const) {
+        act(() => cell.focus());
+        fireEvent.keyDown(cell, { key });
+        fireEvent.keyDown(cell, { key: "c", ctrlKey: true });
+        expect(copyToClipboard).toHaveBeenLastCalledWith(value, undefined);
+        expect(cell).toHaveAttribute("aria-selected", "true");
+      }
+    },
+  );
+
+  it("moves focus and activation together inside a shadow root", () => {
+    vi.useFakeTimers();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const shadow = host.attachShadow({ mode: "open" });
+    const container = document.createElement("div");
+    shadow.append(container);
+    const view = render(<SelectableTable />, { container });
+    try {
+      const [alice, bob] = within(container).getAllByRole("gridcell");
+      alice.scrollIntoView = vi.fn();
+      bob.scrollIntoView = vi.fn();
+      act(() => alice.focus());
+      fireEvent.keyDown(alice, { key: "ArrowDown" });
+      act(() => vi.runAllTimers());
+      expect(shadow.activeElement).toBe(bob);
+      fireEvent.keyDown(bob, { key: " " });
+      expect(bob).toHaveAttribute("aria-selected", "true");
+      expect(alice).toHaveAttribute("aria-selected", "false");
+    } finally {
+      view.unmount();
+      host.remove();
+    }
+  });
+
+  it("does not move focus away from a nested control after navigation", () => {
+    vi.useFakeTimers();
+    render(<SelectableTable />);
+    const [alice, bob] = screen.getAllByRole("gridcell");
+    alice.scrollIntoView = vi.fn();
+    bob.scrollIntoView = vi.fn();
+    const button = document.createElement("button");
+    alice.append(button);
+    act(() => alice.focus());
+    fireEvent.keyDown(alice, { key: "ArrowDown" });
+    act(() => {
+      button.focus();
+      vi.runAllTimers();
+    });
+    expect(button).toHaveFocus();
+  });
+
+  it("ignores stale scheduled focus when moving between cells", () => {
+    vi.useFakeTimers();
+    render(<SelectableTable />);
+    const [alice, bob] = screen.getAllByRole("gridcell");
+    alice.scrollIntoView = vi.fn();
+    bob.scrollIntoView = vi.fn();
+    act(() => {
+      alice.focus();
+      bob.focus();
+      vi.runAllTimers();
+    });
+    expect(bob).toHaveFocus();
+    expect(alice.scrollIntoView).not.toHaveBeenCalled();
+    expect(bob.scrollIntoView).toHaveBeenCalledOnce();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+  it.each([false, true])(
+    "selects focused cells without a preceding click (multiple=%s)",
+    (multiple) => {
+      render(<SelectableTable multiple={multiple} />);
+      const [alice, bob] = screen.getAllByRole("gridcell");
+      alice.focus();
+      fireEvent.keyDown(alice, { key: "Enter" });
+      expect(alice).toHaveAttribute("aria-selected", "true");
+      bob.focus();
+      fireEvent.keyDown(bob, { key: " " });
+      expect(bob).toHaveAttribute("aria-selected", "true");
+      expect(alice).toHaveAttribute("aria-selected", String(multiple));
+      fireEvent.keyDown(bob, { key: " " });
+      expect(bob).toHaveAttribute("aria-selected", "false");
+    },
+  );
+
+  it("does not intercept keys from embedded buttons", () => {
+    const select = vi.fn();
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={[{ name: "Alice" }]}
+          columns={[
+            {
+              accessorKey: "name",
+              cell: () => <button type="button">Open person</button>,
+            },
+          ]}
+          totalRows={1}
+          totalColumns={1}
+          pagination={false}
+          selection="single-cell"
+          onCellSelectionChange={select}
+        />
+      </TooltipProvider>,
+    );
+    const button = screen.getByRole("button", { name: "Open person" });
+    for (const key of ["Enter", " ", "ArrowDown"]) {
+      expect(fireEvent.keyDown(button, { key })).toBe(true);
+    }
+    expect(select).not.toHaveBeenCalled();
+  });
+
+  it("names search controls and clears a query", () => {
+    render(
+      <TooltipProvider>
+        <DataTable
+          data={[{ name: "Alice" }]}
+          columns={[{ accessorKey: "name" }]}
+          totalRows={1}
+          totalColumns={1}
+          pagination={false}
+          showSearch={true}
+          onSearchQueryChange={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+    const search = screen.getByRole("textbox", { name: "Search table" });
+    fireEvent.change(search, { target: { value: "Alice" } });
+    fireEvent.click(screen.getByRole("button", { name: "Clear table search" }));
+    expect(search).toHaveValue("");
+  });
+});

package/src/components/data-table/data-table.tsx

@@ -402,6 +402,12 @@ const DataTableInternal = <TData,>({
               </Banner>
             )}
             <Table
+              role={table.options.enableCellSelection ? "grid" : undefined}
+              aria-multiselectable={
+                table.options.enableCellSelection
+                  ? table.options.enableMultiCellSelection
+                  : undefined
+              }
               className={cn(
                 "relative",
                 columns.length <= AUTO_WIDTH_MAX_COLUMNS ? "w-auto" : "w-full",

package/src/components/data-table/range-focus/atoms.ts

@@ -244,15 +244,13 @@ const {
       cellId: nextCell.id,
     };
 
-    if (isShiftKey && state.selectedStartCell) {
-      const cellsInRange = getCellsBetween(
-        table,
-        state.selectedStartCell,
-        newCell,
-      );
+    if (isShiftKey) {
+      const anchor = state.selectedStartCell ?? currentCell;
+      const cellsInRange = getCellsBetween(table, anchor, newCell);
       return {
         ...state,
         selectedCells: new Set(cellsInRange),
+        selectedStartCell: anchor,
         focusedCell: newCell,
       };
     } else {

package/src/components/data-table/range-focus/use-cell-range-selection.ts

@@ -45,45 +45,71 @@ export const useCellRangeSelection = <TData>({
     },
   );
 
-  const handleCellsKeyDown = useEvent((e: React.KeyboardEvent<HTMLElement>) => {
-    switch (e.key) {
-      case "c":
-        if (Events.isMetaOrCtrl(e)) {
-          handleCopy();
-        }
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        navigate(e, "down");
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        navigate(e, "up");
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        navigate(e, "left");
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        navigate(e, "right");
-        break;
-      case "Enter":
-        e.preventDefault();
-        actions.toggleCurrentRowSelection(table);
-        break;
-      case "Escape":
-        actions.clearSelection();
-        break;
-      case "a":
-        if (e.metaKey || e.ctrlKey) {
-          e.preventDefault();
-          actions.selectAllCells(table);
-        }
-        break;
-    }
+  const handleCellFocus = useEvent((cell: Cell<TData, unknown>) => {
+    actions.setFocusedCell({
+      cellId: cell.id,
+      rowId: cell.row.id,
+      columnId: cell.column.id,
+    });
   });
 
+  const handleCellsKeyDown = useEvent(
+    (e: React.KeyboardEvent<HTMLElement>, cell: Cell<TData, unknown>) => {
+      if (e.defaultPrevented || isInteractiveTarget(e)) {
+        return;
+      }
+      switch (e.key) {
+        case "c":
+          if (Events.isMetaOrCtrl(e)) {
+            handleCopy();
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          navigate(e, "down");
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          navigate(e, "up");
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          navigate(e, "left");
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          navigate(e, "right");
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          updateSelection(
+            {
+              cellId: cell.id,
+              rowId: cell.row.id,
+              columnId: cell.column.id,
+            },
+            false,
+          );
+          if (table.options.enableCellSelection) {
+            cell.toggleSelected?.();
+          } else if (cell.row.getCanSelect()) {
+            cell.row.toggleSelected();
+          }
+          break;
+        case "Escape":
+          actions.clearSelection();
+          break;
+        case "a":
+          if (e.metaKey || e.ctrlKey) {
+            e.preventDefault();
+            actions.selectAllCells(table);
+          }
+          break;
+      }
+    },
+  );
+
   const handleCellMouseDown = useEvent(
     (e: React.MouseEvent, cell: Cell<TData, unknown>) => {
       // Right-clicks will trigger context menu, so avoid updating selected cells
@@ -122,6 +148,7 @@ export const useCellRangeSelection = <TData>({
     handleCellMouseOver,
     handleCopy,
     handleCellsKeyDown,
+    handleCellFocus,
     updateSelection,
     clearSelection: actions.clearSelection,
   };
@@ -148,7 +175,7 @@ const CONTENT_WRAPPER_MARIMO_TAGS: ReadonlySet<string> = new Set([
  * shadow host (e.g. `<marimo-lazy>`), hiding any genuinely interactive
  * descendants rendered inside the shadow tree.
  */
-export function isInteractiveTarget(e: React.MouseEvent): boolean {
+export function isInteractiveTarget(e: React.SyntheticEvent): boolean {
   const path: readonly EventTarget[] =
     typeof e.nativeEvent?.composedPath === "function"
       ? e.nativeEvent.composedPath()

package/src/components/data-table/range-focus/use-scroll-into-view.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { atom } from "jotai";
+import { atom, useStore } from "jotai";
 import { useJotaiEffect } from "@/core/state/jotai";
 import { Logger } from "@/utils/Logger";
 import { cellSelectionStateAtom } from "./atoms";
@@ -15,14 +15,21 @@ const focusedCellAtom = atom((get) => get(cellSelectionStateAtom).focusedCell);
 export function useScrollIntoViewOnFocus(
   root: React.RefObject<HTMLElement | null>,
 ) {
+  const store = useStore();
   useJotaiEffect(focusedCellAtom, (focusedCell) => {
     if (!focusedCell?.cellId) {
       return;
     }
 
     const scroll = () => {
+      if (
+        !root.current ||
+        store.get(focusedCellAtom)?.cellId !== focusedCell.cellId
+      ) {
+        return;
+      }
       // Check if this cell contains the CellRangeSelectionIndicator with our cellId
-      const indicator = root.current?.querySelector(
+      const indicator = root.current?.querySelector<HTMLElement>(
         `[data-cell-id="${focusedCell.cellId}"]`,
       );
       if (!indicator) {
@@ -33,6 +40,18 @@ export function useScrollIntoViewOnFocus(
         return;
       }
 
+      const focusRoot = root.current.getRootNode();
+      const activeElement =
+        focusRoot instanceof ShadowRoot || focusRoot instanceof Document
+          ? focusRoot.activeElement
+          : null;
+      if (
+        root.current.contains(activeElement) &&
+        activeElement?.matches("td[data-cell-id]")
+      ) {
+        indicator.focus({ preventScroll: true });
+      }
+
       indicator.scrollIntoView({
         behavior: "smooth",
         block: "nearest",

package/src/components/data-table/renderers.tsx

@@ -124,6 +124,7 @@ export const DataTableBody = <TData,>({
     handleCellMouseUp,
     handleCellMouseOver,
     handleCellsKeyDown,
+    handleCellFocus,
     handleCopy: handleCopyAllCells,
   } = useCellRangeSelection({ table });
 
@@ -147,10 +148,16 @@ export const DataTableBody = <TData,>({
       return (
         <TableCell
           tabIndex={0}
+          role={table.options.enableCellSelection ? "gridcell" : undefined}
+          aria-selected={
+            table.options.enableCellSelection
+              ? cell.getIsSelected?.()
+              : undefined
+          }
           {...getCellDomProps(cell.id)}
           key={cell.id}
           className={cn(
-            "whitespace-pre truncate outline-hidden border-r border-r-border/75",
+            "whitespace-pre truncate outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring border-r border-r-border/75",
             !fixedWidth && "max-w-[300px]",
             cell.column.getColumnWrapping &&
               cell.column.getColumnWrapping?.() === "wrap" &&
@@ -169,7 +176,13 @@ export const DataTableBody = <TData,>({
             hoverTooltip.handleCellMouseOver(e, cell);
           }}
           onMouseLeave={hoverTooltip.handleCellMouseLeave}
-          onFocus={(e) => hoverTooltip.handleCellFocus(e, cell)}
+          onFocus={(e) => {
+            if (e.target === e.currentTarget) {
+              handleCellFocus(cell);
+            }
+            hoverTooltip.handleCellFocus(e, cell);
+          }}
+          onKeyDown={(e) => handleCellsKeyDown(e, cell)}
           onBlur={hoverTooltip.handleCellBlur}
           onContextMenu={() => handleContextMenu(cell)}
         >
@@ -264,11 +277,7 @@ export const DataTableBody = <TData,>({
     return rows.map((row) => renderRow(row));
   };
 
-  const tableBody = (
-    <TableBody onKeyDown={handleCellsKeyDown} ref={tableRef}>
-      {renderRows()}
-    </TableBody>
-  );
+  const tableBody = <TableBody ref={tableRef}>{renderRows()}</TableBody>;
 
   return (
     <>

package/src/components/data-table/row-viewer-panel/__tests__/row-viewer.test.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "jotai";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -17,6 +17,29 @@ const renderWithProviders = (component: React.ReactNode) => {
 };
 
 describe("RowExpandedPanel", () => {
+  it("preserves Space activation on navigation buttons", async () => {
+    const select = vi.fn();
+    const navigate = vi.fn();
+    renderWithProviders(
+      <RowViewerPanel
+        rowIdx={0}
+        setRowIdx={navigate}
+        totalRows={2}
+        fieldTypes={[["name", ["string", "string"]]]}
+        getRow={async () => ({ rows: [{ name: "Alice" }] })}
+        isSelectable={true}
+        isRowSelected={false}
+        handleRowSelectionChange={select}
+      />,
+    );
+    await screen.findByText("Alice");
+    const next = screen.getByRole("button", { name: "Next row" });
+    expect(fireEvent.keyDown(next, { key: " " })).toBe(true);
+    expect(select).not.toHaveBeenCalled();
+    fireEvent.click(next);
+    expect(navigate).toHaveBeenCalledExactlyOnceWith(1);
+  });
+
   const mockFieldTypes: FieldTypesWithExternalType = [
     ["name", ["string", "string"]],
     ["age", ["number", "number"]],

package/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -37,6 +37,7 @@ import type { GetRowResult } from "@/plugins/impl/DataTablePlugin";
 import { Objects } from "@/utils/objects";
 import { NAMELESS_COLUMN_PREFIX, renderCellValue } from "../columns";
 import { prettifyRowCount } from "../pagination";
+import { isInteractiveTarget } from "../range-focus/use-cell-range-selection";
 import {
   type FieldTypesWithExternalType,
   INDEX_COLUMN_NAME,
@@ -102,8 +103,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
   }
 
   const handleKeyDown = (e: KeyboardEvent) => {
-    // Don't intercept keys when typing in an input
-    if (e.target instanceof HTMLInputElement) {
+    if (e.defaultPrevented || isInteractiveTarget(e)) {
       return;
     }
     switch (e.key) {

package/src/components/datasources/datasources.tsx

@@ -284,6 +284,7 @@ export const DataSources: React.FC = () => {
         {hasSearch && (
           <button
             type="button"
+            aria-label="Clear table search"
             className="float-right border-b px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground"
             onClick={() => setSearchValue("")}
           >