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

package/src/components/editor/links/__tests__/cell-link.test.tsx

@@ -0,0 +1,146 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { HTMLCellId, SCRATCH_CELL_ID } from "@/core/cells/ids";
+import { goToCellLine } from "@/core/codemirror/go-to-definition/utils";
+import { CellLink, CellLinkTraceback } from "../cell-link";
+
+const showCellIfHidden = vi.hoisted(() => vi.fn());
+const targetId = cellId("target");
+
+vi.mock("@/core/cells/cells", () => ({
+  useCellActions: () => ({ showCellIfHidden }),
+  useCellIds: () => ({ inOrderIds: [targetId] }),
+  useCellNames: () => ({ [targetId]: "Target" }),
+}));
+vi.mock("@/core/saving/filename", () => ({ useFilename: () => "notebook.py" }));
+vi.mock("@/core/codemirror/go-to-definition/utils", () => ({
+  goToCellLine: vi.fn(),
+}));
+
+function flushNavigation() {
+  act(() => vi.advanceTimersToNextFrame());
+}
+
+describe("CellLink navigation", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+    showCellIfHidden.mockReset();
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it("focuses, scrolls, and highlights the target on keyboard activation", () => {
+    render(
+      <>
+        <CellLink cellId={targetId} />
+        <div
+          id={HTMLCellId.create(targetId)}
+          tabIndex={-1}
+          data-testid="target"
+        />
+      </>,
+    );
+    const target = screen.getByTestId("target");
+    target.scrollIntoView = vi.fn();
+    const focus = vi.spyOn(target, "focus");
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("href", `#${target.id}`);
+    link.focus();
+    // Native anchors emit a click with detail=0 when activated with Enter.
+    expect(fireEvent.click(link, { detail: 0 })).toBe(false);
+    flushNavigation();
+
+    expect(showCellIfHidden).toHaveBeenCalledExactlyOnceWith({
+      cellId: targetId,
+    });
+    expect(target).toHaveFocus();
+    expect(focus).toHaveBeenCalledWith({ preventScroll: true });
+    expect(target.scrollIntoView).toHaveBeenCalledExactlyOnceWith({
+      behavior: "smooth",
+      block: "center",
+    });
+    expect(target).toHaveClass("focus-outline");
+  });
+
+  it("reveals a hidden destination before moving focus", () => {
+    function HiddenCell() {
+      const [visible, setVisible] = useState(false);
+      showCellIfHidden.mockImplementation(() => setVisible(true));
+      return (
+        <>
+          <CellLink cellId={targetId} skipScroll={true} />
+          {visible && (
+            <div
+              id={HTMLCellId.create(targetId)}
+              tabIndex={-1}
+              data-testid="target"
+            />
+          )}
+        </>
+      );
+    }
+    render(<HiddenCell />);
+    expect(screen.queryByTestId("target")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("link"));
+    flushNavigation();
+    expect(screen.getByTestId("target")).toHaveFocus();
+  });
+
+  it.each([
+    { metaKey: true },
+    { ctrlKey: true },
+    { shiftKey: true },
+    { altKey: true },
+    { button: 1 },
+  ])("preserves browser activation for %o", (modifiers) => {
+    render(<CellLink cellId={targetId} />);
+    const link = screen.getByRole("link");
+    link.focus();
+    expect(fireEvent.click(link, modifiers)).toBe(true);
+    flushNavigation();
+    expect(showCellIfHidden).not.toHaveBeenCalled();
+    expect(link).toHaveFocus();
+  });
+
+  it("lets traceback line navigation choose the final focus", () => {
+    render(
+      <>
+        <CellLinkTraceback cellId={targetId} lineNumber={7} />
+        <div
+          id={HTMLCellId.create(targetId)}
+          tabIndex={-1}
+          data-testid="target"
+        >
+          <textarea aria-label="Editor" />
+        </div>
+      </>,
+    );
+    const target = screen.getByTestId("target");
+    target.scrollIntoView = vi.fn();
+    const editor = screen.getByRole("textbox", { name: "Editor" });
+    vi.mocked(goToCellLine).mockImplementation(() => {
+      expect(target).toHaveFocus();
+      editor.focus();
+      return true;
+    });
+    fireEvent.click(screen.getByRole("link"));
+    flushNavigation();
+    expect(goToCellLine).toHaveBeenCalledExactlyOnceWith(targetId, 7);
+    expect(editor).toHaveFocus();
+    expect(target.scrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it("keeps scratch references non-navigable", () => {
+    render(
+      <CellLink cellId={SCRATCH_CELL_ID} formatCellName={() => "scratch"} />,
+    );
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText("scratch"));
+    flushNavigation();
+    expect(showCellIfHidden).not.toHaveBeenCalled();
+  });
+});

package/src/components/editor/links/cell-link.tsx

@@ -7,7 +7,9 @@ import { displayCellName } from "@/core/cells/names";
 import { goToCellLine } from "@/core/codemirror/go-to-definition/utils";
 import { useFilename } from "@/core/saving/filename";
 import { cn } from "@/utils/cn";
+import { Events } from "@/utils/events";
 import { Logger } from "../../../utils/Logger";
+import { focusCell } from "../navigation/focus-utils";
 
 interface Props {
   cellId: CellId;
@@ -29,14 +31,20 @@ export const CellLink = (props: Props): JSX.Element => {
   const formatName = formatCellName ?? ((name: string) => name);
 
   return (
-    <div
+    // Reveal hidden cells before scrolling and focusing the destination.
+    // react-doctor-disable-next-line react-doctor/no-prevent-default
+    <a
+      href={
+        cellId === SCRATCH_CELL_ID ? undefined : `#${HTMLCellId.create(cellId)}`
+      }
       className={cn(
-        "inline-block cursor-pointer text-link hover:underline",
+        "inline-block cursor-pointer text-left text-link hover:underline focus-visible:outline focus-visible:outline-ring",
         className,
       )}
-      role="link"
-      tabIndex={-1}
       onClick={(e) => {
+        if (e.defaultPrevented || e.button !== 0 || Events.hasModifier(e)) {
+          return;
+        }
         // Scratch causes a crash since scratch is not registered like a
         // normal cell.
         if (cellId === SCRATCH_CELL_ID) {
@@ -48,13 +56,14 @@ export const CellLink = (props: Props): JSX.Element => {
         requestAnimationFrame(() => {
           const succeeded = scrollAndHighlightCell(cellId, variant, skipScroll);
           if (succeeded) {
+            focusCell(cellId, { preventScroll: true });
             onClick?.();
           }
         });
       }}
     >
       {formatName(displayCellName(cellName, cellIndex))}
-    </div>
+    </a>
   );
 };
 

package/src/components/editor/navigation/focus-utils.ts

@@ -19,10 +19,10 @@ export function focusCellEditor(
   }
 }
 
-export function focusCell(cellId: CellId): void {
+export function focusCell(cellId: CellId, options?: FocusOptions): void {
   const element = document.getElementById(HTMLCellId.create(cellId));
   if (element) {
-    tryFocus(element);
+    tryFocus(element, options);
   } else {
     Logger.warn(`[CellFocusManager] focusCell: element not found: ${cellId}`);
   }
@@ -48,9 +48,9 @@ export function isAnyCellFocused(): boolean {
   );
 }
 
-export function tryFocus(dom: HTMLElement) {
+export function tryFocus(dom: HTMLElement, options?: FocusOptions) {
   try {
-    dom.focus();
+    dom.focus(options);
   } catch {
     Logger.warn("[CellFocusManager] element may not be focusable", dom);
   }

package/src/components/editor/notebook-cell.tsx

@@ -525,13 +525,22 @@ const EditableCellComponent = ({
     isMarkdownCodeHidden &&
     isEmptyMarkdownContent &&
     !needsRun && (
+      // Preserve pointer double-click editing; keyboard and assistive clicks activate directly.
+      // react-doctor-disable-next-line react-doctor/prefer-tag-over-role
       <div
+        // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
         role="button"
-        aria-label="Double-click to edit markdown"
+        aria-label="Edit markdown"
         className="relative cursor-pointer px-3 py-2"
         onDoubleClick={showHiddenCodeIfMarkdown}
+        onClick={(e) => {
+          if (e.detail === 0) {
+            showHiddenCodeIfMarkdown();
+          }
+        }}
         onKeyDown={(e) => {
-          if (e.key === "Enter") {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
             showHiddenCodeIfMarkdown();
           }
         }}

package/src/components/editor/output/MarimoTracebackOutput.tsx

@@ -248,21 +248,22 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
             <Tooltip content={tooltipContent}>
               <button
                 type="button"
+                aria-label={
+                  debuggerEnabled ? "Toggle breakpoint" : "Insert breakpoint"
+                }
                 className="ml-1 p-1 rounded-sm hover:bg-muted transition-colors inline"
+                onClick={() => {
+                  if (debuggerEnabled && !isStaticNotebook()) {
+                    toggleBreakpoint(info.cellId, info.lineNumber);
+                    return;
+                  }
+                  const view = getCellEditorView(info.cellId);
+                  if (view) {
+                    insertDebuggerAtLine(view, info.lineNumber);
+                  }
+                }}
               >
-                <BugPlayIcon
-                  onClick={() => {
-                    if (debuggerEnabled && !isStaticNotebook()) {
-                      toggleBreakpoint(info.cellId, info.lineNumber);
-                      return;
-                    }
-                    const view = getCellEditorView(info.cellId);
-                    if (view) {
-                      insertDebuggerAtLine(view, info.lineNumber);
-                    }
-                  }}
-                  className="h-3 w-3"
-                />
+                <BugPlayIcon className="h-3 w-3" />
               </button>
             </Tooltip>
           )}
@@ -272,7 +273,8 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
   }
   if (info?.kind === "file") {
     return (
-      <div
+      <button
+        type="button"
         className="inline-block cursor-pointer text-destructive hover:underline"
         onClick={() => {
           getRequestClient().openFile({
@@ -282,7 +284,7 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
         }}
       >
         <span className="nb">"{info.filePath}"</span>
-      </div>
+      </button>
     );
   }
 };

package/src/components/editor/output/__tests__/traceback.test.tsx

@@ -1,11 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { Tracebacks } from "@/__mocks__/tracebacks";
 import { cellId } from "@/__tests__/branded";
+import { toggleBreakpoint } from "@/core/codemirror/cells/debugger-state";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { initialModeAtom } from "@/core/mode";
 import { requestClientAtom } from "@/core/network/requests";
@@ -19,7 +20,32 @@ import {
 
 const cid = cellId("1");
 
+vi.mock("@/core/config/feature-flag", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/core/config/feature-flag")>()),
+  getFeatureFlag: (flag: string) => flag === "debugger",
+}));
+vi.mock("@/core/codemirror/cells/debugger-state", async (importOriginal) => ({
+  ...(await importOriginal<
+    typeof import("@/core/codemirror/cells/debugger-state")
+  >()),
+  toggleBreakpoint: vi.fn(),
+}));
+
 describe("traceback component", () => {
+  test("activates the breakpoint from the named button itself", () => {
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cid} />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const buttons = screen.getAllByRole("button", {
+      name: "Toggle breakpoint",
+    });
+    fireEvent.click(buttons[0]);
+    expect(toggleBreakpoint).toHaveBeenCalledOnce();
+  });
   beforeEach(() => {
     vi.resetAllMocks();
     store.set(initialModeAtom, "edit");

package/src/components/editor/package-alert.tsx

@@ -55,6 +55,7 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import { ExternalLink } from "../ui/links";
@@ -592,14 +593,18 @@ const ExtrasSelector: React.FC<ExtrasSelectorProps> = ({
                 <div className="p-2 bg-popover border-b border-border">
                   <div className="flex flex-wrap gap-1 p-1 min-h-[24px]">
                     {selectedExtras.map((extra) => (
-                      <span
+                      <DropdownMenuItem
                         key={extra}
+                        aria-label={`Remove ${extra}`}
                         className="inline-flex items-center gap-1 px-1 py-0.5 text-sm font-mono border border-muted-foreground/30 hover:border-muted-foreground/60 rounded-sm cursor-pointer group transition-colors"
-                        onClick={() => handleExtraToggle(extra, false)}
+                        onSelect={(e) => {
+                          e.preventDefault();
+                          handleExtraToggle(extra, false);
+                        }}
                       >
                         {extra}
                         <XIcon className="w-3 h-3 opacity-60 group-hover:opacity-100" />
-                      </span>
+                      </DropdownMenuItem>
                     ))}
                   </div>
                 </div>

package/src/components/scratchpad/scratchpad.test.tsx

@@ -0,0 +1,95 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { EditorView } from "@codemirror/view";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { type ComponentProps, useEffect, useRef } from "react";
+import { expect, it, vi } from "vitest";
+import type { CellEditor } from "@/components/editor/cell/code/cell-editor";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { SCRATCH_CELL_ID } from "@/core/cells/ids";
+import { ScratchPad } from "./scratchpad";
+import {
+  historyVisibleAtom,
+  scratchpadHistoryAtom,
+} from "./scratchpad-history";
+
+const state = vi.hoisted(() => ({
+  editor: null as EditorView | null,
+  updateCellCode: vi.fn(),
+}));
+
+vi.mock("@/core/cells/cells", () => ({
+  useNotebook: () => ({ cellRuntime: {}, cellData: {} }),
+  useCellActions: () => ({
+    createNewCell: vi.fn(),
+    updateCellCode: state.updateCellCode,
+  }),
+}));
+vi.mock("@/core/cells/focus", () => ({ useLastFocusedCellId: () => null }));
+vi.mock("@/core/network/requests", () => ({
+  useRequestClient: () => ({ sendRunScratchpad: vi.fn() }),
+}));
+vi.mock("@/components/editor/chrome/panels/panel-context", () => ({
+  usePanelOrientation: () => "vertical",
+  usePanelSection: () => "sidebar",
+}));
+vi.mock("@/components/editor/Output", () => ({ OutputArea: () => null }));
+vi.mock("@/components/editor/output/console/ConsoleOutput", () => ({
+  ConsoleOutput: () => null,
+}));
+vi.mock("@/plugins/impl/code/LazyAnyLanguageCodeMirror", () => ({
+  LazyAnyLanguageCodeMirror: () => null,
+}));
+vi.mock("@/components/shortcuts/renderShortcut", () => ({
+  renderShortcut: () => "",
+}));
+vi.mock("@/components/editor/cell/code/cell-editor", () => ({
+  CellEditor: ({ setEditorView }: ComponentProps<typeof CellEditor>) => {
+    const parent = useRef<HTMLDivElement>(null);
+    const setView = useRef(setEditorView);
+    useEffect(() => {
+      const view = new EditorView({
+        parent: parent.current ?? undefined,
+        extensions: [
+          EditorView.contentAttributes.of({
+            "aria-label": "Scratchpad editor",
+          }),
+        ],
+      });
+      state.editor = view;
+      setView.current(view);
+      return () => {
+        view.destroy();
+        state.editor = null;
+      };
+    }, []);
+    return <div ref={parent} />;
+  },
+}));
+
+it("focuses the editor after recalling history", () => {
+  const store = createStore();
+  store.set(scratchpadHistoryAtom, ["print(42)"]);
+  store.set(historyVisibleAtom, true);
+  render(
+    <Provider store={store}>
+      <TooltipProvider>
+        <ScratchPad />
+      </TooltipProvider>
+    </Provider>,
+  );
+  const recall = screen.getByRole("button", { name: "Recall code" });
+  act(() => recall.focus());
+  fireEvent.click(recall, { detail: 0 });
+  expect(recall).not.toBeInTheDocument();
+  expect(
+    screen.getByRole("textbox", { name: "Scratchpad editor" }),
+  ).toHaveFocus();
+  expect(state.editor?.state.doc.toString()).toBe("print(42)");
+  expect(state.updateCellCode).toHaveBeenCalledExactlyOnceWith({
+    cellId: SCRATCH_CELL_ID,
+    code: "print(42)",
+    formattingChange: false,
+  });
+});

package/src/components/scratchpad/scratchpad.tsx

@@ -123,6 +123,7 @@ export const ScratchPad: React.FC = () => {
           insert: item,
         },
       });
+      ev.focus();
     }
   });
 
@@ -136,11 +137,23 @@ export const ScratchPad: React.FC = () => {
       <div className="absolute inset-0 z-100 bg-background p-3 border-none overflow-auto">
         <div className="overflow-auto flex flex-col gap-3">
           {history.map((item) => (
+            // The Recall code button provides keyboard access without making the code preview a button.
+            // react-doctor-disable-next-line react-doctor/click-events-have-key-events, react-doctor/no-static-element-interactions
             <div
               key={item}
-              className="border rounded-md hover:shadow-sm cursor-pointer hover:border-input overflow-hidden"
+              className="relative border rounded-md hover:shadow-sm cursor-pointer hover:border-input overflow-hidden"
               onClick={() => handleSelectHistoryItem(item)}
             >
+              <button
+                type="button"
+                className="sr-only focus:not-sr-only focus:absolute focus:right-1 focus:top-1 focus:z-10 focus:bg-background focus:px-2 focus:py-1 focus:outline focus:outline-ring"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleSelectHistoryItem(item);
+                }}
+              >
+                Recall code
+              </button>
               <Suspense>
                 <LazyAnyLanguageCodeMirror
                   language="python"

package/src/components/tracing/tracing-keyboard.test.tsx

@@ -0,0 +1,85 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { type Run, type RunId, runsAtom } from "@/core/cells/runs";
+import { Tracing } from "./tracing";
+
+vi.mock("react-vega", () => ({ useVegaEmbed: () => undefined }));
+vi.mock("vega-lite", () => ({ compile: () => ({ spec: {} }) }));
+vi.mock("@/components/editor/chrome/panels/panel-context", () => ({
+  usePanelSection: () => "sidebar",
+}));
+
+const run: Run = {
+  runId: "run-1" as RunId,
+  runStartTime: 1_704_067_200,
+  cellRuns: new Map(),
+};
+
+describe("trace disclosure keyboard focus", () => {
+  it.each([false, true])(
+    "keeps the header focused across toggles (inline=%s)",
+    (inline) => {
+      const store = createStore();
+      store.set(runsAtom, {
+        runIds: [run.runId],
+        runMap: new Map([[run.runId, run]]),
+      });
+      render(
+        <Provider store={store}>
+          <TooltipProvider>
+            <Tracing />
+          </TooltipProvider>
+        </Provider>,
+      );
+      if (inline) {
+        fireEvent.click(screen.getByRole("checkbox", { name: "Inline chart" }));
+      }
+      const header = screen.getByRole("button", { name: /^Run -/ });
+      act(() => header.focus());
+      for (const expanded of [false, true, false]) {
+        // Native buttons emit a click with detail=0 for keyboard activation.
+        fireEvent.click(header, { detail: 0 });
+        expect(screen.getByRole("button", { name: /^Run -/ })).toBe(header);
+        expect(header).toHaveFocus();
+        expect(header).toHaveAttribute("aria-expanded", String(expanded));
+      }
+    },
+  );
+
+  it("does not steal focus when a newer run expands automatically", () => {
+    const store = createStore();
+    store.set(runsAtom, {
+      runIds: [run.runId],
+      runMap: new Map([[run.runId, run]]),
+    });
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <Tracing />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const header = screen.getByRole("button", { name: /^Run -/ });
+    act(() => header.focus());
+    const newer: Run = {
+      ...run,
+      runId: "run-2" as RunId,
+      runStartTime: run.runStartTime + 1,
+    };
+    act(() => {
+      store.set(runsAtom, {
+        runIds: [newer.runId, run.runId],
+        runMap: new Map([
+          [run.runId, run],
+          [newer.runId, newer],
+        ]),
+      });
+    });
+    expect(header).toHaveFocus();
+    expect(header).toHaveAttribute("aria-expanded", "false");
+  });
+});