@marimo-team/frontend 0.25.2-dev91 → 0.25.2-dev92

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-CqJKdR1j.js"></script>
+    <script type="module" crossorigin src="./assets/index-C6-WDESh.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-B0Z9INg1.js">
     <link rel="modulepreload" crossorigin href="./assets/react-CUdNIagt.js">
     <link rel="modulepreload" crossorigin href="./assets/compiler-runtime-BQ9S8nyo.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.25.2-dev91",
+  "version": "0.25.2-dev92",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/data-table/charts/__tests__/slider-field.test.tsx

@@ -0,0 +1,54 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useForm, useWatch } from "react-hook-form";
+import { describe, expect, test } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { Form } from "@/components/ui/form";
+import { SliderField } from "../components/form-fields";
+
+SetupMocks.resizeObserver();
+function Harness({ label = "Opacity" }: { label?: string }) {
+  const form = useForm({ defaultValues: { xAxis: { width: 400 } } });
+  const value = useWatch({ control: form.control, name: "xAxis.width" });
+  return (
+    <Form {...form}>
+      <SliderField
+        fieldName="xAxis.width"
+        label={label}
+        defaultValue={400}
+        start={200}
+        stop={800}
+        step={10}
+      />
+      <output aria-label="Current opacity">{value}</output>
+    </Form>
+  );
+}
+
+describe("SliderField", () => {
+  test("names the chart-form thumb and preserves keyboard value updates", () => {
+    const { rerender } = render(<Harness />);
+    fireEvent.keyDown(screen.getByRole("slider", { name: "Opacity" }), {
+      key: "ArrowRight",
+    });
+    expect(screen.getByLabelText("Current opacity")).toHaveTextContent("410");
+    rerender(<Harness label="Updated opacity" />);
+    expect(
+      screen.getByRole("slider", { name: "Updated opacity" }),
+    ).toHaveAttribute("aria-valuenow", "410");
+  });
+
+  test("independently associates repeated chart form instances", () => {
+    render(
+      <>
+        <Harness />
+        <Harness />
+      </>,
+    );
+    const thumbs = screen.getAllByRole("slider", { name: "Opacity" });
+    expect(thumbs).toHaveLength(2);
+    expect(thumbs[0].getAttribute("aria-labelledby")).not.toBe(
+      thumbs[1].getAttribute("aria-labelledby"),
+    );
+  });
+});

package/src/components/data-table/charts/components/form-fields.tsx

@@ -358,6 +358,7 @@ export const SliderField = ({
   className,
 }: SliderFieldProps) => {
   const form = useFormContext();
+  const labelId = React.useId();
 
   return (
     <FormField
@@ -378,10 +379,11 @@ export const SliderField = ({
           <FormItem
             className={cn("flex flex-row items-center gap-2 w-1/2", className)}
           >
-            <FormLabel>{label}</FormLabel>
+            <FormLabel id={labelId}>{label}</FormLabel>
             <FormControl>
               <Slider
                 {...field}
+                aria-labelledby={labelId}
                 id={fieldName}
                 className="relative flex items-center select-none"
                 value={[numericValue]}

package/src/components/ui/__tests__/slider.test.tsx

@@ -27,4 +27,11 @@ describe("Slider", () => {
 
     expect(onValueChange).toHaveBeenCalledWith([2 * step]);
   });
+
+  it("forwards a direct accessible name to the thumb", () => {
+    const { getByRole } = render(
+      <Slider aria-label="Opacity" value={[50]} valueMap={(v) => v} />,
+    );
+    expect(getByRole("slider")).toHaveAccessibleName("Opacity");
+  });
 });

package/src/components/ui/slider.tsx

@@ -57,6 +57,8 @@ const Slider = React.forwardRef<
         <TooltipRoot delayDuration={0} open={open}>
           <TooltipTrigger asChild={true}>
             <SliderPrimitive.Thumb
+              aria-label={props["aria-label"]}
+              aria-labelledby={props["aria-labelledby"]}
               data-testid="thumb"
               className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
               onFocus={openActions.setTrue}

package/src/plugins/impl/SliderPlugin.tsx

@@ -152,6 +152,7 @@ const SliderComponent = ({
   disabled,
 }: SliderProps): JSX.Element => {
   const id = useId();
+  const labelId = useId();
   const { locale } = useLocale();
 
   // Hold internal value
@@ -225,6 +226,7 @@ const SliderComponent = ({
     <Labeled
       label={label}
       controlId={id}
+      labelId={labelId}
       align={orientation === "horizontal" ? "left" : "top"}
       fullWidth={fullWidth}
       className={cn(fullWidth && "my-1 w-full")}
@@ -238,6 +240,8 @@ const SliderComponent = ({
       >
         <Slider
           id={id}
+          aria-labelledby={label ? labelId : undefined}
+          aria-label={label ? undefined : "Slider"}
           className={cn(
             "relative flex items-center select-none",
             !fullWidth && "data-[orientation=horizontal]:w-36 ",

package/src/plugins/impl/__test__/slider-labels.test.tsx

@@ -0,0 +1,136 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { SliderPlugin } from "../SliderPlugin";
+
+SetupMocks.resizeObserver();
+const plugin = new SliderPlugin();
+function props(label: string | null) {
+  return {
+    host: document.createElement("div"),
+    value: 5,
+    setValue: vi.fn(),
+    functions: {},
+    data: plugin.validator.parse({
+      initialValue: 5,
+      start: 0,
+      stop: 10,
+      step: 1,
+      steps: null,
+      label,
+    }),
+  };
+}
+
+describe("SliderPlugin accessible labels", () => {
+  test("names the actual thumb from formatted labels and updates its reference", () => {
+    const initial = props("<strong>Price &amp; tax</strong>");
+    const { rerender } = render(plugin.render(initial));
+    const thumb = screen.getByRole("slider", { name: "Price & tax" });
+    const labelId = thumb.getAttribute("aria-labelledby");
+    rerender(
+      plugin.render({
+        ...initial,
+        data: { ...initial.data, label: "Updated price" },
+      }),
+    );
+    const updatedThumb = screen.getByRole("slider", { name: "Updated price" });
+    expect(updatedThumb).toHaveAccessibleName("Updated price");
+    expect(updatedThumb).toHaveAttribute("aria-labelledby", labelId);
+    rerender(
+      plugin.render({ ...initial, data: { ...initial.data, label: null } }),
+    );
+    expect(screen.getByRole("slider")).toHaveAccessibleName("Slider");
+    expect(screen.getByRole("slider")).not.toHaveAttribute("aria-labelledby");
+  });
+
+  test.each([null, ""])("retains a fallback name for label %s", (label) => {
+    render(plugin.render(props(label)));
+    expect(screen.getByRole("slider")).toHaveAccessibleName("Slider");
+  });
+
+  test("keeps repeated widget labels independently associated", () => {
+    render(
+      <>
+        {plugin.render(props("Price"))}
+        {plugin.render(props("Price"))}
+      </>,
+    );
+    const thumbs = screen.getAllByRole("slider", { name: "Price" });
+    expect(thumbs).toHaveLength(2);
+    expect(thumbs[0].getAttribute("aria-labelledby")).not.toBe(
+      thumbs[1].getAttribute("aria-labelledby"),
+    );
+  });
+
+  test.each([false, true])(
+    "preserves keyboard commits with debounce=%s",
+    (debounce) => {
+      const initial = props("Price");
+      render(
+        plugin.render({ ...initial, data: { ...initial.data, debounce } }),
+      );
+      fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowRight" });
+      expect(initial.setValue).toHaveBeenCalledWith(6);
+    },
+  );
+
+  test("preserves maximum and minimum keyboard boundaries", () => {
+    const initial = props("Price");
+    const { rerender } = render(plugin.render({ ...initial, value: 10 }));
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowRight" });
+    expect(initial.setValue).not.toHaveBeenCalled();
+    rerender(plugin.render({ ...initial, value: 0 }));
+    fireEvent.keyDown(screen.getByRole("slider"), { key: "ArrowLeft" });
+    expect(initial.setValue).not.toHaveBeenCalled();
+  });
+
+  test("retains the name while disabled and removes keyboard focusability", () => {
+    const initial = props("Price");
+    render(
+      plugin.render({ ...initial, data: { ...initial.data, disabled: true } }),
+    );
+    const thumb = screen.getByRole("slider", { name: "Price" });
+    expect(thumb).not.toHaveAttribute("tabindex");
+    expect(thumb).toHaveAttribute("data-disabled");
+  });
+
+  test("preserves vertical keyboard interaction", () => {
+    const initial = props("Price");
+    render(
+      plugin.render({
+        ...initial,
+        data: { ...initial.data, orientation: "vertical" },
+      }),
+    );
+    const thumb = screen.getByRole("slider", { name: "Price" });
+    expect(thumb).toHaveAttribute("aria-orientation", "vertical");
+    fireEvent.keyDown(thumb, { key: "ArrowUp" });
+    expect(initial.setValue).toHaveBeenCalledWith(6);
+  });
+
+  test("preserves mapped values while naming the index-space thumb", () => {
+    const initial = props("Mapped price");
+    render(
+      plugin.render({
+        ...initial,
+        value: 1,
+        data: {
+          ...initial.data,
+          start: 0,
+          stop: 2,
+          steps: [10, 20, 50],
+          showValue: true,
+        },
+      }),
+    );
+    expect(screen.getByText("20")).toBeInTheDocument();
+    fireEvent.keyDown(screen.getByRole("slider", { name: "Mapped price" }), {
+      key: "ArrowRight",
+    });
+    expect(initial.setValue).toHaveBeenCalledWith(2);
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "2");
+    expect(screen.getByRole("tooltip")).toHaveTextContent("50");
+  });
+});