@multiplatform.one/forms 7.63.2 → 7.63.3

package/src/fieldLayout.spec.tsx

@@ -198,13 +198,13 @@ describe("FieldLayout error precedence (Axiom 5 eject-last)", () => {
   });
 });
 
-describe("FieldLayout message-before-control anatomy", () => {
+describe("FieldLayout message-below-control anatomy (FZ-8073)", () => {
   function Control() {
     return <input id="ordered" aria-describedby={useFieldDescribedBy()} />;
   }
 
   for (const mode of ["top", "side"] as const) {
-    it(`${mode}: helper and replacement error precede the control and describe only the rendered slot`, () => {
+    it(`${mode}: label, then the control, then the one helper or error slot, which describes the control`, () => {
       const renderField = (error?: string) => (
         <Preset overrides={{ fieldLabelPlacement: mode === "side" ? "side" : "top" }}>
           <FieldLayout id="ordered" label="Email" helperText="Use your work address" error={error}>
@@ -214,20 +214,27 @@ describe("FieldLayout message-before-control anatomy", () => {
       );
       const result = renderWithProviders(renderField());
       const assertSlot = (id: string, text: string) => {
+        const label = result.container.querySelector("label")!;
         const input = result.container.querySelector("input")!;
         const message = result.container.querySelector(`#${id}`)!;
         expect(message.textContent).toBe(text);
         expect(
-          message.compareDocumentPosition(input) & Node.DOCUMENT_POSITION_FOLLOWING,
+          label.compareDocumentPosition(input) & Node.DOCUMENT_POSITION_FOLLOWING,
+        ).toBeTruthy();
+        expect(
+          input.compareDocumentPosition(message) & Node.DOCUMENT_POSITION_FOLLOWING,
         ).toBeTruthy();
         expect(input.getAttribute("aria-describedby")).toBe(id);
         expect(
           result.container.querySelectorAll("[id$='-description'], [id$='-error']"),
         ).toHaveLength(1);
+        return message;
       };
       assertSlot("ordered-description", "Use your work address");
       result.rerender(renderField("Enter an email address"));
-      assertSlot("ordered-error", "Enter an email address");
+      const error = assertSlot("ordered-error", "Enter an email address");
+      expect(error.getAttribute("role")).toBe("alert");
+      expect(error.getAttribute("aria-live")).toBe("polite");
       expect(result.container.textContent).not.toContain("Use your work address");
     });
   }
@@ -307,7 +314,7 @@ describe("FieldLayout design-law (MPO-60)", () => {
     for (const size of ["$2", "$3", "$5"] as const) {
       const { container, unmount } = renderWithProviders(
         <Surface size={size}>
-          <FieldLayout id="a" label="Name" helperText="Shown below the label">
+          <FieldLayout id="a" label="Name" helperText="Shown below the control">
             <TamaguiInput id="a" />
           </FieldLayout>
         </Surface>,
@@ -315,9 +322,9 @@ describe("FieldLayout design-law (MPO-60)", () => {
       const field = container.querySelector("[data-label-gap]");
       expect(field?.getAttribute("data-label-gap"), size).toBe("$2");
       expect(classIncludes(container, "_gap-t-space-2")).toBe(true);
-      // Helper placement unchanged: label, then helper, then the control.
       const order = Array.from(field?.children ?? []).map((el) => el.tagName);
       expect(order[0]).toBe("LABEL");
+      expect(field?.lastElementChild?.id).toBe("a-description");
       unmount();
     }
   });

package/src/fieldLayout.tsx

@@ -218,7 +218,7 @@ export function FieldLayout({
 
   // Label to control, control to helper/error: the tight role (A9) floored at
   // `$2`, so a label sits with its control but never touches it; fields read
-  // apart at the `gap` role (the form's rhythm). Helper/error placement stays.
+  // apart at the `gap` role (the form's rhythm).
   const gapProps = { gap: floorSpaceToken(knobProps.gapSm.gap, LABEL_TO_CONTROL_FLOOR) };
 
   // Purpose / autocomplete → default width; explicit maxWidth/width win.
@@ -307,9 +307,9 @@ export function FieldLayout({
 
   const controlColumn = (
     <YStack flex={sideLabel ? 1 : undefined} {...gapProps}>
+      {children}
       {helperNode}
       {errorNode}
-      {children}
     </YStack>
   );
 
@@ -346,9 +346,9 @@ export function FieldLayout({
           ) : (
             <>
               {labelNode}
+              {children}
               {helperNode}
               {errorNode}
-              {children}
             </>
           )}
         </YStack>