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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.3-dev129",
+  "version": "0.25.3-dev134",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/__tests__/module-entry.test.ts

@@ -0,0 +1,32 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { expect, it } from "vitest";
+import { moduleEntry } from "../../lint/module-entry.js";
+
+/** Whether the rule reports importing `source` from `file`. */
+function reports(file: string, source: string): boolean {
+  let reported = false;
+  const visitors = moduleEntry.createOnce({
+    filename: `/repo/frontend/src/${file}`,
+    report: () => {
+      reported = true;
+    },
+  });
+  visitors.ImportDeclaration({ source: { value: source } });
+  return reported;
+}
+
+it.each([
+  ["core/websocket/state.ts", "@/core/host", false],
+  ["core/websocket/state.ts", "../host", false],
+  ["core/websocket/state.ts", "@/core/document", false],
+  ["core/host/replica.ts", "./resources/document", false],
+  ["core/host/replica.ts", "@/core/host/backend", false],
+  ["core/websocket/__tests__/a.test.ts", "../../host/replica", false],
+  ["core/websocket/fixtures.ts", "../host/__tests__/fixtures", false],
+  ["core/websocket/state.ts", "@/core/host/replica", true],
+  ["core/websocket/state.ts", "../host/resources/document", true],
+  ["core/websocket/state.ts", "../document/hooks", true],
+])("from %s, importing %s reports %s", (file, source, expected) => {
+  expect(reports(file, source)).toBe(expected);
+});

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

@@ -0,0 +1,63 @@
+/* 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 { TooltipProvider } from "@/components/ui/tooltip";
+import { getKnownModelMaps } from "@/core/ai/model-registry";
+import { AIModelDropdown } from "../ai-model-dropdown";
+import * as aiUtils from "../ai-utils";
+
+vi.mock("@/core/ai/config", () => ({
+  useAIConfigActions: () => ({ saveModelChange: vi.fn() }),
+}));
+vi.mock("@/components/app-config/state", () => ({
+  useOpenSettingsToTab: () => ({ handleClick: vi.fn() }),
+}));
+
+it.each(["Enter", " "])(
+  "selects a model with %j while ArrowRight retains information access",
+  async (key) => {
+    const knownModel = [...getKnownModelMaps().modelMap.values()].find(
+      (model) => model.provider === "openai",
+    );
+    if (!knownModel) {
+      throw new Error("Expected a known OpenAI model");
+    }
+    const model = { ...knownModel, capabilities: [] };
+    vi.spyOn(aiUtils, "listModelsForAiSettings").mockReturnValue([
+      [model.provider, [model]],
+    ]);
+    const onSelect = vi.fn();
+    render(
+      <Provider store={createStore()}>
+        <TooltipProvider>
+          <AIModelDropdown
+            forRole="chat"
+            placeholder="Choose model"
+            onSelect={onSelect}
+          />
+        </TooltipProvider>
+      </Provider>,
+    );
+    fireEvent.keyDown(screen.getByRole("button", { name: "Choose model" }), {
+      key: "ArrowDown",
+    });
+    fireEvent.keyDown(
+      await screen.findByRole("menuitem", { name: /OpenAI$/ }),
+      { key: "ArrowRight" },
+    );
+    const option = await screen.findByRole("menuitem", {
+      name: (name) => name.endsWith(model.name),
+    });
+    fireEvent.keyDown(option, { key: "ArrowRight" });
+    expect(
+      await screen.findByRole("heading", { name: model.name }),
+    ).toBeInTheDocument();
+    expect(onSelect).not.toHaveBeenCalled();
+    fireEvent.keyDown(option, { key });
+    expect(onSelect).toHaveBeenCalledExactlyOnceWith(
+      `${model.provider}/${model.model}`,
+    );
+  },
+);

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",