pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/image-viewer/ImageViewer.js

@@ -0,0 +1,265 @@
+"use strict";
+
+/**
+ * ImageViewer — full-screen modal gallery for images. Ported from tickets/mobile AttachmentViewerModal
+ * (simplified API — uri/id/label items, no attachment-specific fields).
+ */
+
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { Animated, FlatList, Platform, Pressable, Share, StyleSheet, useWindowDimensions, View } from "react-native";
+import { MediaImage } from "../../core/media/index.js";
+import { useEnterExit, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { rippleColor } from "../../theme/platform/stateLayer.native.js";
+import { Button } from "../button/Button.js";
+import { Modal } from "../modal/Modal.js";
+import { IMAGE_VIEWER_PAGE_PADDING } from "./ImageViewer.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const THUMB_SIZE = 56;
+const THUMB_GAP = 8;
+const THUMB_STRIDE = THUMB_SIZE + THUMB_GAP;
+export const ImageViewer = /*#__PURE__*/memo(function ImageViewer({
+  visible,
+  onRequestClose,
+  items,
+  initialIndex = 0,
+  onShare,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const motion = useMotion();
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = useWindowDimensions();
+  const enterExit = useEnterExit(visible);
+  const [index, setIndex] = useState(initialIndex);
+  const pagerRef = useRef(null);
+  const current = items[index];
+  const pageW = windowWidth - IMAGE_VIEWER_PAGE_PADDING;
+  const pageStyle = useMemo(() => [styles.imagePage, {
+    width: pageW,
+    height: Math.min(windowHeight * 0.45, 360)
+  }], [pageW, windowHeight]);
+  const imageItems = useMemo(() => items.filter(item => item.uri.length > 0), [items]);
+
+  /** Id -> position in `items`, so a thumb press is a lookup instead of a per-item findIndex. */
+  const indexById = useMemo(() => {
+    const map = new Map();
+    items.forEach((item, i) => map.set(item.id, i));
+    return map;
+  }, [items]);
+  const pageIndexById = useMemo(() => {
+    const map = new Map();
+    imageItems.forEach((item, i) => map.set(item.id, i));
+    return map;
+  }, [imageItems]);
+  const currentId = current?.id;
+  const initialScrollIndex = useMemo(() => currentId === undefined ? 0 : pageIndexById.get(currentId) ?? 0, [currentId, pageIndexById]);
+  const handleShare = useCallback(async () => {
+    if (!current) return;
+    if (onShare) {
+      onShare(current);
+      return;
+    }
+    await Share.share({
+      message: current.uri,
+      url: current.uri
+    });
+  }, [current, onShare]);
+  const keyExtractor = useCallback(item => item.id, []);
+  const getPageLayout = useCallback((_, i) => ({
+    length: pageW,
+    offset: pageW * i,
+    index: i
+  }), [pageW]);
+  const getThumbLayout = useCallback((_, i) => ({
+    length: THUMB_STRIDE,
+    offset: THUMB_STRIDE * i,
+    index: i
+  }), []);
+  const handleMomentumEnd = useCallback(e => {
+    const next = Math.round(e.nativeEvent.contentOffset.x / pageW);
+    const item = imageItems[next];
+    if (!item) return;
+    const fullIndex = indexById.get(item.id);
+    if (fullIndex !== undefined) setIndex(fullIndex);
+  }, [imageItems, indexById, pageW]);
+  const handleThumbPress = useCallback(id => {
+    const fullIndex = indexById.get(id);
+    if (fullIndex === undefined) return;
+    setIndex(fullIndex);
+    const page = pageIndexById.get(id);
+    if (page !== undefined) {
+      pagerRef.current?.scrollToIndex({
+        index: page,
+        animated: motion.enabled
+      });
+    }
+  }, [indexById, pageIndexById, motion.enabled]);
+  const renderPage = useCallback(({
+    item
+  }) => /*#__PURE__*/_jsx(ImageViewerPage, {
+    uri: item.uri,
+    pageStyle: pageStyle,
+    testID: testID ? `${testID}-page-${item.id}` : undefined
+  }), [pageStyle, testID]);
+  const activeBorder = theme.colors.accent.solid;
+  const thumbCount = imageItems.length;
+  const renderThumb = useCallback(({
+    item,
+    index
+  }) => /*#__PURE__*/_jsx(ImageViewerThumb, {
+    id: item.id,
+    uri: item.thumbUri ?? item.uri,
+    label: item.label,
+    position: index + 1,
+    total: thumbCount,
+    active: item.id === currentId,
+    activeBorder: activeBorder,
+    mode: theme.mode,
+    onPress: handleThumbPress,
+    testID: testID ? `${testID}-thumb-${item.id}` : undefined
+  }), [currentId, activeBorder, theme.mode, thumbCount, handleThumbPress, testID]);
+  const bodyStyle = useMemo(() => ({
+    gap: theme.space[3]
+  }), [theme]);
+  if (!current || !enterExit.mounted) return null;
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: enterExit.mounted,
+    onRequestClose: onRequestClose,
+    title: current.label ?? "Image",
+    size: "lg",
+    testID: testID,
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      testID: testID ? `${testID}-body` : undefined,
+      style: [bodyStyle, enterExit.style, style],
+      children: [/*#__PURE__*/_jsx(FlatList, {
+        ref: pagerRef,
+        horizontal: true,
+        pagingEnabled: true,
+        data: imageItems,
+        keyExtractor: keyExtractor,
+        initialScrollIndex: initialScrollIndex,
+        getItemLayout: getPageLayout,
+        onMomentumScrollEnd: handleMomentumEnd,
+        renderItem: renderPage,
+        showsHorizontalScrollIndicator: false
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.actions,
+        children: /*#__PURE__*/_jsx(Button, {
+          label: "Share",
+          variant: "outline",
+          icon: "share",
+          onPress: handleShare
+        })
+      }), imageItems.length > 1 ? /*#__PURE__*/_jsx(FlatList, {
+        horizontal: true,
+        data: imageItems,
+        keyExtractor: keyExtractor,
+        getItemLayout: getThumbLayout,
+        renderItem: renderThumb,
+        contentContainerStyle: styles.thumbs,
+        showsHorizontalScrollIndicator: false
+      }) : null]
+    })
+  });
+});
+const ImageViewerPage = /*#__PURE__*/memo(function ImageViewerPage({
+  uri,
+  pageStyle,
+  testID
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: pageStyle,
+    children: /*#__PURE__*/_jsx(MediaImage, {
+      testID: testID,
+      source: {
+        uri
+      },
+      contentFit: "contain",
+      recyclingKey: uri,
+      style: styles.image
+    })
+  });
+});
+const ImageViewerThumb = /*#__PURE__*/memo(function ImageViewerThumb({
+  id,
+  uri,
+  label,
+  position,
+  total,
+  active,
+  activeBorder,
+  mode,
+  onPress,
+  testID
+}) {
+  const handlePress = useCallback(() => onPress(id), [onPress, id]);
+  const thumbStyle = useMemo(() => [styles.thumb, active ? {
+    borderColor: activeBorder,
+    borderWidth: 2
+  } : styles.thumbInactive], [active, activeBorder]);
+  const androidRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(mode),
+    borderless: false
+  } : undefined, [mode]);
+  // Border colour alone isn't a reliable selection cue (colour-blind users, low-vision) — the
+  // dimmed opacity on unselected thumbs is the redundant, non-colour signal (WCAG 1.4.1).
+  const imageStyle = useMemo(() => [styles.thumbImage, {
+    opacity: active ? 1 : 0.6
+  }], [active]);
+  const accessibilityLabel = label ? `${label}, image ${position} of ${total}` : `Image ${position} of ${total}`;
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      selected: active
+    },
+    onPress: handlePress,
+    android_ripple: androidRipple,
+    style: thumbStyle,
+    children: /*#__PURE__*/_jsx(MediaImage, {
+      testID: testID,
+      source: {
+        uri
+      },
+      contentFit: "cover",
+      recyclingKey: uri,
+      style: imageStyle
+    })
+  });
+});
+const styles = StyleSheet.create({
+  imagePage: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  image: {
+    width: "100%",
+    height: "100%"
+  },
+  actions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  },
+  thumbs: {
+    gap: THUMB_GAP
+  },
+  thumb: {
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  thumbInactive: {
+    borderWidth: 0
+  },
+  thumbImage: {
+    width: "100%",
+    height: "100%"
+  }
+});
+//# sourceMappingURL=ImageViewer.js.map

package/lib/module/modules/image-viewer/ImageViewer.variants.js

@@ -0,0 +1,6 @@
+"use strict";
+
+/** ImageViewer has no variant unions — layout constants only. */
+
+export const IMAGE_VIEWER_PAGE_PADDING = 48;
+//# sourceMappingURL=ImageViewer.variants.js.map

package/lib/module/modules/image-viewer/MODULE.md

@@ -0,0 +1,63 @@
+# image-viewer/
+
+Modal image gallery with paging and thumbnails. Heavy module — subpath only.
+
+## Accessibility
+
+- **2.1.1 keyboard (web only)** — INHERITED whole from `Modal` (Escape, the Tab trap, focus restore
+  on the `ModalPortalProvider` branch). Sharpest case in the library: the viewer's only dismiss
+  affordance is the backdrop, so on that branch a keyboard user previously had no way to close it at
+  all. No keyboard code lives here — `__tests__/ImageViewer.keyboard.web.test.tsx` asserts the
+  inheritance.
+- **Thumbnail strip (1.3.1 / 1.4.1 / 4.1.2)** — each `ImageViewerThumb` carries
+  `accessibilityRole="button"`, `accessibilityState={{ selected: active }}`, and an
+  `accessibilityLabel` built from the item's own `label` plus its position ("Photo, image 2 of 5"),
+  never a bare unlabelled tap target. The active thumb is also marked by a dimmed opacity on every
+  OTHER thumb, not by `activeBorder` colour alone — a colour-blind or low-vision user can tell which
+  image is open without relying on hue.
+
+## Motion contract
+
+- Open/close runs through `useEnterExit()` from `core/motion`: `opacity` + `translateY` on the
+  native driver. The **unmount is timer-driven**, never gated on the animation reporting `finished`,
+  so an interrupted close can never leave the viewer mounted. The RN modal stays mounted until that
+  timer fires, which is what makes the close transition visible.
+- Pager: a thumbnail press scrolls the pager to that page with `scrollToIndex({ animated })`, where
+  `animated` is `motion.enabled` — so reduce motion jumps straight to the page.
+- No per-cell animation on pages or thumbnails.
+
+## Performance
+
+- Both the pager and the thumbnail strip are virtualized horizontal `FlatList`s with `getItemLayout`
+  (fixed page width / thumb stride). The thumbnail strip used to be an eager `.map()` that mounted
+  every `Image` at once. `core/list`'s `VirtualList` is not used here — it exposes no `horizontal`
+  or `pagingEnabled`.
+- `id -> index` lookups are memoized maps, replacing an `O(n)` `findIndex` that ran inside a per-item
+  closure on every render.
+- Pages and thumbs are extracted `React.memo` components; the thumb takes a stable `onPress(id)`
+  callback rather than a closure per item.
+- **Every image goes through `core/media`'s `MediaImage`.** Pages and thumbs used to be RN `Image`s
+  sharing one URI, so a 56dp thumbnail decoded the full 12MP original — ~48MB of bitmap per photo
+  against a ~100–200MB per-process budget on a weak Android. `expo-image` downsamples to the target
+  box natively, off the JS thread, and caches `memory-disk`; `recyclingKey` blanks a recycled cell.
+  `MediaImage` falls back to RN `Image` + the matching `resizeMode` when the app never injected
+  `expo-image` (an optional peer), so the viewer renders either way.
+- **`thumbUri` is the real fix when the consumer has renditions** — the strip prefers it and falls
+  back to `uri`.
+- Screen size comes from `useWindowDimensions()`, not a module-scope `Dimensions.get("window")`:
+  the old value froze at import and never followed rotation, split-screen or a foldable unfold.
+
+## Props
+
+| Prop | Type | Default |
+|------|------|---------|
+| `visible` | `boolean` | — |
+| `onRequestClose` | `() => void` | — |
+| `items` | `readonly ImageViewerItem[]` | — |
+| `initialIndex` | `number` | `0` |
+| `onShare` | `(item: ImageViewerItem) => void` | — |
+| `style` | `LayoutStyle` | — |
+| `testID` | `string` | — |
+
+`ImageViewerItem`: `id`, `uri`, `label?`, and `thumbUri?` — a smaller rendition for the thumbnail
+strip. `testID` seeds `${testID}-body`, `${testID}-page-<id>` and `${testID}-thumb-<id>`.

package/lib/module/modules/image-viewer/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { ImageViewer } from "./ImageViewer.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/input/Input.js

@@ -5,12 +5,18 @@
  * comes from `createThemedVariants`, and the focus indicator is the same offset-ring pattern as
  * Button: a `border.focus` ring drawn a small gap OUTSIDE the field, on the canvas, because that is
  * the role token proven ≥ 3:1 against the canvas (over the field's own border it isn't guaranteed).
+ *
+ * Motion comes from `core/motion` — the ring crossfades on focus/blur and the helper/error message
+ * fades in and out. Both honour reduce-motion through `useMotion()`.
  */
 
-import { memo, useState } from "react";
-import { Platform, StyleSheet, Text, TextInput, View } from "react-native";
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Animated, Platform, StyleSheet, Text, TextInput, View } from "react-native";
+import { useAnnounce } from "../../core/a11y/index.js";
+import { withAlpha } from "../../core/gradient/index.js";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { useAnimatedValue, useEnterExit, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { INPUT_SIZES, inputStructure, resolveInputAccessibility, resolveInputStatus } from "./Input.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FOCUS_RING_WIDTH = 2;
@@ -31,20 +37,95 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
     secureTextEntry,
     accessibilityLabel,
     containerStyle,
-    testID
+    testID,
+    autoComplete
   } = props;
   const theme = useTheme();
+  const motion = useMotion();
   const [focused, setFocused] = useState(false);
   const spec = INPUT_SIZES[size];
   const statusColors = resolveInputStatus(theme.colors, status);
   const a11y = resolveInputAccessibility({
     label,
     accessibilityLabel,
-    disabled
+    disabled,
+    status,
+    helperText,
+    errorText
   });
 
-  // Error message takes priority over the helper text — the field shows one message at a time.
-  const message = status === "error" ? errorText : helperText;
+  // The field shows one message at a time — the resolver owns that rule (error wins over helper).
+  const message = a11y.message;
+  // Links the rendered helper line to the field on web, where `accessibilityHint` does not exist.
+  // Only ever the ADVISORY line: an error is already inside the accessible name.
+  const hintId = useId();
+  useAnnounce(status === "error" ? message : undefined);
+  const messageMotion = useEnterExit(message !== undefined);
+  // Holds the text on screen while the exit tween runs.
+  const lastMessage = useRef(message);
+  if (message !== undefined) lastMessage.current = message;
+  const ringOpacity = useAnimatedValue(0);
+  const ringAnimation = useRef(null);
+  const setRingVisible = useCallback(visible => {
+    ringAnimation.current?.stop();
+    const to = visible ? 1 : 0;
+    if (!motion.enabled) {
+      ringOpacity.setValue(to);
+      return;
+    }
+    ringAnimation.current = motion.timing(ringOpacity, to, {
+      duration: "fast"
+    });
+    ringAnimation.current.start();
+  }, [motion, ringOpacity]);
+  useEffect(() => () => ringAnimation.current?.stop(), []);
+  const handleFocus = useCallback(() => {
+    if (!disabled) {
+      setFocused(true);
+      setRingVisible(true);
+    }
+  }, [disabled, setRingVisible]);
+  const handleBlur = useCallback(() => {
+    setFocused(false);
+    setRingVisible(false);
+  }, [setRingVisible]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.default,
+    marginBottom: theme.space[1]
+  }], [theme]);
+  const fieldStyle = useMemo(() => [inputStructure(theme, {
+    size
+  }), focused ? {
+    borderWidth: 2,
+    borderColor: theme.colors.accent.solid,
+    backgroundColor: withAlpha(theme.colors.accent.solid, 0.04)
+  } : {
+    borderColor: statusColors.border
+  }, disabled && styles.dimmed], [theme, size, statusColors.border, disabled, focused]);
+  const focusRingStyle = useMemo(() => ({
+    position: "absolute",
+    top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    left: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    right: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    borderWidth: FOCUS_RING_WIDTH,
+    borderColor: theme.colors.border.focus,
+    borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+    borderCurve: "continuous"
+  }), [theme]);
+  const inputTextStyle = useMemo(() => [{
+    flex: 1,
+    alignSelf: "stretch",
+    fontSize: spec.fontSize,
+    color: theme.colors.fg.default,
+    padding: 0
+  }, theme.fontStyleForWeight(theme.fontWeights.regular), Platform.OS === "web" && styles.webOutlineReset], [theme, spec.fontSize]);
+  const messageStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.xs,
+    color: statusColors.message,
+    marginTop: theme.space[1]
+  }], [theme, statusColors.message]);
   const glyph = name => /*#__PURE__*/_jsx(Icon, {
     name: name,
     size: spec.iconSize,
@@ -60,60 +141,48 @@ export const Input = /*#__PURE__*/memo(function Input(props) {
     _jsx(Text, {
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
-      style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-        fontSize: theme.fontSizes.sm,
-        color: theme.colors.fg.default,
-        marginBottom: theme.space[1]
-      }],
+      style: labelStyle,
       children: label
     }), /*#__PURE__*/_jsxs(View, {
-      style: [inputStructure(theme, {
-        size
-      }), {
-        borderColor: statusColors.border
-      }, disabled && styles.dimmed],
-      children: [focused && !disabled && /*#__PURE__*/_jsx(View, {
+      style: fieldStyle,
+      children: [/*#__PURE__*/_jsx(Animated.View, {
         pointerEvents: "none",
         testID: "input-focus-ring",
-        style: {
-          position: "absolute",
-          top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-          left: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-          right: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-          bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
-          borderWidth: FOCUS_RING_WIDTH,
-          borderColor: theme.colors.border.focus,
-          borderRadius: theme.radii.base + FOCUS_RING_GAP + FOCUS_RING_WIDTH
-        }
+        style: [focusRingStyle, {
+          opacity: ringOpacity
+        }]
       }), leadingIcon && glyph(leadingIcon), /*#__PURE__*/_jsx(TextInput, {
         testID: testID,
         value: value,
         onChangeText: onChangeText,
         placeholder: placeholder,
-        placeholderTextColor: theme.colors.fg.muted,
+        placeholderTextColor: theme.colors.fg.placeholder,
         secureTextEntry: secureTextEntry,
+        autoComplete: autoComplete,
+        importantForAutofill: autoComplete === "off" ? "no" : undefined,
         editable: a11y.editable,
         accessibilityLabel: a11y.accessibilityLabel,
-        accessibilityState: a11y.accessibilityState,
+        accessibilityHint: a11y.accessibilityHint,
+        "aria-describedby": a11y.accessibilityHint === undefined ? undefined : hintId,
+        "aria-invalid": a11y["aria-invalid"],
+        "aria-disabled": a11y["aria-disabled"],
         hitSlop: spec.hitSlop,
-        onFocus: () => setFocused(true),
-        onBlur: () => setFocused(false),
-        style: [{
-          flex: 1,
-          alignSelf: "stretch",
-          fontSize: spec.fontSize,
-          color: theme.colors.fg.default,
-          padding: 0
-        }, theme.fontStyleForWeight(theme.fontWeights.regular), Platform.OS === "web" && styles.webOutlineReset]
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        style: inputTextStyle
       }), trailingIcon && glyph(trailingIcon)]
-    }), message !== undefined && /*#__PURE__*/_jsx(Text, {
-      accessibilityLiveRegion: status === "error" ? "polite" : undefined,
-      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-        fontSize: theme.fontSizes.xs,
-        color: statusColors.message,
-        marginTop: theme.space[1]
-      }],
-      children: message
+    }), messageMotion.mounted && lastMessage.current !== undefined &&
+    /*#__PURE__*/
+    // No `accessibilityLiveRegion` (deliberate): it's Android-only, and `useAnnounce` above
+    // already announces on both platforms — keeping both would double-announce on Android.
+    // Hidden only once the message is gone: `lastMessage` outlives it for the exit tween, and a
+    // stale error must not sit in the a11y tree while it fades.
+    _jsx(Animated.Text, {
+      nativeID: hintId,
+      accessibilityElementsHidden: message === undefined,
+      importantForAccessibility: message === undefined ? "no-hide-descendants" : undefined,
+      style: [messageStyle, messageMotion.style],
+      children: lastMessage.current
     })]
   });
 });
@@ -126,7 +195,9 @@ const styles = StyleSheet.create({
   // outline on top of the themed ring above it — a visible double border. Web-only: `outlineWidth`
   // also drives native TV remote-control focus, so zeroing it globally would break that.
   webOutlineReset: {
-    outlineWidth: 0
+    outlineStyle: "solid",
+    outlineWidth: 0,
+    borderWidth: 0
   }
 });
 //# sourceMappingURL=Input.js.map

package/lib/module/modules/input/Input.variants.js

@@ -28,22 +28,22 @@ const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2)
  */
 export const INPUT_SIZES = {
   sm: {
-    height: 32,
+    height: 44,
     fontSize: 14,
     iconSize: 16,
-    hitSlop: slopFor(32)
+    hitSlop: slopFor(44)
   },
   md: {
-    height: 40,
+    height: 52,
     fontSize: 16,
     iconSize: 18,
-    hitSlop: slopFor(40)
+    hitSlop: slopFor(52)
   },
   lg: {
-    height: 48,
+    height: 56,
     fontSize: 18,
     iconSize: 20,
-    hitSlop: slopFor(48)
+    hitSlop: slopFor(56)
   }
 };
 /**
@@ -74,14 +74,28 @@ export function resolveInputStatus(colors, status) {
  * renderer. RN's `TextInput` has no `htmlFor`-equivalent link to a sibling label `Text`, so the
  * label's content must be copied onto `accessibilityLabel` directly (an explicit
  * `accessibilityLabel` always wins).
+ *
+ * The validity message rides the NAME, not the hint — the rule `resolveFormFieldAccessibility`
+ * already states and this resolver used to contradict: a hint is advisory and some readers suppress
+ * it, which a WCAG 3.3.1 message must never be. `helperText` is genuinely advisory, so it stays on
+ * the hint (native) and is linked by `aria-describedby` to the rendered message node (web, where
+ * `accessibilityHint` does not exist at all). The two never overlap: in the error state the message
+ * is in the name and `aria-invalid` is set, so nothing is announced twice.
+ *
+ * `message` is returned separately from `accessibilityHint` because the two diverged when the error
+ * moved into the name — the component still renders one visible line, error winning over helper.
  */
 export function resolveInputAccessibility(input) {
   const disabled = input.disabled === true;
+  const isError = (input.status ?? "default") === "error";
+  const errorInName = isError && input.errorText ? input.errorText : undefined;
+  const name = [input.accessibilityLabel ?? input.label, errorInName].filter(part => part !== undefined && part !== "");
   return {
-    accessibilityLabel: input.accessibilityLabel ?? input.label,
-    accessibilityState: {
-      disabled
-    },
+    accessibilityLabel: name.length > 0 ? name.join(", ") : undefined,
+    accessibilityHint: errorInName === undefined ? input.helperText : undefined,
+    "aria-invalid": isError,
+    "aria-disabled": disabled,
+    message: errorInName ?? input.helperText,
     editable: !disabled
   };
 }
@@ -96,7 +110,8 @@ export const inputStructure = createThemedVariants(theme => ({
     flexDirection: "row",
     alignItems: "center",
     borderWidth: theme.borderWidths.thin,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.md,
+    borderCurve: "continuous",
     columnGap: theme.space[2]
   },
   variants: {