@multiplatform.one/components 7.7.6 → 7.8.0

package/src/DropdownMenu/index.tsx

@@ -23,6 +23,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -290,10 +291,38 @@ function DropdownMenuRoot({
   });
   const pendingFocusRef = useRef<"first" | "last">("first");
 
+  // Content's onCloseAutoFocus, read off the Content child below during the
+  // same render. A ref because the child scan happens after these callbacks
+  // are defined, and both close paths have to reach the same handler.
+  const closeAutoFocusRef = useRef<DropdownMenuContentProps["onCloseAutoFocus"]>(undefined);
+  // Notify on the actual state transition, including parent-controlled closes.
+  // A rejected controlled close request must not move focus out of an open menu.
+  const wasOpenRef = useRef(false);
+  const skipReturnFocusRef = useRef(false);
+
+  const fireCloseAutoFocus = useCallback(() => {
+    const handler = closeAutoFocusRef.current;
+    if (!handler) return;
+    handler({
+      preventDefault: () => {
+        skipReturnFocusRef.current = true;
+      },
+      get defaultPrevented() {
+        return skipReturnFocusRef.current;
+      },
+    });
+  }, []);
+
   const close = useCallback(() => {
     setOpen(false);
   }, [setOpen]);
 
+  useLayoutEffect(() => {
+    if (wasOpenRef.current && !open) fireCloseAutoFocus();
+    wasOpenRef.current = !!open;
+    if (open) skipReturnFocusRef.current = false;
+  }, [open, fireCloseAutoFocus]);
+
   const ctx = useMemo<DropdownMenuContextValue>(
     () => ({ open, setOpen, close, closeOnSelect, pendingFocusRef }),
     [open, setOpen, close, closeOnSelect],
@@ -311,6 +340,8 @@ function DropdownMenuRoot({
   let body: ReactNode = null;
   let contentMaxHeight = maxHeight;
   let contentMaxWidth: number | undefined;
+  let contentAriaLabel: string | undefined;
+  closeAutoFocusRef.current = undefined;
   if (items) {
     body = renderEntries(items);
   } else if (Array.isArray(children) || isValidElement(children)) {
@@ -326,14 +357,13 @@ function DropdownMenuRoot({
       if (type === DropdownMenuTrigger) {
         triggerParts.push((child.props as { children?: ReactNode }).children);
       } else if (type === DropdownMenuContent) {
-        const contentProps = child.props as {
-          children?: ReactNode;
-          maxHeight?: number;
-          maxWidth?: number;
-        };
+        const contentProps = child.props as DropdownMenuContentProps;
         contentParts.push(contentProps.children);
         if (contentProps.maxHeight != null) contentMaxHeight = contentProps.maxHeight;
         if (contentProps.maxWidth != null) contentMaxWidth = contentProps.maxWidth;
+        if (contentProps.onCloseAutoFocus)
+          closeAutoFocusRef.current = contentProps.onCloseAutoFocus;
+        if (contentProps["aria-label"] != null) contentAriaLabel = contentProps["aria-label"];
       } else {
         triggerParts.push(child);
       }
@@ -347,12 +377,17 @@ function DropdownMenuRoot({
       <FloatingPanel
         open={open}
         onOpenChange={setOpen}
+        skipReturnFocusRef={skipReturnFocusRef}
         trigger={decorateTrigger(trigger, open, onArrow)}
         contentPadding="none"
         {...coverContract}
         {...(placement ? { placement } : {})}
       >
-        <DropdownMenuList maxHeight={contentMaxHeight} maxWidth={contentMaxWidth}>
+        <DropdownMenuList
+          maxHeight={contentMaxHeight}
+          maxWidth={contentMaxWidth}
+          aria-label={contentAriaLabel}
+        >
           {body}
         </DropdownMenuList>
       </FloatingPanel>
@@ -387,6 +422,29 @@ export interface DropdownMenuContentProps {
    * owns this now — kept so existing callers type-check.
    */
   minWidth?: number;
+  /**
+   * Fired as the menu closes, before focus would return to the trigger.
+   * Call `preventDefault()` to keep the trigger from taking focus back —
+   * the rich-text toolbars do exactly that and hand focus to the editor
+   * instead, so the user can keep typing after picking a heading or a list.
+   */
+  onCloseAutoFocus?: (event: DropdownMenuCloseAutoFocusEvent) => void;
+  /**
+   * Accessible name for the menu. Lands on the `role="menu"` element, which
+   * is the node a screen reader announces — a facet menu whose trigger is an
+   * icon has no other name. DataTableFacetMenu passes its column label.
+   */
+  "aria-label"?: string;
+}
+
+/**
+ * The minimal preventable event `onCloseAutoFocus` receives. Deliberately not
+ * a DOM event: the close can originate from a native sheet or a keyboard
+ * dismissal where there is no DOM event to forward.
+ */
+export interface DropdownMenuCloseAutoFocusEvent {
+  preventDefault: () => void;
+  readonly defaultPrevented: boolean;
 }
 
 function DropdownMenuContent({ children }: DropdownMenuContentProps) {
@@ -397,10 +455,12 @@ function DropdownMenuList({
   children,
   maxHeight,
   maxWidth,
+  "aria-label": ariaLabel,
 }: {
   children?: ReactNode;
   maxHeight?: number;
   maxWidth?: number;
+  "aria-label"?: string;
 }) {
   const ctx = useDropdownMenuContext("Content");
   const innerRef = useRef<TamaguiElement | null>(null);
@@ -494,6 +554,7 @@ function DropdownMenuList({
     <YStack
       ref={innerRef}
       role="menu"
+      {...(ariaLabel ? { "aria-label": ariaLabel } : {})}
       data-dismiss-class="commit"
       data-mp-width-mode="at-least-trigger"
       width="100%"

package/src/LinearGradient.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Text, YStack } from "tamagui";
-import { LinearGradient } from "./tamagui";
+import { Text } from "./Text";
+import { LinearGradient, YStack } from "./tamagui";
 
 const meta: Meta<typeof LinearGradient> = {
   title: "Components/LinearGradient",

package/src/Meter/Meter.spec.tsx

@@ -8,7 +8,7 @@
  */
 import { cleanup, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset, resolveRadiusClass } from "@multiplatform.one/theme";
+import { Preset, resolveRadiusClass, type Knobs } from "@multiplatform.one/theme";
 import type { ReactElement } from "react";
 import { Theme } from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
@@ -36,7 +36,7 @@ const BATTERY = { min: 0, max: 100, low: 10, high: 20, optimum: 100 } as const;
 function renderMeter(
   ui: ReactElement,
   scheme: "light" | "dark" = "light",
-  knobs?: { borderRadius?: "none" | "small" | "medium" | "large" | "full" },
+  knobs?: Partial<Pick<Knobs, "borderRadius" | "fillStyle" | "borderWidth">>,
 ) {
   return renderWithProviders(
     <Theme name={scheme}>
@@ -192,6 +192,63 @@ describe("Meter a11y and the Progress semantic line", () => {
     expect(formatMeterValue({ value: 78, min: 0, max: 100, format: "percent" })).toMatch(/%$/);
     expect(formatMeterValue({ value: undefined, min: 0, max: 8, format: "number" })).toBe("\u2014");
   });
+
+  it("outlined chrome spreads inputSurface — borderWidth is the knob, not a hardcoded 1", () => {
+    const { container: filled } = renderMeter(
+      <Meter label="Disk" value={5} min={0} max={8} />,
+      "light",
+      { fillStyle: "filled", borderWidth: "large" },
+    );
+    expect(rail(filled).getAttribute("data-meter-border-width")).toBe("0");
+
+    cleanup();
+    const { container: hairline } = renderMeter(
+      <Meter label="Disk" value={5} min={0} max={8} />,
+      "light",
+      { fillStyle: "outlined", borderWidth: "none" },
+    );
+    // LC-86: outlined + none still draws the small hairline, not 0.
+    expect(rail(hairline).getAttribute("data-meter-border-width")).toBe("0.5");
+
+    cleanup();
+    const { container: large } = renderMeter(
+      <Meter label="Disk" value={5} min={0} max={8} />,
+      "light",
+      { fillStyle: "outlined", borderWidth: "large" },
+    );
+    expect(rail(large).getAttribute("data-meter-border-width")).toBe("2");
+  });
+
+  it("loading is a skeleton, not an indeterminate meter", () => {
+    const { container } = renderMeter(<Meter label="Disk usage" min={0} max={8} loading />);
+    expect(container.querySelector("[role='meter']")).toBeNull();
+    expect(container.querySelector("[role='progressbar']")).toBeNull();
+  });
+
+  for (const discrete of [0, 5]) {
+    for (const [borderWidth, expected] of [
+      ["none", "0.5px"],
+      ["small", "0.5px"],
+      ["large", "2px"],
+    ] as const) {
+      it(`paints ${borderWidth} outline on ${discrete ? "every segment" : "the continuous rail"}`, () => {
+        const { container } = renderMeter(
+          <Meter label="Disk" value={5} min={0} max={8} segments={discrete} />,
+          "light",
+          { fillStyle: "outlined", borderWidth },
+        );
+        const parts = discrete
+          ? Array.from(container.querySelector("[data-meter-segments]")!.children)
+          : [rail(container)];
+        expect(parts).toHaveLength(discrete || 1);
+        for (const part of parts) expect(getComputedStyle(part).borderTopWidth).toBe(expected);
+        if (discrete) {
+          expect(getComputedStyle(parts[0]).backgroundColor).not.toBe("transparent");
+          expect(getComputedStyle(parts.at(-1)!).backgroundColor).toBe("transparent");
+        }
+      });
+    }
+  }
 });
 
 describe("barrel exports (the ProgressCard export gap)", () => {

package/src/Meter/Meter.stories.tsx

@@ -117,3 +117,41 @@ export const Unknown: Story = {
     unit: "GB",
   },
 };
+
+export const Loading: Story = {
+  args: {
+    label: "Disk usage",
+    min: 0,
+    max: 8,
+    unit: "GB",
+    loading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disk usage",
+    value: 6.2,
+    min: 0,
+    max: 8,
+    low: 6.4,
+    high: 7.6,
+    optimum: 0,
+    unit: "GB",
+    disabled: true,
+  },
+};
+
+export const Inline: Story = {
+  args: {
+    label: "Disk usage",
+    value: 6.2,
+    min: 0,
+    max: 8,
+    low: 6.4,
+    high: 7.6,
+    optimum: 0,
+    format: "percent",
+    layout: "inline",
+  },
+};

package/src/Meter/index.tsx

@@ -149,6 +149,11 @@ export function Meter({
   const outlined = knobProps.outlined;
   const trackH = meterTrackHeightPx(size);
   const railRadius = resolveMeterRailRadius(stop);
+  // Spread the fragment (AGENTS.md). Hardcoded 1px ignored the borderWidth knob.
+  const outlineChrome = outlined
+    ? { ...knobProps.inputSurface, borderColor: "$color6" as const }
+    : { borderWidth: 0 };
+  const paintedBorder = outlined ? knobProps.inputSurface.borderWidth : 0;
   const known = value != null && Number.isFinite(value);
   const zone = known
     ? resolveMeterZone({ value: value as number, min, max, low, high, optimum })
@@ -209,9 +214,8 @@ export function Meter({
           width={19}
           height={trackH}
           borderRadius={railRadius}
+          {...outlineChrome}
           backgroundColor={i < filledCount ? paint.fill : outlined ? "transparent" : METER_TRACK}
-          borderWidth={outlined ? 1 : 0}
-          borderColor={outlined ? "$color6" : undefined}
         />
       ))}
     </XStack>
@@ -220,9 +224,8 @@ export function Meter({
       height={trackH}
       minHeight={trackH}
       borderRadius={railRadius}
+      {...outlineChrome}
       backgroundColor={outlined ? "transparent" : METER_TRACK}
-      borderWidth={outlined ? 1 : 0}
-      borderColor={outlined ? "$color6" : undefined}
       opacity={disabled ? 0.5 : 1}
       role="meter"
       aria-label={label}
@@ -232,6 +235,7 @@ export function Meter({
       aria-valuetext={valuetext}
       data-meter-radius-class={METER_RADIUS_CLASS}
       data-meter-rail-radius={railRadius}
+      data-meter-border-width={paintedBorder}
       data-meter-zone={zone}
       data-meter-fill={known && ratio != null ? paint.fill : undefined}
       data-meter-track-height={trackH}
@@ -261,6 +265,7 @@ export function Meter({
         aria-valuetext={valuetext}
         data-meter-radius-class={METER_RADIUS_CLASS}
         data-meter-rail-radius={railRadius}
+        data-meter-border-width={paintedBorder}
         data-meter-zone={zone}
         data-meter-fill={known ? paint.fill : undefined}
         data-meter-track-height={trackH}

package/src/Panel.stories.tsx

@@ -52,7 +52,7 @@ export const InteractiveContent: Story = {
       <SizableText fontWeight="600">Interactive content</SizableText>
       <Input placeholder="Focus me" inputProps={{ "aria-label": "Focus demo" }} />
       <XStack gap="$2">
-        <Button variant="outlined">Cancel</Button>
+        <Button>Cancel</Button>
         <Button>Submit</Button>
       </XStack>
     </Panel>

package/src/SortableList/SortableList.spec.tsx

@@ -138,10 +138,10 @@ describe("SortableList", () => {
 
   it("renders emptyMessage when there are no rows (board 04)", () => {
     const { container } = renderWithProviders(
-      <SortableList
+      <SortableList<{ id: string; label: string }>
         items={[]}
-        getId={(item: { id: string }) => item.id}
-        getLabel={(item: { label: string }) => item.label}
+        getId={(item) => item.id}
+        getLabel={(item) => item.label}
         emptyMessage="No rows yet"
       />,
     );

package/src/Tabs/Tabs.spec.tsx

@@ -246,6 +246,48 @@ describe("Tabs", () => {
     expect(two).toHaveAttribute("aria-selected", "true");
   });
 
+  it("selects the focused tab automatically when navigating with arrows", async () => {
+    renderWithProviders(<Tabs items={items} variant="band" />);
+    const one = screen.getByRole("tab", { name: "One" });
+    const two = screen.getByRole("tab", { name: "Two" });
+    one.focus();
+    fireEvent.keyDown(one, { key: "ArrowRight" });
+    await waitFor(() => expect(two).toHaveFocus());
+    expect(two).toHaveAttribute("aria-selected", "true");
+    expect(screen.getByText("Panel two")).toBeVisible();
+  });
+
+  it("reverses horizontal arrow navigation in RTL", async () => {
+    document.documentElement.dir = "rtl";
+    renderWithProviders(<Tabs items={items} defaultValue="two" />);
+    const two = screen.getByRole("tab", { name: "Two" });
+    const one = screen.getByRole("tab", { name: "One" });
+    two.focus();
+    fireEvent.keyDown(two, { key: "ArrowRight" });
+    await waitFor(() => expect(one).toHaveFocus());
+    expect(one).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("stops at the last enabled tab when looping is disabled", async () => {
+    renderWithProviders(<Tabs items={items} loop={false} />);
+    const one = screen.getByRole("tab", { name: "One" });
+    const two = screen.getByRole("tab", { name: "Two" });
+    one.focus();
+    fireEvent.keyDown(one, { key: "End" });
+    await waitFor(() => expect(two).toHaveFocus());
+    fireEvent.keyDown(two, { key: "ArrowRight" });
+    expect(two).toHaveFocus();
+    expect(two).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("removes every tab from the page tab order when the strip is disabled", () => {
+    renderWithProviders(<Tabs items={items} disabled />);
+    for (const tab of screen.getAllByRole("tab")) {
+      expect(tab.tabIndex).toBe(-1);
+      expect(tab).toHaveAttribute("aria-disabled", "true");
+    }
+  });
+
   it("keeps an enabled entry point when the selected tab is disabled", () => {
     renderWithProviders(<Tabs items={items} value="three" />);
     const stops = screen.getAllByRole("tab").filter((tab) => tab.tabIndex === 0);
@@ -261,13 +303,11 @@ describe("Tabs", () => {
     expect(container.querySelector("[data-tabs-indicator]")).toBeNull();
   });
 
-  it("lets equal-band chrome shrink inside each allocated tab without horizontal insets", () => {
+  it("lets equal-band chrome shrink inside each allocated tab", () => {
     renderWithProviders(<Tabs items={items} variant="band" />);
     const chrome = screen.getByRole("tab", { name: "One" }).firstElementChild!;
     expect(chrome.className).toContain("_fs-1");
     expect(chrome.className).toContain("_fb-0px");
-    expect(chrome.className).toContain("_pl-0px");
-    expect(chrome.className).toContain("_pr-0px");
   });
 
   it("ariaLabel overrides the default tablist name", () => {

package/src/Tabs/Tabs.stories.tsx

@@ -27,6 +27,7 @@ const meta: Meta<typeof Tabs> = {
   },
   argTypes: {
     variant: { control: "select", options: ["underline", "contained", "band"] },
+    distribution: { control: "select", options: ["content", "equal"] },
     size: { control: "select", options: ["$2", "$3", "$4", "$5"] },
     accent: { control: "boolean" },
     error: { control: "boolean" },
@@ -348,8 +349,16 @@ export const EqualBand: Story = {
 
 export const IntrinsicHorizontalHost: Story = {
   render: () => (
-    <ScrollView horizontal width={390}>
+    <ScrollView horizontal width={390} maxWidth="100%">
       <Tabs items={baseItems} ariaLabel="Intrinsic tabs" />
     </ScrollView>
   ),
 };
+
+export const EqualSmall: Story = {
+  render: () => (
+    <YStack width={390} maxWidth="100%">
+      <Tabs items={baseItems} distribution="equal" size="$2" ariaLabel="Compact equal sections" />
+    </YStack>
+  ),
+};

package/src/Tabs/index.tsx

@@ -534,6 +534,12 @@ function TabsRoot({
           item.value === anchorValue &&
           itemIndex === items.findIndex((i) => i.value === anchorValue);
         const kbRing = kbFocusValue === item.value;
+        const feedbackBackground =
+          pressValue === item.value
+            ? componentColors.interactive.hover
+            : hoverValue === item.value
+              ? componentColors.interactive.background
+              : "transparent";
         return (
           <Trigger
             key={item.value}
@@ -545,7 +551,7 @@ function TabsRoot({
             }}
             flex={equalDistribution ? 1 : undefined}
             minWidth={0}
-            minHeight={isBand ? MIN_PRESS_TARGET : undefined}
+            minHeight={equalDistribution ? MIN_PRESS_TARGET : undefined}
             borderEndWidth={isBand && itemIndex < items.length - 1 ? 1 : 0}
             borderColor={isBand ? componentColors.surface.border : undefined}
             disabled={isDisabled}
@@ -573,7 +579,13 @@ function TabsRoot({
             onInteraction={handleInteraction}
             cursor={isDisabled ? "not-allowed" : "pointer"}
             backgroundColor={
-              isBand && isActive ? componentColors.surface.background : "transparent"
+              isBand
+                ? isActive
+                  ? componentColors.surface.background
+                  : isDisabled
+                    ? "transparent"
+                    : feedbackBackground
+                : "transparent"
             }
             borderRadius={0}
             {...(isDisabled
@@ -608,8 +620,8 @@ function TabsRoot({
               // (spreading the recipe there too doubled the horizontal
               // padding).
               {...knobProps.control}
-              // Equal columns own band spacing; extra inset can exceed a narrow column.
-              paddingHorizontal={isBand ? 0 : knobProps.control.paddingHorizontal}
+              // Band columns share width; a minimal inset keeps labels off the edges.
+              paddingHorizontal={isBand ? "$1" : knobProps.control.paddingHorizontal}
               alignSelf="stretch"
               flexGrow={equalDistribution ? 1 : undefined}
               flexShrink={equalDistribution ? 1 : undefined}
@@ -619,21 +631,15 @@ function TabsRoot({
               alignItems="center"
               justifyContent="center"
               backgroundColor={
-                isActive || isDisabled
-                  ? "transparent"
-                  : pressValue === item.value
-                    ? componentColors.interactive.hover
-                    : hoverValue === item.value
-                      ? componentColors.interactive.background
-                      : "transparent"
+                isBand || isActive || isDisabled ? "transparent" : feedbackBackground
               }
               {...(kbRing ? keyboardFocusRingProps : undefined)}
             >
               {item.icon}
               <TabLabel
-                minWidth={equalDistribution ? 0 : undefined}
-                flexShrink={equalDistribution ? 1 : undefined}
                 active={isActive}
+                flexShrink={1}
+                minWidth={0}
                 {...knobProps.controlType}
                 fontFamily={knobProps.label.fontFamily}
                 fontWeight={!isBand && isActive ? "700" : knobProps.label.fontWeight}

package/src/Toast/Toast.spec.tsx

@@ -12,7 +12,7 @@ import {
   relativeLuminance,
   useAccentOnSurface,
 } from "@multiplatform.one/theme";
-import { Toast, ToastViewport, useToast } from "./index";
+import { Toast, ToastViewport, useToast, nativeToastA11y, nativeToastControlA11y } from "./index";
 import {
   __resetToastViewportRegistry,
   dismissToast,
@@ -39,6 +39,40 @@ function Trigger(props: Parameters<ReturnType<typeof useToast>["show"]>[0]) {
   return <Button onPress={() => toast.show(props)}>fire</Button>;
 }
 
+describe("native toast accessibility", () => {
+  it("groups text-only content while leaving action and dismiss controls reachable", () => {
+    expect(nativeToastA11y("Saved", false, false)).toEqual({
+      accessible: true,
+      accessibilityLabel: "Saved",
+    });
+    expect(nativeToastA11y("Saved", true, false)).toEqual({ accessible: false });
+  });
+
+  it("does not wire a second native announcement channel or web grouping", () => {
+    expect(nativeToastA11y("Saved", false, false)).not.toHaveProperty("accessibilityLiveRegion");
+    expect(nativeToastA11y("Saved", false, false)).not.toHaveProperty("aria-live");
+    expect(nativeToastA11y("Saved", false, true)).toEqual({});
+    expect(nativeToastA11y(undefined, false, false)).toEqual({ accessible: false });
+  });
+
+  it("makes native action and dismiss controls accessibility elements without leaking to web", () => {
+    expect(nativeToastControlA11y(false)).toEqual({ accessible: true });
+    expect(nativeToastControlA11y(true)).toEqual({});
+  });
+
+  it("records the library grouping default and keeps native control props off the DOM", () => {
+    renderWithProviders(
+      <>
+        <Trigger title="Saved" dismissible />
+        <ToastViewport />
+      </>,
+    );
+    fireEvent.click(screen.getByText("fire"));
+    expect(screen.getByTestId("toast")).toHaveAttribute("tabindex", "0");
+    expect(screen.getByLabelText("Dismiss notification")).not.toHaveAttribute("accessible");
+  });
+});
+
 describe("Toast (standalone)", () => {
   it("renders title, description and role=status", () => {
     renderWithProviders(
@@ -49,6 +83,15 @@ describe("Toast (standalone)", () => {
     expect(screen.getByRole("status")).toBeInTheDocument();
   });
 
+  it("names CopyField confirm for assistive tech (DG-FB-03)", () => {
+    renderWithProviders(<Toast title="Copied to clipboard." intent="success" />);
+    const status = screen.getByRole("status");
+    expect(status).toHaveAttribute("aria-live", "polite");
+    expect(status).toHaveAttribute("aria-label", "Copied to clipboard.");
+    expect(status).toHaveTextContent("Copied to clipboard.");
+    expect(status).toHaveAttribute("aria-atomic");
+  });
+
   it("fires onDismiss from the close button", () => {
     const onDismiss = vi.fn();
     renderWithProviders(<Toast title="Saved" onDismiss={onDismiss} />);
@@ -198,6 +241,18 @@ describe("useToast + ToastViewport (imperative)", () => {
     expect(getToasts()).toHaveLength(2);
   });
 
+  it("viewport announce region carries Copied to clipboard.", async () => {
+    renderWithProviders(<ToastViewport />);
+    act(() => {
+      showToast({ title: "Copied to clipboard.", intent: "success" });
+    });
+    expect(await screen.findByText("Copied to clipboard.")).toBeInTheDocument();
+    await vi.waitFor(() => {
+      const live = document.querySelector("[aria-live]:not([aria-live='off'])");
+      expect(live?.textContent ?? "").toMatch(/Copied to clipboard/);
+    });
+  });
+
   it("dismisses via the close button", async () => {
     vi.useFakeTimers();
     try {