@multiplatform.one/forms 7.8.0 → 7.10.0

package/src/fieldFamilyStories.radius.spec.tsx

@@ -0,0 +1,118 @@
+/**
+ * The four form LAYOUT stories must mount house field chrome, not a raw
+ * tamagui primitive.
+ *
+ * FieldLayout, FieldGroup, Fieldset and FormGrid paint no radius of their own —
+ * they are stacks, a grid and a legend. Whatever radius a probe reads off one
+ * of their stories belongs to the CONTROL the story chose to mount. A raw
+ * `Input` from "tamagui" consumes no knobs, so it pins one radius at every
+ * stop and the axis reads dead against a component that never had a say.
+ *
+ * The measurement here is therefore the STORY's, not the component's: walk the
+ * borderRadius knob and assert the control inside each story tracks it.
+ *
+ * Under jsdom the providers inject no CSS and the radius atom keeps its token
+ * reference (`_btlr-t-radius-4`) rather than resolving to `9px`, so this file
+ * gates the token ladder. The pixel ladder (0/5/9/16/50) and the dark scheme
+ * are measured for real by scripts/knob-axis-probe.mjs against a browser.
+ */
+
+import { cleanup } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset, type BorderRadius } from "@multiplatform.one/theme";
+import type { ReactElement } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import * as fieldGroupStories from "./FieldGroup.stories";
+import * as fieldLayoutStories from "./FieldLayout.stories";
+import * as fieldsetStories from "./Fieldset.stories";
+import * as formGridStories from "./FormGrid.stories";
+
+afterEach(cleanup);
+
+/** Knob stop -> radius token index, the `$N` the resolver hands the frame. */
+const ladder: Record<BorderRadius, string> = {
+  none: "0",
+  small: "2",
+  medium: "4",
+  large: "6",
+  full: "12",
+};
+const stops = Object.keys(ladder) as BorderRadius[];
+
+type StoryLike = { render?: (args: Record<string, unknown>) => ReactElement };
+
+/** Every radius token present in the subtree, deduped — the probe's reading. */
+function radiusTokens(container: HTMLElement): string[] {
+  const found = new Set<string>();
+  for (const el of container.querySelectorAll<HTMLElement>("*")) {
+    for (const cls of String(el.className || "").split(/\s+/)) {
+      const match = /^_btlr-t-radius-(\d+)$/.exec(cls);
+      if (match) found.add(match[1]);
+    }
+  }
+  return [...found].sort();
+}
+
+function mountAt(story: StoryLike, meta: { args?: unknown }, stop: BorderRadius) {
+  if (!story.render) throw new Error("story has no render");
+  return renderWithProviders(
+    <Preset overrides={{ borderRadius: stop, elevation: "none" }}>
+      {story.render({ ...((meta.args ?? {}) as Record<string, unknown>) })}
+    </Preset>,
+  );
+}
+
+const family = [
+  {
+    name: "Forms/FieldLayout",
+    story: fieldLayoutStories.Basic as StoryLike,
+    meta: fieldLayoutStories.default,
+  },
+  {
+    name: "Forms/FieldGroup",
+    story: fieldGroupStories.Basic as StoryLike,
+    meta: fieldGroupStories.default,
+  },
+  {
+    name: "Forms/Fieldset",
+    story: fieldsetStories.Default as StoryLike,
+    meta: fieldsetStories.default,
+  },
+  {
+    name: "Forms/FormGrid",
+    story: formGridStories.Basic as StoryLike,
+    meta: formGridStories.default,
+  },
+];
+
+describe("form layout stories mount knob-consuming field chrome", () => {
+  for (const { name, story, meta } of family) {
+    describe(name, () => {
+      // A story that fails to render measures flat on every axis, which reads
+      // exactly like a dead knob. Prove there is a control before believing
+      // anything measured off it.
+      it("renders a text control at all", () => {
+        const { container } = mountAt(story, meta as { args?: unknown }, "medium");
+        expect(container.querySelectorAll("input").length).toBeGreaterThan(0);
+      });
+
+      for (const stop of stops) {
+        it(`takes radius token $${ladder[stop]} at borderRadius:${stop}`, () => {
+          const { container } = mountAt(story, meta as { args?: unknown }, stop);
+          expect(radiusTokens(container)).toContain(ladder[stop]);
+        });
+      }
+
+      it("moves across all five stops instead of pinning one radius", () => {
+        const signatures = stops.map((stop) => {
+          const result = mountAt(story, meta as { args?: unknown }, stop);
+          const tokens = JSON.stringify(radiusTokens(result.container));
+          cleanup();
+          return tokens;
+        });
+        expect(new Set(signatures).size).toBe(stops.length);
+      });
+    });
+  }
+});

package/src/fields/Barcode/Barcode.spec.tsx

@@ -102,6 +102,8 @@ describe("Barcode", () => {
       const button = result.container.querySelector("[aria-label='Scan barcode']");
       expect(button).not.toBeNull();
       expect(button?.textContent).toContain("Scan");
+      expect(button?.querySelector("scan")).toBeNull();
+      expect(result.container.querySelector("scan")).toBeNull();
     });
 
     it("renders readOnly — hides scan button", () => {

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -45,6 +45,14 @@ function getZone(container: Element): HTMLElement {
   return zone as HTMLElement;
 }
 
+function borderWidthAtomPx(el: HTMLElement, prefix: string): number {
+  const atom = el.className.split(/\s+/).find((cls) => cls.startsWith(prefix));
+  // No atom means the side declares no width and falls through to the UA
+  // initial, which is exactly the defect — report it as such, not as 0.
+  if (!atom) return Number.NaN;
+  return Number.parseFloat(atom.slice(prefix.length));
+}
+
 async function pickFile(container: Element, file: File) {
   const input = container.querySelector("input[type='file']") as HTMLInputElement | null;
   expect(input).toBeTruthy();
@@ -317,6 +325,27 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(zone.textContent).toContain("Choose File");
   });
 
+  it("hangs the file list off ONE top hairline — bottom/left/right are 0, not the UA 3px initial (MPO-124)", async () => {
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" />,
+    );
+    await pickFile(container, new File(["hello"], "hello.txt", { type: "text/plain" }));
+
+    const zone = getZone(container);
+    const flist = zone.querySelector('[data-file-upload="files"]') as HTMLElement;
+    expect(flist).toBeTruthy();
+
+    // The frame declares `borderStyle: dashed` for all four sides. A side that
+    // declares no width therefore does not render nothing — it renders the CSS
+    // initial `medium` (3px) in `currentColor` ($color12), which is a heavy
+    // dashed BOX around the picked files instead of the one hairline the
+    // divider contract asks for.
+    expect(borderWidthAtomPx(flist, "_btw-")).toBe(1);
+    for (const prefix of ["_bbw-", "_blw-", "_brw-"] as const) {
+      expect(borderWidthAtomPx(flist, prefix)).toBe(0);
+    }
+  });
+
   it("keeps compact a space-only dial — CTA stays 44 and remove stays nested 32 (LC-76)", async () => {
     const { container } = renderWithHouseThemes(
       <FileUpload label="Attachment" name="attachment" compact />,

package/src/fields/FileUpload/index.tsx

@@ -170,6 +170,12 @@ const DropOverlayFrame = styled(YStack, {
 const UploadFileListFrame = styled(YStack, {
   width: "100%",
   borderTopWidth: 1,
+  // A side with a declared style and no declared width is NOT a side with no
+  // border: it takes the CSS initial `medium` (3px) in `currentColor`, which
+  // boxed the picked files in a heavy $color12 dash (MPO-124).
+  borderBottomWidth: 0,
+  borderLeftWidth: 0,
+  borderRightWidth: 0,
   borderStyle: "dashed",
   borderTopColor: formDropzoneColors.border,
 });

package/src/fields/Icon/drawnSet.tsx

@@ -213,13 +213,18 @@ export function filterDrawnIcons(
  */
 const drawnIconInkToken = "color11";
 
-function useDrawnInk(color?: string): string | undefined {
+function useDrawnInk(color?: string): string {
   const theme = useTheme() as unknown as Record<string, { val?: unknown } | undefined>;
   const raw = !color || color === "currentColor" ? `$${drawnIconInkToken}` : color;
   const val = raw.startsWith("$") ? theme[raw.slice(1)]?.val : raw;
   // An unknown consumer token falls back to the active theme's readable ink.
   const fallback = theme[drawnIconInkToken]?.val ?? theme.color?.val;
-  return typeof val === "string" ? val : typeof fallback === "string" ? fallback : undefined;
+  if (typeof val === "string") return val;
+  if (typeof fallback === "string") return fallback;
+  // Outside a theme both lookups miss. Returning undefined is what MPO-72 was:
+  // react-native-svg takes it as nil and Core Graphics paints with whatever
+  // stroke was last in the context. A mid neutral is visible on both schemes.
+  return "#808080";
 }
 
 export function DrawnIcon({

package/src/fields/RadioGroup/RadioGroup.native.spec.tsx

@@ -0,0 +1,67 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { RadioGroup } from "./index";
+
+// MPO-283. Mock tamagui's isWeb so the native branch runs on the test host
+// renderer, then read the React Native prop names back off the DOM. The state
+// object itself is pinned in shared/nativeA11y.spec.ts — the host stringifies
+// it — so what this file proves is that the component reaches the helper with
+// the right role and the right name.
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+const phase = [
+  { label: "CREDITS", value: "CREDITS" },
+  { label: "DEBITS", value: "DEBITS" },
+  { label: "DISCRETIONARY", value: "DISCRETIONARY", disabled: true },
+];
+
+const names = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll("[accessibilityrole]")).map((el) => [
+    el.getAttribute("accessibilityrole"),
+    el.getAttribute("accessibilitylabel"),
+  ]);
+
+describe("native RadioGroup accessibility contract", () => {
+  it("makes every option a named control instead of bare StaticText", () => {
+    const { container } = renderWithProviders(
+      <RadioGroup label="Phase" options={phase} value="DEBITS" />,
+    );
+    expect(names(container)).toEqual([
+      ["button", "CREDITS"],
+      ["button", "DEBITS"],
+      ["button", "DISCRETIONARY"],
+    ]);
+  });
+
+  it("prefixes a group accessibilityLabel onto each option, because iOS never reads a container", () => {
+    const { container } = renderWithProviders(
+      <RadioGroup accessibilityLabel="Phase" options={phase} value="DEBITS" />,
+    );
+    expect(names(container)).toContainEqual(["button", "Phase, DEBITS"]);
+  });
+
+  it("takes aria-label as an alias, since tamagui never maps it onto native", () => {
+    const { container } = renderWithProviders(
+      <RadioGroup aria-label="Phase" options={phase} value="DEBITS" />,
+    );
+    expect(names(container)).toContainEqual(["button", "Phase, DEBITS"]);
+  });
+
+  it("lets an option override its own name", () => {
+    const { container } = renderWithProviders(
+      <RadioGroup
+        options={[{ label: "▲", value: "up", accessibilityLabel: "Increasing" }]}
+        value="up"
+      />,
+    );
+    expect(names(container)).toEqual([["button", "Increasing"]]);
+  });
+
+  // The sibling Label is also told to stay out of the native tree so an option
+  // is not read twice. It cannot be asserted here — the web renderer drops the
+  // React Native accessibility props off Label entirely — so that one is
+  // measured on device instead.
+});

package/src/fields/RadioGroup/index.tsx

@@ -28,6 +28,7 @@ import { getSize } from "@tamagui/get-token";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
+import { choiceItemA11y, composeA11yName } from "../../shared/nativeA11y";
 import {
   getElevationWrapperProps,
   getFieldError,
@@ -131,6 +132,14 @@ export interface RadioGroupOption {
   disabled?: boolean;
   /** Muted secondary line under the label; rendered in `card` mode. */
   description?: string;
+  /**
+   * MPO-283 — accessible name for THIS option, overriding `label`. Use it
+   * when the option carries meaning the label text does not: a glyph, or a
+   * state encoded in fill/weight/position rather than words.
+   */
+  accessibilityLabel?: string;
+  /** Extra spoken context for this option (native `accessibilityHint`). */
+  accessibilityHint?: string;
 }
 
 export interface RadioGroupProps {
@@ -179,11 +188,33 @@ export interface RadioGroupProps {
    * primitives (same anatomy as `CheckboxGroup card`).
    */
   card?: boolean;
+  /**
+   * MPO-283 — accessible name for the whole group.
+   *
+   * tamagui does not map `aria-label` onto React Native's
+   * `accessibilityLabel`, so the web attribute is inert on native; this prop
+   * is the native channel and `aria-label` is accepted as an alias.
+   *
+   * iOS speaks elements, never non-element containers, so a name set here is
+   * PREFIXED onto each option's accessible name ("Phase, CREDITS") instead of
+   * sitting on the frame where nothing reads it. Options stay individually
+   * reachable and keep their own checked state.
+   */
+  accessibilityLabel?: string;
+  /** Alias for `accessibilityLabel`; also emitted as the web attribute. */
+  "aria-label"?: string;
+  /** Web-only name reference. Native has no id-based equivalent. */
+  "aria-labelledby"?: string;
+  /** Extra spoken context for the group (native `accessibilityHint`). */
+  accessibilityHint?: string;
 }
 
 interface RadioOptionItemProps {
   option: RadioGroupOption;
   itemId: string;
+  /** MPO-283 — the resolved native accessible name for this option. */
+  nativeLabel: string;
+  nativeHint?: string;
   a11y?: { "aria-labelledby"?: string; "aria-describedby"?: string };
   selected: boolean;
   isTabStop?: boolean;
@@ -203,6 +234,8 @@ interface RadioOptionItemProps {
 function RadioOptionItem({
   option,
   itemId,
+  nativeLabel,
+  nativeHint,
   a11y,
   selected,
   isTabStop,
@@ -277,15 +310,22 @@ function RadioOptionItem({
       {...(groupDisabled || option.disabled ? disabledChrome : undefined)}
       pointerEvents={readOnly ? "none" : undefined}
       {...a11y}
-      // RN only exposes the radio to the a11y tree when `accessible` is set;
-      // web keeps Tamagui's role=radio + label association untouched.
+      // MPO-283. RN only exposes the radio when `accessible` is set, and the
+      // aria-* spellings this block used to carry never reached iOS at all:
+      // tamagui does not map them onto React Native's accessibility props, so
+      // options came back as bare StaticText with no role and no checked
+      // state. The RN prop names are the ones iOS actually reads.
       {...(!isWeb
-        ? {
-            accessible: true,
-            "aria-label": typeof option.label === "string" ? option.label : String(option.value),
-            "aria-checked": selected,
-          }
-        : {})}
+        ? choiceItemA11y({
+            kind: "radio",
+            name: nativeLabel,
+            selected,
+            disabled: Boolean(groupDisabled || option.disabled),
+            hint: nativeHint,
+          })
+        : option.accessibilityLabel
+          ? { "aria-label": option.accessibilityLabel }
+          : {})}
       {...(hoverProps && {
         hoverStyle: {
           ...hoverProps,
@@ -344,6 +384,10 @@ export function RadioGroup({
   skeleton,
   compact,
   card,
+  accessibilityLabel,
+  accessibilityHint,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
 }: RadioGroupProps) {
   // Canonical `onChange` and the alias `onValueChange` both fire from the
   // single emit site below (same reconciliation as Switch).
@@ -351,6 +395,17 @@ export function RadioGroup({
     onChange?.(val);
     onValueChange?.(val);
   };
+  // MPO-283: one name, two channels — tamagui drops `aria-label` on native, so
+  // the prop and the attribute are reconciled here.
+  const groupA11yName = accessibilityLabel ?? ariaLabel;
+  // iOS reads elements, not containers, so an explicit group name rides in
+  // front of each option's own name rather than sitting on the frame.
+  const optionA11yName = (option: RadioGroupOption) =>
+    composeA11yName(
+      groupA11yName,
+      option.accessibilityLabel ??
+        (typeof option.label === "string" ? option.label : String(option.value)),
+    );
   const { resolvedForm, knobProps, control, text, elevation, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
@@ -440,6 +495,8 @@ export function RadioGroup({
     <RadioOptionItem
       option={option}
       itemId={itemId}
+      nativeLabel={optionA11yName(option)}
+      nativeHint={option.accessibilityHint ?? accessibilityHint}
       a11y={a11y}
       selected={!!selected}
       isTabStop={isTabStop}
@@ -541,6 +598,15 @@ export function RadioGroup({
               )}
               <Label
                 htmlFor={itemId}
+                // MPO-283: on native the radio itself now carries this text as
+                // its accessible name, so leaving the Label in the tree reads
+                // every option twice. Web keeps the label/control association.
+                {...(!isWeb
+                  ? {
+                      accessibilityElementsHidden: true,
+                      importantForAccessibility: "no-hide-descendants" as const,
+                    }
+                  : undefined)}
                 size={(size || knobProps.sizeToken) as FontSizeTokens}
                 {...knobProps.body}
                 color={knobProps.textAccentColor}
@@ -615,6 +681,14 @@ export function RadioGroup({
         aria-required={required || undefined}
         aria-invalid={hasError || undefined}
         aria-readonly={readOnly || undefined}
+        // MPO-283: web reads the attribute, Android reads the RN prop off the
+        // container. iOS reads neither, which is why the name is also prefixed
+        // onto every option above.
+        {...(groupA11yName ? { "aria-label": groupA11yName } : undefined)}
+        {...(ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : undefined)}
+        {...(!isWeb && groupA11yName
+          ? { accessibilityLabel: groupA11yName, accessibilityRole: "radiogroup" as const }
+          : undefined)}
       >
         {renderItems(radioValue, emit)}
       </TamaguiRadioGroup>

package/src/fields/ToggleGroup/ToggleGroup.native.spec.tsx

@@ -0,0 +1,73 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { ToggleGroup } from "./index";
+
+// MPO-283. Before this the whole segmented control was absent from the iOS
+// tree. See RadioGroup.native.spec.tsx for why the state object is pinned in
+// shared/nativeA11y.spec.ts rather than here.
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  isWeb: false,
+}));
+
+const severity = [
+  { label: "error", value: "error" },
+  { label: "warning", value: "warning" },
+  { label: "info", value: "info", disabled: true },
+];
+
+const names = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll("[accessibilityrole]")).map((el) => [
+    el.getAttribute("accessibilityrole"),
+    el.getAttribute("accessibilitylabel"),
+  ]);
+
+describe("native ToggleGroup accessibility contract", () => {
+  it("puts every segment in the tree as a named control", () => {
+    const { container } = renderWithProviders(
+      <ToggleGroup label="Severity" options={severity} value="warning" />,
+    );
+    expect(names(container)).toEqual([
+      ["button", "error"],
+      ["button", "warning"],
+      ["button", "info"],
+    ]);
+  });
+
+  // The platform role is `button` for both kinds, measured: a radio/checkbox
+  // accessibilityRole takes the element out of the iOS tree entirely.
+  it("keeps every segment in the tree when the group takes several values", () => {
+    const { container } = renderWithProviders(
+      <ToggleGroup type="multiple" options={severity} value={["error"]} />,
+    );
+    expect(names(container)).toEqual([
+      ["button", "error"],
+      ["button", "warning"],
+      ["button", "info"],
+    ]);
+  });
+
+  it("prefixes a group accessibilityLabel onto each segment, because iOS never reads a container", () => {
+    const { container } = renderWithProviders(
+      <ToggleGroup accessibilityLabel="Severity" options={severity} value="warning" />,
+    );
+    expect(names(container)).toContainEqual(["button", "Severity, warning"]);
+  });
+
+  it("takes aria-label as an alias, since tamagui never maps it onto native", () => {
+    const { container } = renderWithProviders(
+      <ToggleGroup aria-label="Severity" options={severity} value="warning" />,
+    );
+    expect(names(container)).toContainEqual(["button", "Severity, warning"]);
+  });
+
+  it("lets a segment override its own name", () => {
+    const { container } = renderWithProviders(
+      <ToggleGroup
+        options={[{ label: "●", value: "on", accessibilityLabel: "Filled" }]}
+        value="on"
+      />,
+    );
+    expect(names(container)).toEqual([["button", "Filled"]]);
+  });
+});

package/src/fields/ToggleGroup/ToggleGroup.spec.tsx

@@ -294,6 +294,55 @@ describe("ToggleGroup", () => {
     });
   });
 
+  describe("per-segment elevation wrapper (MPO-133)", () => {
+    function elevationWrapperFor(segment: HTMLElement): HTMLElement {
+      const wrapper = segment.parentElement as HTMLElement;
+      expect(wrapper?.getAttribute("style") ?? "").toMatch(/box-shadow/);
+      return wrapper;
+    }
+
+    it("lays the wrapper out as a row so the segment's zero flex-basis sizes width, not height", () => {
+      const { container } = renderWithHouseThemes(
+        <ToggleGroup label="Alignment" options={options} defaultValue="left" />,
+      );
+      const segments = [...container.querySelectorAll("[data-state]")] as HTMLElement[];
+      expect(segments).toHaveLength(3);
+      for (const segment of segments) {
+        expect(segment.className).toContain("_fb-0px");
+        const wrapper = elevationWrapperFor(segment);
+        expect(wrapper.className).toContain("_fd-row");
+        expect(wrapper.className).toContain("_fg-1");
+      }
+    });
+
+    it("keeps the row wrapper in the vertical orientation", () => {
+      const { container } = renderWithHouseThemes(
+        <ToggleGroup
+          label="Alignment"
+          options={options}
+          defaultValue="left"
+          orientation="vertical"
+        />,
+      );
+      const segments = [...container.querySelectorAll("[data-state]")] as HTMLElement[];
+      expect(segments).toHaveLength(3);
+      for (const segment of segments) {
+        expect(segment.className).toContain("_fb-0px");
+        expect(elevationWrapperFor(segment).className).toContain("_fd-row");
+      }
+    });
+
+    it("leaves the group frame flat while the segments carry the shadow (E-FLAT)", () => {
+      const { container } = renderWithHouseThemes(
+        <ToggleGroup label="Alignment" options={options} defaultValue="left" />,
+      );
+      const group = container.querySelector('[role="group"]') as HTMLElement;
+      expect(group).toBeTruthy();
+      expect(group.className).not.toMatch(/_bxsh-/);
+      expect(group.getAttribute("style") ?? "").not.toMatch(/box-shadow/);
+    });
+  });
+
   describe("one tab stop (LC-49 / SB-M-217)", () => {
     it("exposes exactly one tab stop among the segments", () => {
       const { container } = renderWithHouseThemes(