@marimo-team/frontend 0.25.2-dev5 → 0.25.2-dev50

package/src/plugins/impl/CheckboxPlugin.tsx

@@ -46,7 +46,7 @@ const CheckboxComponent = ({
   const id = useId();
 
   return (
-    <Labeled label={data.label} align="right" id={id}>
+    <Labeled label={data.label} align="right" controlId={id}>
       <Checkbox
         data-testid="marimo-plugin-checkbox"
         checked={value}

package/src/plugins/impl/DatePickerPlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { type CalendarDate, parseDate } from "@internationalized/date";
-import type { JSX } from "react";
+import { type JSX, useId } from "react";
 import { z } from "zod";
 import { DatePicker } from "@/components/ui/date-picker";
 import type { IPlugin, IPluginProps, Setter } from "../types";
@@ -49,6 +49,7 @@ interface DatePickerProps extends Data {
 }
 
 const DatePickerComponent = (props: DatePickerProps): JSX.Element => {
+  const labelId = useId();
   const handleInput = (valueAsDate: CalendarDate | null) => {
     if (!valueAsDate) {
       return;
@@ -59,12 +60,13 @@ const DatePickerComponent = (props: DatePickerProps): JSX.Element => {
   };
 
   return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+    <Labeled labelId={labelId} label={props.label} fullWidth={props.fullWidth}>
       <DatePicker
         granularity="day"
         value={parseDate(props.value)}
         onChange={handleInput}
-        aria-label={props.label ?? "date picker"}
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={props.label ? undefined : "date picker"}
         minValue={parseDate(props.start)}
         maxValue={parseDate(props.stop)}
         isDisabled={props.disabled}

package/src/plugins/impl/DateRangePlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { type CalendarDate, parseDate } from "@internationalized/date";
-import type { JSX } from "react";
+import { type JSX, useId } from "react";
 import { z } from "zod";
 import { DateRangePicker } from "@/components/ui/date-picker";
 import type { IPlugin, IPluginProps, Setter } from "../types";
@@ -48,6 +48,7 @@ interface DateRangePickerProps extends Data {
 }
 
 const DateRangePickerComponent = (props: DateRangePickerProps): JSX.Element => {
+  const labelId = useId();
   const handleInput = (
     valueAsDateRange: {
       start: CalendarDate;
@@ -64,7 +65,7 @@ const DateRangePickerComponent = (props: DateRangePickerProps): JSX.Element => {
   };
 
   return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+    <Labeled labelId={labelId} label={props.label} fullWidth={props.fullWidth}>
       <DateRangePicker
         granularity="day"
         value={{
@@ -72,7 +73,8 @@ const DateRangePickerComponent = (props: DateRangePickerProps): JSX.Element => {
           end: parseDate(props.value[1]),
         }}
         onChange={handleInput}
-        aria-label={props.label ?? "date range picker"}
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={props.label ? undefined : "date range picker"}
         minValue={parseDate(props.start)}
         maxValue={parseDate(props.stop)}
         isDisabled={props.disabled}

package/src/plugins/impl/DateTimePickerPlugin.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { type CalendarDateTime, parseDateTime } from "@internationalized/date";
-import type { JSX } from "react";
+import { type JSX, useId } from "react";
 import { z } from "zod";
 import { DatePicker } from "@/components/ui/date-picker";
 import type { IPlugin, IPluginProps, Setter } from "../types";
@@ -50,6 +50,7 @@ interface DateTimePickerProps extends Data {
 }
 
 const DateTimePickerComponent = (props: DateTimePickerProps): JSX.Element => {
+  const labelId = useId();
   const handleInput = (valueAsDateTime: CalendarDateTime | null) => {
     if (!valueAsDateTime) {
       return;
@@ -63,12 +64,13 @@ const DateTimePickerComponent = (props: DateTimePickerProps): JSX.Element => {
   const parsedValue = props.value ? parseDateTime(props.value) : undefined;
 
   return (
-    <Labeled label={props.label} fullWidth={props.fullWidth}>
+    <Labeled labelId={labelId} label={props.label} fullWidth={props.fullWidth}>
       <DatePicker
         granularity={props.precision}
         value={parsedValue}
         onChange={handleInput}
-        aria-label={props.label ?? "date time picker"}
+        aria-labelledby={props.label ? labelId : undefined}
+        aria-label={props.label ? undefined : "date time picker"}
         minValue={parseDateTime(props.start)}
         maxValue={parseDateTime(props.stop)}
         isDisabled={props.disabled}

package/src/plugins/impl/DropdownPlugin.tsx

@@ -79,7 +79,7 @@ const Dropdown = (props: DropdownProps): JSX.Element => {
   const singleValue = value.length === 0 ? defaultValue : value[0];
 
   return (
-    <Labeled label={label} id={id} fullWidth={fullWidth}>
+    <Labeled label={label} controlId={id} fullWidth={fullWidth}>
       <NativeSelect
         data-testid="marimo-plugin-dropdown"
         onChange={(e) => {

package/src/plugins/impl/FileBrowserPlugin.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { type LucideIcon, CornerLeftUp } from "lucide-react";
+import { type LucideIcon, ChevronRightIcon, CornerLeftUp } from "lucide-react";
 import { type JSX, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { z } from "zod";
 import {
@@ -12,7 +12,6 @@ import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
-import { NativeSelect } from "@/components/ui/native-select";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
 import { toast } from "@/components/ui/use-toast";
 import { RANDOM_ID_ATTR } from "@/core/dom/ui-element-constants";
@@ -472,12 +471,19 @@ export const FileBrowser = ({
   //
   // Assumes that path contains at least one delimiter, which is true
   // only if this is an absolute path.
-  const { parentDirectories } = getProtocolAndParentDirectories({
+  const { protocol, parentDirectories } = getProtocolAndParentDirectories({
     path,
     delimiter,
     initialPath,
     restrictNavigation,
   });
+  const breadcrumbs = parentDirectories.toReversed().map((dir) => ({
+    path: dir,
+    name:
+      dir === protocol
+        ? protocol
+        : (dir.split(delimiter).findLast(Boolean) ?? dir),
+  }));
 
   const selectionKindLabel =
     selectionMode === "all"
@@ -515,18 +521,42 @@ export const FileBrowser = ({
     <div>
       {error && <Banner kind="danger">{error.message}</Banner>}
       {renderHeader()}
-      <NativeSelect
-        className="mt-2 w-full"
-        placeholder={path}
-        value={path}
-        onChange={(e) => setNewPath(e.target.value)}
-      >
-        {parentDirectories.map((dir) => (
-          <option value={dir} key={dir}>
-            {dir}
-          </option>
-        ))}
-      </NativeSelect>
+      <nav aria-label="Current directory" className="mt-2">
+        <ol className="flex flex-wrap items-center gap-0.5 text-sm">
+          {breadcrumbs.map((crumb, index) => {
+            const isCurrent = index === breadcrumbs.length - 1;
+            return (
+              <li key={crumb.path} className="flex items-center gap-0.5">
+                {index > 0 && (
+                  <ChevronRightIcon
+                    size={14}
+                    className="text-muted-foreground shrink-0"
+                    aria-hidden={true}
+                  />
+                )}
+                <button
+                  type="button"
+                  title={crumb.path}
+                  aria-current={isCurrent ? "page" : undefined}
+                  onClick={() => {
+                    if (!isCurrent) {
+                      setNewPath(crumb.path);
+                    }
+                  }}
+                  className={cn(
+                    "rounded px-1 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
+                    isCurrent
+                      ? "font-medium cursor-default"
+                      : "text-muted-foreground hover:bg-accent hover:text-foreground",
+                  )}
+                >
+                  {crumb.name}
+                </button>
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
 
       {data && typeof data.total_count === "number" && (
         <div className="text-xs text-muted-foreground mt-1 px-1">

package/src/plugins/impl/MultiselectPlugin.tsx

@@ -68,7 +68,7 @@ export const Multiselect = ({
   );
 
   return (
-    <Labeled label={label} id={id} fullWidth={fullWidth}>
+    <Labeled label={label} controlId={id} fullWidth={fullWidth}>
       <SelectList<string>
         id={id}
         options={items}

package/src/plugins/impl/NumberPlugin.tsx

@@ -70,7 +70,7 @@ const NumberComponent = (props: NumberComponentProps): JSX.Element => {
   };
 
   return (
-    <Labeled label={props.label} id={id} fullWidth={props.fullWidth}>
+    <Labeled label={props.label} controlId={id} fullWidth={props.fullWidth}>
       <NumberField
         data-testid="marimo-plugin-number-input"
         className={cn("min-w-[3em]", props.fullWidth && "w-full")}

package/src/plugins/impl/RadioPlugin.tsx

@@ -51,7 +51,11 @@ export const Radio = (props: RadioProps): JSX.Element => {
   const id = useId();
 
   return (
-    <Labeled label={props.label} id={id} align={props.inline ? "left" : "top"}>
+    <Labeled
+      label={props.label}
+      controlId={id}
+      align={props.inline ? "left" : "top"}
+    >
       <RadioGroup
         data-testid="marimo-plugin-radio"
         value={props.value ?? ""}

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -98,7 +98,7 @@ const RangeSliderComponent = ({
   const sliderElement = (
     <Labeled
       label={label}
-      id={id}
+      controlId={id}
       align={orientation === "horizontal" ? "left" : "top"}
       className={cn(fullWidth && "my-1 w-full")}
       fullWidth={fullWidth}

package/src/plugins/impl/SearchableSelect.tsx

@@ -33,7 +33,7 @@ export const SearchableSelect = (props: SearchableSelectProps): JSX.Element => {
   );
 
   return (
-    <Labeled label={label} id={id} fullWidth={fullWidth}>
+    <Labeled label={label} controlId={id} fullWidth={fullWidth}>
       <SelectList<string>
         id={id}
         options={items}

package/src/plugins/impl/SliderPlugin.tsx

@@ -224,7 +224,7 @@ const SliderComponent = ({
   const sliderElement = (
     <Labeled
       label={label}
-      id={id}
+      controlId={id}
       align={orientation === "horizontal" ? "left" : "top"}
       fullWidth={fullWidth}
       className={cn(fullWidth && "my-1 w-full")}

package/src/plugins/impl/SwitchPlugin.tsx

@@ -34,7 +34,12 @@ const SwitchComponent = ({
   const id = useId();
 
   return (
-    <Labeled label={data.label} align="right" id={id} labelClassName="ml-1">
+    <Labeled
+      label={data.label}
+      align="right"
+      controlId={id}
+      labelClassName="ml-1"
+    >
       <Switch
         data-testid="marimo-plugin-switch"
         checked={value}

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

@@ -1,6 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import { initialModeAtom } from "@/core/mode";
@@ -187,7 +193,7 @@ describe("FileBrowserPlugin keyboard accessibility", () => {
     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)
+    await within(screen.getByRole("grid")).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
@@ -361,3 +367,80 @@ describe("FileBrowserPlugin keyboard accessibility", () => {
 function rowFor(name: string): HTMLElement {
   return screen.getByText(name).closest('[role="row"]') as HTMLElement;
 }
+
+describe("FileBrowserPlugin breadcrumbs", () => {
+  function breadcrumbs() {
+    return within(
+      screen.getByRole("navigation", { name: "Current directory" }),
+    );
+  }
+
+  it("renders a crumb per ancestor with the current directory last", async () => {
+    renderBrowser();
+    await screen.findByText("docs");
+    const items = breadcrumbs().getAllByRole("listitem");
+    expect(items.map((li) => li.textContent)).toEqual(["/", "home", "user"]);
+    expect(breadcrumbs().getByRole("button", { name: "user" })).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+    expect(
+      breadcrumbs().getByRole("button", { name: "home" }),
+    ).not.toHaveAttribute("aria-current");
+  });
+
+  it("keeps focus on a crumb after navigating to it", async () => {
+    const { listDirectory } = renderBrowser();
+    await screen.findByText("docs");
+    const home = breadcrumbs().getByRole("button", { name: "home" });
+    home.focus();
+    fireEvent.click(home);
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/home" }),
+    );
+    const current = breadcrumbs().getByRole("button", { name: "home" });
+    expect(current).toHaveAttribute("aria-current", "page");
+    expect(current).toBe(home);
+    expect(current).toHaveFocus();
+  });
+
+  it("does not reload when the current crumb is clicked", async () => {
+    const { listDirectory } = renderBrowser();
+    await screen.findByText("docs");
+    fireEvent.click(breadcrumbs().getByRole("button", { name: "user" }));
+    expect(listDirectory).toHaveBeenCalledTimes(1);
+  });
+
+  it("navigates to an ancestor when a crumb is clicked", async () => {
+    const { listDirectory } = renderBrowser();
+    await screen.findByText("docs");
+    fireEvent.click(breadcrumbs().getByRole("button", { name: "home" }));
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/home" }),
+    );
+    fireEvent.click(breadcrumbs().getByRole("button", { name: "/" }));
+    await waitFor(() =>
+      expect(listDirectory).toHaveBeenLastCalledWith({ path: "/" }),
+    );
+  });
+
+  it("hides ancestors outside the initial path when navigation is restricted", async () => {
+    render(
+      <FileBrowser
+        initialPath="/home/user"
+        filetypes={[]}
+        selectionMode="all"
+        multiple={true}
+        label={null}
+        restrictNavigation={true}
+        value={[]}
+        setValue={vi.fn()}
+        host={document.createElement("div")}
+        list_directory={mockListDirectory(FILES)}
+      />,
+    );
+    await screen.findByText("docs");
+    const items = breadcrumbs().getAllByRole("listitem");
+    expect(items.map((li) => li.textContent)).toEqual(["user"]);
+  });
+});

package/src/plugins/impl/__tests__/widget-labels.test.tsx

@@ -0,0 +1,122 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { initialModeAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+import { DatePickerPlugin } from "../DatePickerPlugin";
+import { DateRangePickerPlugin } from "../DateRangePlugin";
+import { DateTimePickerPlugin } from "../DateTimePickerPlugin";
+
+const sharedProps = () => ({
+  host: document.createElement("div"),
+  setValue: vi.fn(),
+  functions: {},
+});
+
+const widgets = [
+  {
+    name: "date",
+    role: "group",
+    fallback: "date picker",
+    render: (label: string | null, disabled = false) =>
+      new DatePickerPlugin().render({
+        ...sharedProps(),
+        value: "2026-10-02",
+        data: {
+          label,
+          disabled,
+          start: "2026-01-01",
+          stop: "2026-12-31",
+          fullWidth: false,
+        },
+      }),
+  },
+  {
+    name: "datetime",
+    role: "group",
+    fallback: "date time picker",
+    render: (label: string | null, disabled = false) =>
+      new DateTimePickerPlugin().render({
+        ...sharedProps(),
+        value: "2026-10-02T12:00:00",
+        data: {
+          label,
+          disabled,
+          start: "2026-01-01T00:00:00",
+          stop: "2026-12-31T23:59:59",
+          precision: "minute",
+          fullWidth: false,
+        },
+      }),
+  },
+  {
+    name: "date range",
+    role: "group",
+    fallback: "date range picker",
+    render: (label: string | null, disabled = false) =>
+      new DateRangePickerPlugin().render({
+        ...sharedProps(),
+        value: ["2026-10-02", "2026-10-03"],
+        data: {
+          label,
+          disabled,
+          start: "2026-01-01",
+          stop: "2026-12-31",
+          fullWidth: false,
+        },
+      }),
+  },
+];
+
+beforeEach(() => store.set(initialModeAtom, "edit"));
+
+describe.each(widgets)("$name accessible labels", (widget) => {
+  it("uses rendered formatting and decoded entities, and follows label updates", () => {
+    const { getByRole, rerender } = render(
+      widget.render("<span>Visit <strong>date</strong> &amp; time</span>"),
+    );
+    expect(getByRole(widget.role, { name: "Visit date & time" })).toBeTruthy();
+    rerender(widget.render("<span>Updated <em>label</em></span>"));
+    expect(getByRole(widget.role, { name: "Updated label" })).toBeTruthy();
+    rerender(widget.render(null));
+    expect(getByRole(widget.role, { name: widget.fallback })).toBeTruthy();
+  });
+
+  it.each([null, ""])("uses the fallback when label is %s", (label) => {
+    const { getByRole } = render(widget.render(label));
+    expect(getByRole(widget.role, { name: widget.fallback })).toBeTruthy();
+  });
+
+  it("names the calendar button and every editable segment", () => {
+    const { getByRole, getAllByRole } = render(
+      widget.render("<strong>Visit</strong> &amp; time"),
+    );
+    expect(getByRole("button", { name: "Calendar Visit & time" })).toBeTruthy();
+    for (const segment of getAllByRole("spinbutton")) {
+      expect(segment).toHaveAccessibleName(/Visit & time/);
+    }
+  });
+
+  it("preserves disabled controls with a formatted label", () => {
+    const { getByRole, getAllByRole } = render(
+      widget.render("<strong>Visit</strong>", true),
+    );
+    expect(getByRole("button", { name: "Calendar Visit" })).toBeDisabled();
+    for (const segment of getAllByRole("spinbutton")) {
+      expect(segment).toHaveAttribute("aria-disabled", "true");
+    }
+  });
+
+  it("keeps labels distinct for multiple widgets", () => {
+    const { getByRole } = render(
+      <>
+        {widget.render("First")}
+        {widget.render("Second")}
+      </>,
+    );
+    expect(getByRole(widget.role, { name: "First" })).not.toBe(
+      getByRole(widget.role, { name: "Second" }),
+    );
+  });
+});

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -27,7 +27,7 @@ const messageSchema = z.array(
     role: z.enum(["system", "user", "assistant"]),
     content: z.string().nullable(),
     parts: z.array(z.any()),
-    metadata: z.any().nullable(),
+    metadata: z.any().optional(),
   }),
 );
 

package/src/plugins/impl/common/labeled.tsx

@@ -9,7 +9,8 @@ interface Props {
   label: string | null | undefined;
   className?: string;
   labelClassName?: string;
-  id?: string;
+  labelId?: string;
+  controlId?: string;
   fullWidth?: boolean;
   /**
    * Align the label to the top, left, or right of the component.
@@ -27,8 +28,9 @@ export const Labeled: React.FC<PropsWithChildren<Props>> = ({
   align = "left",
   className,
   labelClassName,
+  labelId,
   fullWidth,
-  id,
+  controlId,
 }) => {
   // If fullWidth is true, force align to be "top"
   if (fullWidth) {
@@ -45,7 +47,11 @@ export const Labeled: React.FC<PropsWithChildren<Props>> = ({
 
   const labelElement = (
     <div part="label" className="inline-flex items-center m-0 p-0">
-      <Label htmlFor={id} className={cn("font-prose", labelClassName)}>
+      <Label
+        id={labelId}
+        htmlFor={controlId}
+        className={cn("font-prose", labelClassName)}
+      >
         {renderHTML({ html: label })}
       </Label>
     </div>