@multiplatform.one/forms 7.8.0 → 7.11.0

package/src/Button/Button.fontWeight.spec.tsx

@@ -0,0 +1,75 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-125: the `fontWeight` knob must reach the Button LABEL. A literal
+ * `fontWeight="400"` sat after the `knobProps.body` spread and pinned the
+ * label at 400 in both schemes, while Input and Select moved to 700 off the
+ * same knob. `docs/design/knob-laws.md` § Family rules already says
+ * `button | ... | fonts honour`, so the render was the thing that was wrong.
+ *
+ * The weight is read off the TEXT NODE, not the frame — the frame reported
+ * 400 either way, which is how the defect survived. jsdom cannot cascade
+ * Tamagui CSS, so the rendered value is the atomic class the text node emits
+ * (`_fow-700`); it exists only when the prop survived the merge, which is the
+ * thing under test. Same measurement Button.labelInk.spec.tsx uses.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import { Theme } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+const SCHEMES = ["light", "dark"] as const;
+
+function inkWeight(el: HTMLElement): string {
+  const inline = el.style.fontWeight;
+  if (inline) return String(inline);
+  for (const cls of String(el.className ?? "").split(/\s+/)) {
+    const match = cls.match(/^_fow-(\d+)$/);
+    if (match) return match[1];
+  }
+  return "";
+}
+
+function labelNode(
+  fontWeight: "regular" | "bold",
+  scheme: (typeof SCHEMES)[number],
+  label: string,
+): HTMLElement {
+  renderWithProviders(
+    <Theme name={scheme}>
+      <Preset overrides={{ fontWeight }}>
+        <Button>{label}</Button>
+      </Preset>
+    </Theme>,
+  );
+  const node = screen.getByText(label) as HTMLElement;
+  expect(node.tagName).not.toBe("BUTTON");
+  return node;
+}
+
+describe("Button MPO-125 fontWeight knob", () => {
+  it.each(SCHEMES)("%s: bold takes the label to 700", (scheme) => {
+    const node = labelNode("bold", scheme, `bold-${scheme}`);
+    expect(inkWeight(node)).toBe("700");
+    expect(node.className).not.toMatch(/_fow-400\b/);
+  });
+
+  it.each(SCHEMES)("%s: regular keeps the label at 400", (scheme) => {
+    const node = labelNode("regular", scheme, `regular-${scheme}`);
+    expect(inkWeight(node)).toBe("400");
+    expect(node.className).not.toMatch(/_fow-700\b/);
+  });
+
+  it.each(SCHEMES)("%s: the size variant never leaks 500/600 at either stop", (scheme) => {
+    for (const stop of ["regular", "bold"] as const) {
+      const node = labelNode(stop, scheme, `leak-${stop}-${scheme}`);
+      expect(node.className).not.toMatch(/_fow-500\b/);
+      expect(node.className).not.toMatch(/_fow-600\b/);
+    }
+  });
+});

package/src/Button/index.tsx

@@ -545,9 +545,11 @@ export function Button({
       // LC-40: on the washed disabled chrome the label leaves the on-fill
       // foreground and pins to the lowest AA tier (keepLabel keeps >=4.5:1).
       {...(isDisabled ? disabledState.textKnobProps : undefined)}
-      // Boards measure ink.weight on the TEXT NODE, never the frame.
-      // Regular 400 — SizableText size variants otherwise leak 500/600.
-      fontWeight="400"
+      // Boards measure ink.weight on the TEXT NODE, never the frame. The
+      // prop is restated after the spreads because SizableText's size
+      // variant otherwise leaks 500/600 over it (MPO-125: a literal 400
+      // here pinned the label and swallowed the fontWeight knob).
+      fontWeight={knobProps.body.fontWeight}
       transition={knobProps.transition}
     >
       {label}

package/src/FieldGroup.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Input as TamaguiInput, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { FieldGroup } from "./FieldGroup";
 import { FormSection, FormSectionStack } from "./FormSection";
-import { FieldLayout } from "./fieldLayout";
+import { Input } from "./fields/Input";
 
 const meta: Meta<typeof FieldGroup> = {
   title: "Forms/FieldGroup",
@@ -18,11 +18,7 @@ export default meta;
 type Story = StoryObj<typeof FieldGroup>;
 
 function Field({ id, label }: { id: string; label: string }) {
-  return (
-    <FieldLayout id={id} label={label}>
-      <TamaguiInput id={id} placeholder={label} />
-    </FieldLayout>
-  );
+  return <Input id={id} label={label} placeholder={label} />;
 }
 
 export const Basic: Story = {

package/src/FieldLayout.stories.tsx

@@ -3,13 +3,35 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { Preset } from "@multiplatform.one/theme";
-import { Input as TamaguiInput, Paragraph, YStack, XStack } from "tamagui";
+import { Paragraph, YStack, XStack } from "tamagui";
 import { Button } from "./Button";
 import { Form } from "./Form";
 import { Field, FieldLayout } from "./fieldLayout";
 import { Input } from "./fields/Input";
+import { Input as InputParts } from "./InputParts";
 import { Checkbox } from "./fields/Checkbox";
 
+/**
+ * FieldLayout wraps a CONTROL, so these stories cannot mount the house `Input`
+ * field — it brings its own FieldLayout. `InputParts.Box` is the house chrome
+ * underneath that field, and it is the part that consumes the knobs.
+ */
+function Control(props: {
+  id?: string;
+  placeholder?: string;
+  value?: string;
+  onChangeText?: (text: string) => void;
+  secureTextEntry?: boolean;
+}) {
+  return (
+    <InputParts>
+      <InputParts.Box>
+        <InputParts.Area {...props} />
+      </InputParts.Box>
+    </InputParts>
+  );
+}
+
 const meta: Meta<typeof FieldLayout> = {
   title: "Forms/FieldLayout",
   component: FieldLayout,
@@ -37,7 +59,7 @@ export const Basic: Story = {
   render: (args) => (
     <YStack maxWidth={360}>
       <FieldLayout {...args}>
-        <TamaguiInput id={args.id} placeholder="you@example.com" />
+        <Control id={args.id} placeholder="you@example.com" />
       </FieldLayout>
     </YStack>
   ),
@@ -90,7 +112,7 @@ export const ErrorStates: Story = {
         // DG-COPY-02: error copy states the rule broken — never "invalid"/"please"/"error".
         error="Value must use letters only"
       >
-        <TamaguiInput id="fl-err-string" />
+        <Control id="fl-err-string" />
       </FieldLayout>
       <FieldLayout
         id="fl-err-bool"
@@ -98,7 +120,7 @@ export const ErrorStates: Story = {
         helperText="Helper should remain visible"
         error={true}
       >
-        <TamaguiInput id="fl-err-bool" />
+        <Control id="fl-err-bool" />
       </FieldLayout>
       <FieldLayout
         id="fl-err-empty"
@@ -106,7 +128,7 @@ export const ErrorStates: Story = {
         helperText="Empty string should act as no message"
         error=""
       >
-        <TamaguiInput id="fl-err-empty" />
+        <Control id="fl-err-empty" />
       </FieldLayout>
     </YStack>
   ),
@@ -116,13 +138,13 @@ export const AnatomyEdgeCases: Story = {
   render: () => (
     <YStack gap="$6" maxWidth={360}>
       <FieldLayout id="fl-required" label="Required field" required>
-        <TamaguiInput id="fl-required" />
+        <Control id="fl-required" />
       </FieldLayout>
       <FieldLayout id="fl-nolabel" helperText="No label means compact $1 gap">
-        <TamaguiInput id="fl-nolabel" />
+        <Control id="fl-nolabel" />
       </FieldLayout>
       <FieldLayout id="fl-compact" label="Compact spacing" compactSpacing helperText="Compact gap">
-        <TamaguiInput id="fl-compact" />
+        <Control id="fl-compact" />
       </FieldLayout>
       <FieldLayout
         id="fl-node-label"
@@ -133,14 +155,14 @@ export const AnatomyEdgeCases: Story = {
           </XStack>
         }
       >
-        <TamaguiInput id="fl-node-label" />
+        <Control id="fl-node-label" />
       </FieldLayout>
       <FieldLayout
         id="fl-long"
         label="Long messages"
         error="This validation message is extremely long and keeps going to make sure long validation copy wraps correctly under the control without pushing the layout sideways or clipping any of its content at narrow widths"
       >
-        <TamaguiInput id="fl-long" />
+        <Control id="fl-long" />
       </FieldLayout>
     </YStack>
   ),
@@ -166,7 +188,7 @@ export const FieldWrapper: Story = {
                   helperText="TanStack Field wrapper"
                   field={field as any}
                 >
-                  <TamaguiInput
+                  <Control
                     id="field-username"
                     value={String(field.state.value ?? "")}
                     onChangeText={(text) => field.handleChange(text)}
@@ -208,7 +230,7 @@ export const FieldRequiredValidator: Story = {
             >
               {(field) => (
                 <FieldLayout id="field-nickname" label="Nickname" required field={field as any}>
-                  <TamaguiInput
+                  <Control
                     id="field-nickname"
                     value={String(field.state.value ?? "")}
                     onChangeText={(text) => field.handleChange(text)}

package/src/Fieldset.stories.tsx

@@ -1,14 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Input as TamaguiInput, YStack } from "tamagui";
-import { FieldLayout } from "./fieldLayout";
+import { YStack } from "tamagui";
 import { Fieldset, FormSectionStack } from "./FormSection";
+import { Input } from "./fields/Input";
 
 function Field({ id, label, ...rest }: { id: string; label: string; secureTextEntry?: boolean }) {
-  return (
-    <FieldLayout id={id} label={label}>
-      <TamaguiInput id={id} placeholder={label} {...rest} />
-    </FieldLayout>
-  );
+  return <Input id={id} label={label} placeholder={label} {...rest} />;
 }
 
 const meta: Meta<typeof Fieldset> = {

package/src/FormGrid.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Input as TamaguiInput, Paragraph, YStack } from "tamagui";
+import { Paragraph, YStack } from "tamagui";
 import { FieldGroup } from "./FieldGroup";
 import { FormGrid } from "./FormGrid";
 import { FormSection, FormSectionStack } from "./FormSection";
-import { FieldLayout } from "./fieldLayout";
+import { Input } from "./fields/Input";
 
 const meta: Meta<typeof FormGrid> = {
   title: "Forms/FormGrid",
@@ -24,11 +24,7 @@ export default meta;
 type Story = StoryObj<typeof FormGrid>;
 
 function GridField({ id, label }: { id: string; label: string }) {
-  return (
-    <FieldLayout id={id} label={label}>
-      <TamaguiInput id={id} placeholder={label} />
-    </FieldLayout>
-  );
+  return <Input id={id} label={label} placeholder={label} />;
 }
 
 export const Basic: Story = {
@@ -99,13 +95,11 @@ export const LongErrors: Story = {
   render: () => (
     <YStack maxWidth={640}>
       <FormGrid columns={2}>
-        <FieldLayout
+        <Input
           id="fge-a"
           label="With long error"
           error="This validation message is extremely long and should wrap inside its own grid cell without breaking the neighbouring column alignment or overflowing the grid container"
-        >
-          <TamaguiInput id="fge-a" />
-        </FieldLayout>
+        />
         <GridField id="fge-b" label="Neighbour" />
       </FormGrid>
     </YStack>

package/src/InputParts/InputButton.spec.tsx

@@ -40,6 +40,22 @@ describe("Input.Button", () => {
     expect(btn.contains(ring)).toBe(true);
   });
 
+  it("a bare string child is a LABEL, not an icon type to createElement", () => {
+    const result = renderWithProviders(
+      <Input size="$4">
+        <Input.Box size="$4">
+          <Input.Button size="$4" aria-label="cap">
+            Scan
+          </Input.Button>
+        </Input.Box>
+      </Input>,
+    );
+    const btn = result.container.querySelector("[aria-label='cap']") as HTMLElement;
+    expect(btn).not.toBeNull();
+    expect(btn.textContent).toContain("Scan");
+    expect(result.container.querySelector("scan")).toBeNull();
+  });
+
   it("end-cap square is generated from the size recipe at every token", () => {
     for (const token of SIZE_RECIPE_TOKENS) {
       if (token === "$true") continue;

package/src/InputParts/index.tsx

@@ -1035,6 +1035,23 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
     size: knobProps.controlIcon.width,
     color: paint as never,
   });
+  // A string/number child is a LABEL, not an icon. `getThemedIcon` treats an
+  // un-elemented child as a component TYPE and `createElement`s it, so "Scan"
+  // becomes an invented `<scan>` element that paints nothing (MPO-208); a bare
+  // string under the glyphRing View is the same category error on native.
+  const textChild =
+    typeof children === "string" || typeof children === "number" ? (
+      <Text
+        {...knobProps.controlType}
+        fontFamily={knobProps.body.fontFamily}
+        fontWeight={knobProps.body.fontWeight}
+        color={paint as never}
+        numberOfLines={1}
+        userSelect="none"
+      >
+        {children}
+      </Text>
+    ) : null;
   const decorativeRef = useCallback(
     (node: TamaguiElement | null) => {
       // Tamagui 2.7.6 Button stamps tabIndex=0 after consumer props.
@@ -1078,7 +1095,7 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
           alignItems="center"
           justifyContent="center"
         >
-          {children}
+          {textChild ?? children}
         </View>
       </InputGlyphButton>
     );
@@ -1101,7 +1118,7 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
       data-end-cap={square}
       {...props}
     >
-      {getThemedIcon(children)}
+      {textChild ?? getThemedIcon(children)}
     </InputButton>
   );
 });

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.
+});