@marimo-team/frontend 0.23.12-dev2 → 0.23.12-dev20

package/src/plugins/impl/__tests__/FileBrowserPlugin.test.tsx

@@ -0,0 +1,314 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import type { IPluginProps } from "../../types";
+import { FileBrowserPlugin } from "../FileBrowserPlugin";
+
+interface MockFile {
+  id: string;
+  path: string;
+  name: string;
+  is_directory: boolean;
+}
+
+const FILES: MockFile[] = [
+  { id: "1", path: "/home/user/docs", name: "docs", is_directory: true },
+  { id: "2", path: "/home/user/a.txt", name: "a.txt", is_directory: false },
+  { id: "3", path: "/home/user/b.txt", name: "b.txt", is_directory: false },
+];
+
+type Value = MockFile[];
+
+function mockListDirectory(files: MockFile[]) {
+  return vi.fn().mockResolvedValue({
+    files,
+    total_count: files.length,
+    is_truncated: false,
+  });
+}
+
+function makeProps(
+  overrides: {
+    selectionMode?: string;
+    multiple?: boolean;
+    value?: Value;
+    setValue?: (v: Value) => void;
+    files?: MockFile[];
+    list_directory?: ReturnType<typeof vi.fn>;
+    host?: HTMLElement;
+  } = {},
+): IPluginProps<Value, Record<string, unknown>> {
+  const files = overrides.files ?? FILES;
+  const list_directory = overrides.list_directory ?? mockListDirectory(files);
+  return {
+    data: {
+      initialPath: "/home/user",
+      filetypes: [],
+      selectionMode: overrides.selectionMode ?? "all",
+      multiple: overrides.multiple ?? true,
+      label: null,
+      restrictNavigation: false,
+    },
+    value: overrides.value ?? [],
+    setValue: overrides.setValue ?? vi.fn(),
+    host: overrides.host ?? document.createElement("div"),
+    functions: {
+      list_directory,
+    },
+  } as unknown as IPluginProps<Value, Record<string, unknown>>;
+}
+
+function renderBrowser(overrides: Parameters<typeof makeProps>[0] = {}) {
+  const listDirectory =
+    overrides.list_directory ?? mockListDirectory(overrides.files ?? FILES);
+  const result = render(
+    FileBrowserPlugin.render(
+      makeProps({ ...overrides, list_directory: listDirectory }) as Parameters<
+        typeof FileBrowserPlugin.render
+      >[0],
+    ),
+  );
+  return { ...result, listDirectory };
+}
+
+beforeAll(() => {
+  SetupMocks.resizeObserver();
+  store.set(initialModeAtom, "edit");
+});
+
+describe("FileBrowserPlugin keyboard accessibility", () => {
+  it("renders a row per file plus the parent row", async () => {
+    renderBrowser();
+    expect(await screen.findByText("docs")).toBeInTheDocument();
+    // parent "..", docs, a.txt, b.txt
+    expect(screen.getAllByRole("row")).toHaveLength(4);
+  });
+
+  it("marks the list as a multiselectable grid", async () => {
+    renderBrowser({ multiple: true });
+    await screen.findByText("docs");
+    const grid = screen.getByRole("grid");
+    expect(grid).toHaveAttribute("aria-multiselectable", "true");
+  });
+
+  it("does not select a non-selectable file on click (mode=directory)", async () => {
+    const setValue = vi.fn();
+    renderBrowser({ selectionMode: "directory", setValue });
+    const fileCell = await screen.findByText("a.txt");
+    fireEvent.click(fileCell.closest('[role="row"]')!);
+    expect(setValue).not.toHaveBeenCalled();
+  });
+
+  it("labels each selectable checkbox with the file name", async () => {
+    renderBrowser({ selectionMode: "all" });
+    await screen.findByText("docs");
+    expect(
+      screen.getByRole("checkbox", { name: "Select a.txt" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Select docs" }),
+    ).toBeInTheDocument();
+  });
+
+  it("keeps checkboxes out of the tab order", async () => {
+    renderBrowser({ selectionMode: "all" });
+    await screen.findByText("docs");
+    expect(
+      screen.getByRole("checkbox", { name: "Select a.txt" }),
+    ).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("places exactly one row in the tab order", async () => {
+    renderBrowser();
+    await screen.findByText("docs");
+    const rows = screen.getAllByRole("row");
+    const tabbable = rows.filter((r) => r.getAttribute("tabindex") === "0");
+    expect(tabbable).toHaveLength(1);
+    // the parent row is first and starts active
+    expect(rows[0]).toHaveAttribute("tabindex", "0");
+  });
+
+  it("resets the active row to the parent row after navigating", async () => {
+    renderBrowser({ selectionMode: "all" });
+    const docs = await screen.findByText("docs");
+    const docsRow = docs.closest('[role="row"]')!;
+    fireEvent.keyDown(docsRow, { key: "ArrowDown" }); // move active off the parent
+    fireEvent.click(docs); // navigate into "docs"
+    await screen.findByText("docs"); // listing reloads (mock returns same files)
+    const rows = screen.getAllByRole("row");
+    expect(rows[0]).toHaveAttribute("tabindex", "0");
+    // the focused row must match the only tabbable row
+    expect(rows[0]).toHaveFocus();
+  });
+
+  it("resets the active row when the listing refreshes in place", async () => {
+    // The cell's random-id changes when the cell re-renders, refetching the
+    // same path. A shrinking listing must not leave activeIndex out of bounds.
+    const parent = document.createElement("div");
+    parent.setAttribute("random-id", "a");
+    const host = document.createElement("div");
+    parent.append(host);
+    document.body.append(parent);
+
+    const list_directory = vi
+      .fn()
+      .mockResolvedValueOnce({
+        files: FILES,
+        total_count: FILES.length,
+        is_truncated: false,
+      })
+      .mockResolvedValue({
+        files: [FILES[0]],
+        total_count: 1,
+        is_truncated: false,
+      });
+
+    const props = () =>
+      FileBrowserPlugin.render(
+        makeProps({ host, list_directory }) as Parameters<
+          typeof FileBrowserPlugin.render
+        >[0],
+      );
+    const { rerender } = render(props());
+    await screen.findByText("a.txt");
+
+    // Move the active row to the last row, then trigger a same-path refresh.
+    fireEvent.keyDown(screen.getAllByRole("row")[0], { key: "End" });
+    expect(screen.getAllByRole("row").at(-1)).toHaveAttribute("tabindex", "0");
+
+    parent.setAttribute("random-id", "b");
+    rerender(props());
+
+    await waitFor(() =>
+      // parent ".." plus the single remaining file
+      expect(screen.getAllByRole("row")).toHaveLength(2),
+    );
+    const rows = screen.getAllByRole("row");
+    const tabbable = rows.filter((r) => r.getAttribute("tabindex") === "0");
+    expect(tabbable).toHaveLength(1);
+    expect(rows[0]).toHaveAttribute("tabindex", "0");
+  });
+
+  it("syncs the tabbable row to whichever row gains focus", async () => {
+    renderBrowser();
+    await screen.findByText("docs");
+    const rows = screen.getAllByRole("row"); // [.., docs, a.txt, b.txt]
+    expect(rows[0]).toHaveAttribute("tabindex", "0");
+
+    fireEvent.focus(rows[2]); // e.g. focus from a mouse click, not arrow keys
+    expect(rows[2]).toHaveAttribute("tabindex", "0");
+    expect(rows[0]).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("moves focus to the parent row after navigating from within the grid", async () => {
+    // Navigating into a directory unmounts the focused row; focus must follow
+    // to the parent row instead of falling back to the document body.
+    const list_directory = vi
+      .fn()
+      .mockResolvedValueOnce({
+        files: FILES,
+        total_count: FILES.length,
+        is_truncated: false,
+      })
+      .mockResolvedValue({
+        files: [
+          {
+            id: "99",
+            path: "/home/user/docs/inner.txt",
+            name: "inner.txt",
+            is_directory: false,
+          },
+        ],
+        total_count: 1,
+        is_truncated: false,
+      });
+    renderBrowser({ selectionMode: "all", list_directory });
+    await screen.findByText("docs");
+
+    const rows = screen.getAllByRole("row"); // [.., docs, a.txt, b.txt]
+    fireEvent.keyDown(rows[0], { key: "ArrowDown" }); // focus the docs row
+    expect(rows[1]).toHaveFocus();
+    fireEvent.keyDown(rows[1], { key: "Enter" }); // navigate into docs
+
+    await screen.findByText("inner.txt");
+    expect(screen.getAllByRole("row")[0]).toHaveFocus();
+  });
+
+  it("moves focus with arrows and clamps at the ends", async () => {
+    renderBrowser();
+    await screen.findByText("docs");
+    const rows = screen.getAllByRole("row"); // [.., docs, a.txt, b.txt]
+
+    fireEvent.keyDown(rows[0], { key: "ArrowDown" });
+    expect(rows[1]).toHaveFocus();
+    expect(rows[1]).toHaveAttribute("tabindex", "0");
+
+    fireEvent.keyDown(rows[1], { key: "ArrowUp" });
+    expect(rows[0]).toHaveFocus();
+
+    fireEvent.keyDown(rows[0], { key: "ArrowUp" }); // clamp at top
+    expect(rows[0]).toHaveFocus();
+
+    fireEvent.keyDown(rows[0], { key: "End" });
+    expect(rows[3]).toHaveFocus();
+
+    fireEvent.keyDown(rows[3], { key: "ArrowDown" }); // clamp at bottom
+    expect(rows[3]).toHaveFocus();
+
+    fireEvent.keyDown(rows[3], { key: "Home" });
+    expect(rows[0]).toHaveFocus();
+  });
+
+  it("Enter navigates into a directory", async () => {
+    const setValue = vi.fn();
+    const { listDirectory } = renderBrowser({
+      selectionMode: "all",
+      setValue,
+    });
+    await screen.findByText("docs");
+    fireEvent.keyDown(rowFor("docs"), { key: "Enter" });
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenCalledWith({ path: "/home/user/docs" }),
+    );
+    // navigation does not mutate value
+    expect(setValue).not.toHaveBeenCalled();
+  });
+
+  it("Enter toggles selection on a selectable file", async () => {
+    const setValue = vi.fn();
+    renderBrowser({ selectionMode: "all", multiple: true, setValue });
+    await screen.findByText("a.txt");
+    fireEvent.keyDown(rowFor("a.txt"), { key: "Enter" });
+    expect(setValue).toHaveBeenCalledWith([
+      expect.objectContaining({ path: "/home/user/a.txt" }),
+    ]);
+  });
+
+  it("Space toggles selection and never navigates", async () => {
+    const setValue = vi.fn();
+    renderBrowser({ selectionMode: "all", multiple: true, setValue });
+    await screen.findByText("docs");
+    // Space on a selectable directory selects it (does not navigate)
+    fireEvent.keyDown(rowFor("docs"), { key: " " });
+    expect(setValue).toHaveBeenCalledWith([
+      expect.objectContaining({ path: "/home/user/docs" }),
+    ]);
+  });
+
+  it("Space on the parent row is a no-op", async () => {
+    const setValue = vi.fn();
+    renderBrowser({ selectionMode: "all", setValue });
+    await screen.findByText("docs");
+    const parentRow = screen.getAllByRole("row")[0];
+    fireEvent.keyDown(parentRow, { key: " " });
+    expect(setValue).not.toHaveBeenCalled();
+  });
+});
+
+function rowFor(name: string): HTMLElement {
+  return screen.getByText(name).closest('[role="row"]') as HTMLElement;
+}

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -11,7 +11,7 @@ import type { IPluginProps } from "@/plugins/types";
 import { prettyError } from "@/utils/errors";
 import { Logger } from "@/utils/Logger";
 import { ErrorBanner } from "../common/error-banner";
-import { MODEL_MANAGER, type Model } from "./model";
+import { getMarimoInternal, MODEL_MANAGER, type Model } from "./model";
 import type { ModelState, WidgetModelId } from "./types";
 import { BINDING_MANAGER, WIDGET_DEF_REGISTRY } from "./widget-binding";
 
@@ -178,6 +178,9 @@ async function runAnyWidgetModule<T extends AnyWidgetState>(
     const binding = BINDING_MANAGER.getOrCreate(modelId);
     const render = await binding.bind(widgetDef, model);
     await render(el, signal);
+    // Replay current model values so render listeners observe hydrated state
+    // even if backend updates arrived before listeners were attached.
+    getMarimoInternal(model).reemitState();
   } catch (error) {
     Logger.error("Error rendering anywidget", error);
     el.classList.add("text-error");

package/src/plugins/impl/anywidget/__tests__/AnyWidgetPlugin.test.tsx

@@ -115,4 +115,38 @@ describe("LoadedSlot", () => {
       expect(newMockWidget.render).toHaveBeenCalled();
     });
   });
+
+  it("should hydrate view state even when listener attaches late", async () => {
+    mockModel = new Model(
+      { count: 8 },
+      {
+        sendUpdate: vi.fn().mockResolvedValue(undefined),
+        sendCustomMessage: vi.fn().mockResolvedValue(undefined),
+      },
+    );
+    MODEL_MANAGER.set(modelId, mockModel);
+
+    const lateListenerWidget = {
+      initialize: vi.fn(),
+      render: vi.fn(({ model, el }) => {
+        // Simulate a widget view that starts with a local default and
+        // relies on change events for hydration.
+        el.textContent = "count is 5";
+        const onCount = () => {
+          el.textContent = `count is ${model.get("count")}`;
+        };
+        model.on("change:count", onCount);
+        return () => model.off("change:count", onCount);
+      }),
+    };
+
+    const { container } = render(
+      <LoadedSlot {...mockProps} widget={lateListenerWidget} />,
+    );
+
+    await waitFor(() => {
+      expect(lateListenerWidget.render).toHaveBeenCalled();
+      expect(container.textContent).toContain("count is 8");
+    });
+  });
 });

package/src/plugins/impl/anywidget/__tests__/model.test.ts

@@ -272,6 +272,25 @@ describe("Model", () => {
     });
   });
 
+  describe("reemitState", () => {
+    it("should emit change events for current values without state changes", async () => {
+      const onFoo = vi.fn();
+      const onBar = vi.fn();
+      const onAny = vi.fn();
+
+      model.on("change:foo", onFoo);
+      model.on("change:bar", onBar);
+      model.on("change", onAny);
+
+      getMarimoInternal(model).reemitState();
+      await TestUtils.nextTick();
+
+      expect(onFoo).toHaveBeenCalledWith("test");
+      expect(onBar).toHaveBeenCalledWith(123);
+      expect(onAny).toHaveBeenCalledTimes(1);
+    });
+  });
+
   describe("emitCustomMessage", () => {
     it("should handle custom messages", () => {
       const callback = vi.fn();

package/src/plugins/impl/anywidget/model.ts

@@ -112,6 +112,10 @@ interface MarimoInternalApi<T extends ModelState> {
    * Update model state and emit change events for any differences.
    */
   updateAndEmitDiffs: (value: T) => void;
+  /**
+   * Re-emit current state as change events.
+   */
+  reemitState: () => void;
   /**
    * Emit a custom message to listeners.
    */
@@ -160,6 +164,7 @@ export class Model<T extends ModelState> implements AnyModel<T> {
    */
   [marimoSymbol]: MarimoInternalApi<T> = {
     updateAndEmitDiffs: (value: T) => this.#updateAndEmitDiffs(value),
+    reemitState: () => this.#reemitState(),
     emitCustomMessage: (
       message: Extract<AnyWidgetMessage, { method: "custom" }>,
       buffers?: readonly DataView[],
@@ -269,6 +274,16 @@ export class Model<T extends ModelState> implements AnyModel<T> {
     });
   }
 
+  #reemitState() {
+    for (const [key, value] of Object.entries(this.#data) as [
+      keyof T & string,
+      T[keyof T],
+    ][]) {
+      this.#emit(`change:${key}`, value);
+    }
+    this.#emitAnyChange();
+  }
+
   /**
    * When receiving a message from the backend.
    * We want to notify all listeners with `msg:custom`

package/src/plugins/impl/matplotlib/matplotlib-renderer.ts

@@ -292,7 +292,7 @@ export class MatplotlibRenderer {
     // Configure container
     container.tabIndex = -1;
     container.role = "application";
-    container.className = "relative inline-block select-none outline-none";
+    container.className = "relative inline-block select-none outline-hidden";
 
     // Create canvas
     const canvas = document.createElement("canvas");