@multiplatform.one/forms 7.63.2 → 7.63.4

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>

package/types/fields/RadioGroup/index.d.ts

@@ -86,7 +86,7 @@ export declare namespace RadioGroup {
         elevation?: number | import("@tamagui/web").SizeTokens | undefined;
         fullscreen?: boolean | undefined;
         size?: import("@tamagui/web").SizeTokens | undefined;
-    }>, "theme" | "debug" | "size" | "elevation" | "children" | "value" | "style" | `$${string}` | "id" | "disabled" | "group" | "onChange" | "className" | "onMouseEnter" | "onMouseLeave" | "onClick" | "role" | `$${number}` | "onPress" | "onLongPress" | "onPressIn" | "onPressOut" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseOver" | "onMouseOut" | "onFocus" | "onBlur" | "onDoubleClick" | "onContextMenu" | "onWheel" | "onKeyDown" | "onKeyUp" | "onInput" | "onBeforeInput" | "onScroll" | "onCopy" | "onCut" | "onPaste" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onStartShouldSetResponder" | "onScrollShouldSetResponder" | "onScrollShouldSetResponderCapture" | "onSelectionChangeShouldSetResponder" | "onSelectionChangeShouldSetResponderCapture" | "onLayout" | "elevationAndroid" | "rel" | "download" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "target" | "htmlFor" | "asChild" | "dangerouslySetInnerHTML" | "themeShallow" | "unstyled" | "render" | "untilMeasured" | "componentName" | "tabIndex" | "disableOptimization" | "forceStyle" | "disableClassName" | "hitSlop" | "animatedBy" | import("@tamagui/web").GroupMediaKeys | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMoveCapture" | "onPointerCancelCapture" | "onPointerDownCapture" | "onPointerUpCapture" | keyof import("@tamagui/web").StackStyleBase | "fullscreen" | "labelledBy" | keyof import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+    }>, "theme" | "debug" | "size" | "elevation" | "children" | "value" | "style" | `$${string}` | "id" | "disabled" | "group" | "onChange" | "className" | "onMouseEnter" | "onMouseLeave" | "onClick" | "role" | `$${number}` | "elevationAndroid" | "onPress" | "onLongPress" | "onPressIn" | "onPressOut" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseOver" | "onMouseOut" | "onFocus" | "onBlur" | "onDoubleClick" | "onContextMenu" | "onWheel" | "onKeyDown" | "onKeyUp" | "onInput" | "onBeforeInput" | "onScroll" | "onCopy" | "onCut" | "onPaste" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onStartShouldSetResponder" | "onScrollShouldSetResponder" | "onScrollShouldSetResponderCapture" | "onSelectionChangeShouldSetResponder" | "onSelectionChangeShouldSetResponderCapture" | "onLayout" | "rel" | "download" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "target" | "htmlFor" | "asChild" | "dangerouslySetInnerHTML" | "themeShallow" | "unstyled" | "render" | "untilMeasured" | "componentName" | "tabIndex" | "disableOptimization" | "forceStyle" | "disableClassName" | "hitSlop" | "animatedBy" | import("@tamagui/web").GroupMediaKeys | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMoveCapture" | "onPointerCancelCapture" | "onPointerDownCapture" | "onPointerUpCapture" | keyof import("@tamagui/web").StackStyleBase | "fullscreen" | "labelledBy" | keyof import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
         disabled?: boolean | undefined;
         unstyled?: boolean | undefined;
         elevation?: number | import("@tamagui/web").SizeTokens | undefined;
@@ -149,7 +149,7 @@ export declare namespace RadioGroup {
         unstyled?: boolean | undefined;
         elevation?: number | import("@tamagui/web").SizeTokens | undefined;
         fullscreen?: boolean | undefined;
-    }>, "theme" | "debug" | "elevation" | "children" | "style" | `$${string}` | "id" | "disabled" | "group" | "onChange" | "className" | "onMouseEnter" | "onMouseLeave" | "onClick" | "role" | `$${number}` | "onPress" | "onLongPress" | "onPressIn" | "onPressOut" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseOver" | "onMouseOut" | "onFocus" | "onBlur" | "onDoubleClick" | "onContextMenu" | "onWheel" | "onKeyDown" | "onKeyUp" | "onInput" | "onBeforeInput" | "onScroll" | "onCopy" | "onCut" | "onPaste" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onStartShouldSetResponder" | "onScrollShouldSetResponder" | "onScrollShouldSetResponderCapture" | "onSelectionChangeShouldSetResponder" | "onSelectionChangeShouldSetResponderCapture" | "onLayout" | "elevationAndroid" | "rel" | "download" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "target" | "htmlFor" | "asChild" | "dangerouslySetInnerHTML" | "themeShallow" | "unstyled" | "render" | "untilMeasured" | "componentName" | "tabIndex" | "disableOptimization" | "forceStyle" | "disableClassName" | "hitSlop" | "animatedBy" | import("@tamagui/web").GroupMediaKeys | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMoveCapture" | "onPointerCancelCapture" | "onPointerDownCapture" | "onPointerUpCapture" | keyof import("@tamagui/web").StackStyleBase | "fullscreen" | "forceMount" | keyof import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
+    }>, "theme" | "debug" | "elevation" | "children" | "style" | `$${string}` | "id" | "disabled" | "group" | "onChange" | "className" | "onMouseEnter" | "onMouseLeave" | "onClick" | "role" | `$${number}` | "elevationAndroid" | "onPress" | "onLongPress" | "onPressIn" | "onPressOut" | "onMouseDown" | "onMouseUp" | "onMouseMove" | "onMouseOver" | "onMouseOut" | "onFocus" | "onBlur" | "onDoubleClick" | "onContextMenu" | "onWheel" | "onKeyDown" | "onKeyUp" | "onInput" | "onBeforeInput" | "onScroll" | "onCopy" | "onCut" | "onPaste" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onStartShouldSetResponder" | "onScrollShouldSetResponder" | "onScrollShouldSetResponderCapture" | "onSelectionChangeShouldSetResponder" | "onSelectionChangeShouldSetResponderCapture" | "onLayout" | "rel" | "download" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "testID" | "nativeID" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "target" | "htmlFor" | "asChild" | "dangerouslySetInnerHTML" | "themeShallow" | "unstyled" | "render" | "untilMeasured" | "componentName" | "tabIndex" | "disableOptimization" | "forceStyle" | "disableClassName" | "hitSlop" | "animatedBy" | import("@tamagui/web").GroupMediaKeys | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "collapsable" | "collapsableChildren" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMoveCapture" | "onPointerCancelCapture" | "onPointerDownCapture" | "onPointerUpCapture" | keyof import("@tamagui/web").StackStyleBase | "fullscreen" | "forceMount" | keyof import("@tamagui/web").WithPseudoProps<import("@tamagui/web").WithThemeValues<import("@tamagui/web").StackStyleBase> & {
         unstyled?: boolean | undefined;
         elevation?: number | import("@tamagui/web").SizeTokens | undefined;
         fullscreen?: boolean | undefined;