pixelize-native-library 1.0.7 → 1.2.0

package/lib/module/modules/pin-input/PinInput.js

@@ -14,8 +14,8 @@
  */
 
 import { memo, useEffect, useRef, useState } from "react";
-import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
-import { useTheme } from "../../theme/index.js";
+import { Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import { useTheme } from "../../theme/hooks.js";
 import { clampPinInputValue, isPinInputComplete, PIN_INPUT_SIZES, pinInputBoxStructure, pinInputRowStructure, resolvePinInputAccessibility, resolvePinInputActiveIndex, resolvePinInputBoxColors } from "./PinInput.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FOCUS_RING_WIDTH = 2;
@@ -29,6 +29,7 @@ export const PinInput = /*#__PURE__*/memo(function PinInput(props) {
     secureTextEntry = false,
     keyboardType = "number-pad",
     status = "default",
+    errorText,
     disabled = false,
     size = "md",
     autoFocus = false,
@@ -45,7 +46,9 @@ export const PinInput = /*#__PURE__*/memo(function PinInput(props) {
     accessibilityLabel,
     value,
     disabled,
-    secureTextEntry
+    secureTextEntry,
+    status,
+    errorText
   });
   const activeIndex = resolvePinInputActiveIndex(value, length);
 
@@ -65,81 +68,100 @@ export const PinInput = /*#__PURE__*/memo(function PinInput(props) {
   const handleChangeText = raw => {
     onValueChange(clampPinInputValue(raw, length, keyboardType));
   };
-  return /*#__PURE__*/_jsxs(Pressable, {
-    testID: testID,
-    accessible: false,
-    disabled: disabled,
-    onPress: disabled ? undefined : focusInput,
-    hitSlop: spec.hitSlop,
-    style: [pinInputRowStructure(theme, {
-      size
-    }), disabled && styles.dimmed, style],
-    children: [Array.from({
-      length
-    }, (_, index) => {
-      const char = value[index];
-      const isActive = focused && index === activeIndex;
-      return /*#__PURE__*/_jsxs(View, {
-        testID: testID ? `${testID}-box-${index}` : undefined,
-        accessibilityRole: "none",
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no-hide-descendants",
-        style: [pinInputBoxStructure(theme, {
-          size
-        }), {
-          borderColor: boxColors.border
-        }],
-        children: [isActive && /*#__PURE__*/_jsx(View, {
-          pointerEvents: "none",
-          testID: "pin-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
-          }
-        }), char !== undefined && (secureTextEntry ? /*#__PURE__*/_jsx(View, {
-          testID: testID ? `${testID}-dot-${index}` : undefined,
-          style: {
-            width: spec.dotSize,
-            height: spec.dotSize,
-            borderRadius: spec.dotSize / 2,
-            backgroundColor: boxColors.text
-          }
-        }) : /*#__PURE__*/_jsx(Text, {
-          style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
-            fontSize: spec.fontSize,
-            color: boxColors.text
+  return /*#__PURE__*/_jsxs(View, {
+    style: style,
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      testID: testID,
+      accessible: false,
+      disabled: disabled,
+      onPress: disabled ? undefined : focusInput,
+      hitSlop: spec.hitSlop,
+      style: [pinInputRowStructure(theme, {
+        size
+      }), disabled && styles.dimmed],
+      children: [Array.from({
+        length
+      }, (_, index) => {
+        const char = value[index];
+        const isActive = focused && index === activeIndex;
+        return /*#__PURE__*/_jsxs(View, {
+          testID: testID ? `${testID}-box-${index}` : undefined,
+          accessibilityRole: "none",
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          style: [pinInputBoxStructure(theme, {
+            size
+          }), {
+            borderColor: boxColors.border
           }],
-          children: char
-        }))]
-      }, index);
-    }), /*#__PURE__*/_jsx(TextInput, {
-      ref: inputRef,
-      testID: testID ? `${testID}-input` : undefined,
-      value: value,
-      onChangeText: handleChangeText,
-      secureTextEntry: secureTextEntry,
-      keyboardType: keyboardType,
-      maxLength: length,
-      autoFocus: autoFocus,
-      autoCorrect: false,
-      autoCapitalize: "none",
-      spellCheck: false,
-      caretHidden: true,
-      textContentType: keyboardType === "number-pad" ? "oneTimeCode" : undefined,
-      editable: a11y.editable,
-      accessibilityLabel: a11y.accessibilityLabel,
-      accessibilityValue: a11y.accessibilityValue,
-      accessibilityState: a11y.accessibilityState,
-      onFocus: () => setFocused(true),
-      onBlur: () => setFocused(false),
-      pointerEvents: "none",
-      style: [StyleSheet.absoluteFill, styles.hiddenInput]
+          children: [isActive && /*#__PURE__*/_jsx(View, {
+            pointerEvents: "none",
+            testID: "pin-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
+            }
+          }), char !== undefined && (secureTextEntry ? /*#__PURE__*/_jsx(View, {
+            testID: testID ? `${testID}-dot-${index}` : undefined,
+            style: {
+              width: spec.dotSize,
+              height: spec.dotSize,
+              borderRadius: spec.dotSize / 2,
+              backgroundColor: boxColors.text
+            }
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+              fontSize: spec.fontSize,
+              color: boxColors.text
+            }],
+            children: char
+          }))]
+        }, index);
+      }), /*#__PURE__*/_jsx(TextInput, {
+        ref: inputRef,
+        testID: testID ? `${testID}-input` : undefined,
+        value: value,
+        onChangeText: handleChangeText,
+        secureTextEntry: secureTextEntry,
+        keyboardType: keyboardType,
+        maxLength: length,
+        autoFocus: autoFocus,
+        autoCorrect: false,
+        autoCapitalize: "none",
+        spellCheck: false,
+        caretHidden: true
+        // Not gated on `number-pad`: an alphanumeric one-time code is still a one-time code, and
+        // gating it meant `keyboardType="default"` silently lost iOS's SMS-code suggestion.
+        ,
+        textContentType: "oneTimeCode"
+        // The Android half of the same feature — `textContentType` is iOS-only, so without this
+        // TalkBack/autofill never offered the SMS code at all on Android.
+        ,
+        autoComplete: Platform.OS === "android" ? "sms-otp" : "one-time-code",
+        editable: a11y.editable,
+        accessibilityLabel: a11y.accessibilityLabel,
+        accessibilityValue: a11y.accessibilityValue,
+        "aria-valuetext": a11y["aria-valuetext"],
+        "aria-disabled": a11y["aria-disabled"],
+        "aria-invalid": a11y["aria-invalid"],
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        style: [StyleSheet.absoluteFill, styles.hiddenInput, Platform.OS === "web" && styles.webOutlineReset]
+      })]
+    }), a11y.message !== undefined && /*#__PURE__*/_jsx(Text, {
+      testID: testID ? `${testID}-error` : undefined,
+      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+        fontSize: theme.fontSizes.xs,
+        color: theme.colors.status.danger.text,
+        marginTop: theme.space[1]
+      }],
+      children: a11y.message
     })]
   });
 });
@@ -148,11 +170,20 @@ const styles = StyleSheet.create({
   dimmed: {
     opacity: 0.5
   },
-  // Real, focusable, and editable — just visually suppressed. `opacity: 0` (not `display: none`) so
-  // it stays in the accessibility tree and keeps accepting the OS keyboard / paste / autofill.
+  // Invisible via `color: "transparent"` ALONE — never `opacity: 0`. UIKit drops any view with
+  // `alpha == 0` from the accessibility tree, and this is the component's only accessibility
+  // element, so the whole control was unreachable by VoiceOver. Transparent text keeps alpha at 1:
+  // the field stays a real, focusable, long-pressable node (which is also what restores the OS
+  // paste callout) while rendering nothing, since RNW/RN both give TextInput a transparent
+  // background and no border of its own.
   hiddenInput: {
-    opacity: 0,
     color: "transparent"
+  },
+  // RNW renders `TextInput` as a real `<input>`, whose UA focus outline would paint over the
+  // per-box focus ring. Web-only: `outlineWidth` also drives native TV remote focus.
+  webOutlineReset: {
+    outlineStyle: "solid",
+    outlineWidth: 0
   }
 });
 //# sourceMappingURL=PinInput.js.map

package/lib/module/modules/pin-input/PinInput.variants.js

@@ -104,18 +104,26 @@ const ACCESSIBILITY_MASK_CHAR = "•";
  * Derives the accessibility surface once, purely — same shape as `resolveInputAccessibility`, but
  * `accessibilityLabel` is required (never a fallback) because PinInput has no visible text label of
  * its own; the caller must always name the field (e.g. "6-digit verification code").
+ *
+ * `status="error"` used to change the box border and NOTHING else — no message, no programmatic
+ * flag — so the failure was carried by colour alone (WCAG 1.4.1) and never identified (3.3.1). The
+ * error now joins the accessible name and sets `aria-invalid`, exactly as `FormField` does it.
  */
 export function resolvePinInputAccessibility(input) {
   const disabled = input.disabled === true;
   const masked = input.secureTextEntry === true;
+  const isError = (input.status ?? "default") === "error";
+  const errorInName = isError && input.errorText ? input.errorText : undefined;
+  const text = masked ? ACCESSIBILITY_MASK_CHAR.repeat(input.value.length) : input.value;
   return {
-    accessibilityLabel: input.accessibilityLabel,
+    accessibilityLabel: [input.accessibilityLabel, errorInName].filter(part => part !== undefined && part !== "").join(", "),
     accessibilityValue: {
-      text: masked ? ACCESSIBILITY_MASK_CHAR.repeat(input.value.length) : input.value
-    },
-    accessibilityState: {
-      disabled
+      text
     },
+    "aria-valuetext": text,
+    "aria-disabled": disabled,
+    "aria-invalid": isError,
+    message: errorInName,
     editable: !disabled
   };
 }

package/lib/module/modules/progress-bar/MODULE.md

@@ -28,12 +28,16 @@ loop. It takes no children and no interaction — it is a status display, not a
 ## Accessibility contract (WCAG)
 
 - `accessibilityRole="progressbar"` on the outer (track) node, always `accessible`.
-- **Determinate** — `accessibilityValue={{ min: 0, max: 100, now: value }}` (value already clamped),
-  `accessibilityState={{ busy: false }}`.
-- **Indeterminate** — **no** `accessibilityValue` at all. The absence of `now` is how assistive tech
+- **Determinate** — `aria-valuemin={0}` `aria-valuemax={100}` `aria-valuenow={value}` (value already
+  clamped), `aria-busy={false}`.
+- **Indeterminate** — **no** `aria-value*` at all. The absence of `now` is how assistive tech
   reports "indeterminate"; inventing a guessed number would misreport actual progress.
-  `accessibilityState={{ busy: true }}` (1.4.1) announces the ongoing work the visual sweep alone
-  doesn't convey to a screen reader.
+  `aria-busy={true}` (1.4.1) announces the ongoing work the visual sweep alone doesn't convey to a
+  screen reader.
+- **Flat `aria-*` props, not `accessibilityValue`/`accessibilityState` objects** — react-native-web
+  0.21.2 only forwards the flat vocabulary to the DOM (`createDOMProps`); the object form is
+  silently dropped there, though RN's `View` still folds the flat props back into those objects
+  natively. `resolveProgressBarAccessibility` returns the flat shape directly.
 - **1.4.11 (non-text contrast)** — every tone's fill is measured ≥ 3:1 against the `bg.sunken`
   track, for all 8 brands × both modes (`ProgressBar.test.ts`) — the fill is a non-text UI boundary
   conveying information (WCAG 1.4.11), not decoration.
@@ -86,8 +90,8 @@ render without restarting the loop.
    its height always fills the track, applied inline). Colour (track's single `bg.sunken`, and the
    tone-driven fill) is resolved and applied inline, same split as `buttonStructure`.
 2. **Looping `Animated` value, reduced-motion gated** — the same shape as `Skeleton`'s shimmer:
-   `useRef(new Animated.Value(0))`, an `Animated.loop` started/stopped in a `useEffect` keyed on the
-   condition that should suppress it, never a paused-mid-animation static value.
+   `useAnimatedValue(0)` (from `core/motion`), an `Animated.loop` started/stopped in a `useEffect`
+   keyed on the condition that should suppress it, never a paused-mid-animation static value.
 3. **Pure, testable resolvers** in `ProgressBar.variants.ts` (no React, no Animated) so the WCAG +
    value-clamp + accessibility contracts are unit-tested against real palettes — never eyeballed.
 4. **Closed unions only** (`tone`/`size`), `style: LayoutStyle` last and once, no `{...rest}`.
@@ -99,3 +103,9 @@ None — no icon, no new theme token, no new core helper needed for this compone
 ## Performance
 
 Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). Only renders `View`/`Animated.View` (host elements) — no library child components, nothing to memoize.
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.
+- List-heavy surfaces use `VirtualList` with device-tier window sizing where applicable.
+- `React.memo` + stable callbacks retained; render-item/key-extractor hoisted per ESLint perf rules.

package/lib/module/modules/progress-bar/ProgressBar.js

@@ -1,17 +1,21 @@
 "use strict";
 
 /**
- * ProgressBar — a linear progress indicator. Determinate (`value` 0–100) renders a static fill
- * sized to the value; indeterminate (`value` omitted) renders a looping `Animated` sweep across the
- * track, skipped in favour of a static half-filled track when `useReducedMotion()` is true (WCAG
- * 2.3.3 — never a frame frozen mid-sweep).
+ * ProgressBar — a linear progress indicator. Determinate (`value` 0–100) tweens a full-width fill
+ * by `scaleX` off its left edge; indeterminate (`value` omitted) renders a looping sweep across the
+ * track, skipped in favour of a static half-filled track when motion is off (WCAG 2.3.3 — never a
+ * frame frozen mid-sweep).
+ *
+ * The determinate fill is `scaleX`, never an animated `width`: only `opacity` and `transform` run on
+ * the native driver, and a per-frame width would force a layout pass. `transformOrigin: "left"`
+ * anchors the growth so the fill does not expand from its centre.
  */
 
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, View } from "react-native";
-import { useReducedMotion } from "../../core/a11y/index.js";
-import { useTheme } from "../../theme/index.js";
-import { progressBarFillStructure, progressBarTrackStructure, REDUCED_MOTION_FILL_FRACTION, resolveProgressBarAccessibility, resolveProgressBarFill, resolveProgressBarValue, SWEEP_DURATION_MS, SWEEP_FRACTION } from "./ProgressBar.variants.js";
+import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { progressBarFillStructure, progressBarTrackStructure, REDUCED_MOTION_FILL_FRACTION, resolveProgressBarAccessibility, resolveProgressBarFill, resolveProgressBarValue, SWEEP_FRACTION } from "./ProgressBar.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const ProgressBar = /*#__PURE__*/memo(function ProgressBar({
   value,
@@ -22,80 +26,117 @@ export const ProgressBar = /*#__PURE__*/memo(function ProgressBar({
   testID
 }) {
   const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  const sweep = useRef(new Animated.Value(0)).current;
+  const motion = useMotion();
+  const sweep = useAnimatedValue(0);
   const [trackWidth, setTrackWidth] = useState(0);
   const clampedValue = resolveProgressBarValue(value);
   const determinate = clampedValue !== undefined;
   const fillColor = resolveProgressBarFill(theme.colors, tone);
-  const a11y = resolveProgressBarAccessibility({
+  const a11y = useMemo(() => resolveProgressBarAccessibility({
     value: clampedValue
-  });
+  }), [clampedValue]);
+  const progress = useAnimatedValue((clampedValue ?? 0) / 100);
+  const progressAnimation = useRef(null);
+  const firstValue = useRef(true);
+
+  // Tweens the fill toward each new value. The first value is snapped, not tweened — a bar that
+  // mounts at 60% should read as 60%, never as an unrequested fill-up animation.
+  useEffect(() => {
+    if (clampedValue === undefined) return undefined;
+    const target = clampedValue / 100;
+    progressAnimation.current?.stop();
+    if (!motion.enabled || firstValue.current) {
+      firstValue.current = false;
+      progress.setValue(target);
+      return undefined;
+    }
+    progressAnimation.current = motion.timing(progress, target, {
+      easing: "decelerate"
+    });
+    progressAnimation.current.start();
+    return () => progressAnimation.current?.stop();
+  }, [clampedValue, motion, progress]);
+  const sweepAnimation = useRef(null);
 
-  // WCAG 2.3.3 — the sweep never starts (and never mounts) once reduced motion is on; the branch
-  // below renders a static half-filled track instead of a frame frozen mid-sweep.
+  // The sweep is the only affordance an indeterminate bar has, so it is gated on `motion.enabled`
+  // alone — never on the decorative tier, which would leave a mid-tier device with a dead track.
   useEffect(() => {
-    if (determinate || reducedMotion) return undefined;
-    const loop = Animated.loop(Animated.timing(sweep, {
-      toValue: 1,
-      duration: SWEEP_DURATION_MS,
-      useNativeDriver: true
+    if (determinate || !motion.enabled) return undefined;
+    sweepAnimation.current = Animated.loop(motion.timing(sweep, 1, {
+      duration: "deliberate"
     }));
-    loop.start();
-    return () => loop.stop();
-  }, [determinate, reducedMotion, sweep]);
-  const handleLayout = event => {
+    sweepAnimation.current.start();
+    return () => {
+      sweepAnimation.current?.stop();
+      sweepAnimation.current = null;
+    };
+  }, [determinate, motion, sweep]);
+  useEffect(() => () => {
+    progressAnimation.current?.stop();
+    sweepAnimation.current?.stop();
+  }, []);
+  const handleLayout = useCallback(event => {
     setTrackWidth(event.nativeEvent.layout.width);
-  };
+  }, []);
 
   // The sweep's translateX range is derived from the track's own measured width (there is no
   // reliable percentage-based `transform`), so it recomputes with layout — the loop itself never
   // restarts, only the distance it travels.
   const sweepWidth = trackWidth * SWEEP_FRACTION;
-  const translateX = sweep.interpolate({
+  const translateX = useMemo(() => sweep.interpolate({
     inputRange: [0, 1],
     outputRange: [-sweepWidth, trackWidth]
-  });
+  }), [sweep, sweepWidth, trackWidth]);
+  const trackStyle = useMemo(() => [progressBarTrackStructure(theme, {
+    size
+  }), {
+    backgroundColor: theme.colors.bg.sunken
+  }, style], [theme, size, style]);
+  const determinateFillStyle = useMemo(() => [progressBarFillStructure(theme), {
+    height: "100%",
+    width: "100%",
+    backgroundColor: fillColor,
+    transformOrigin: "left",
+    transform: [{
+      scaleX: progress
+    }]
+  }], [theme, fillColor, progress]);
+  const staticFillStyle = useMemo(() => [progressBarFillStructure(theme), {
+    height: "100%",
+    width: `${REDUCED_MOTION_FILL_FRACTION * 100}%`,
+    backgroundColor: fillColor
+  }], [theme, fillColor]);
+  const sweepStyle = useMemo(() => [progressBarFillStructure(theme), {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width: sweepWidth,
+    backgroundColor: fillColor,
+    transform: [{
+      translateX
+    }]
+  }], [theme, sweepWidth, fillColor, translateX]);
   return /*#__PURE__*/_jsxs(View, {
     testID: testID,
     onLayout: handleLayout,
     accessible: true,
     accessibilityRole: a11y.accessibilityRole,
     accessibilityLabel: accessibilityLabel,
-    accessibilityValue: a11y.accessibilityValue,
-    accessibilityState: a11y.accessibilityState,
-    style: [progressBarTrackStructure(theme, {
-      size
-    }), {
-      backgroundColor: theme.colors.bg.sunken
-    }, style],
-    children: [determinate && /*#__PURE__*/_jsx(View, {
+    "aria-valuemin": a11y["aria-valuemin"],
+    "aria-valuemax": a11y["aria-valuemax"],
+    "aria-valuenow": a11y["aria-valuenow"],
+    "aria-busy": a11y["aria-busy"],
+    style: trackStyle,
+    children: [determinate && /*#__PURE__*/_jsx(Animated.View, {
       testID: testID === undefined ? undefined : `${testID}-fill`,
-      style: [progressBarFillStructure(theme), {
-        height: "100%",
-        width: `${clampedValue}%`,
-        backgroundColor: fillColor
-      }]
-    }), !determinate && reducedMotion && /*#__PURE__*/_jsx(View, {
+      style: determinateFillStyle
+    }), !determinate && !motion.enabled && /*#__PURE__*/_jsx(View, {
       testID: testID === undefined ? undefined : `${testID}-fill`,
-      style: [progressBarFillStructure(theme), {
-        height: "100%",
-        width: `${REDUCED_MOTION_FILL_FRACTION * 100}%`,
-        backgroundColor: fillColor
-      }]
-    }), !determinate && !reducedMotion && /*#__PURE__*/_jsx(Animated.View, {
+      style: staticFillStyle
+    }), !determinate && motion.enabled && /*#__PURE__*/_jsx(Animated.View, {
       testID: testID === undefined ? undefined : `${testID}-sweep`,
       pointerEvents: "none",
-      style: [progressBarFillStructure(theme), {
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        width: sweepWidth,
-        backgroundColor: fillColor,
-        transform: [{
-          translateX
-        }]
-      }]
+      style: sweepStyle
     })]
   });
 });

package/lib/module/modules/progress-bar/ProgressBar.variants.js

@@ -30,14 +30,12 @@ export const PROGRESS_BAR_SIZES = {
 
 /** Fraction of the track's measured width the indeterminate sweep segment covers. */
 export const SWEEP_FRACTION = 0.4;
-/** One full indeterminate sweep cycle, ms. */
-export const SWEEP_DURATION_MS = 1200;
 /** Fill fraction rendered, static, when the sweep is skipped for reduced motion (WCAG 2.3.3). */
 export const REDUCED_MOTION_FILL_FRACTION = 0.5;
 
 /**
  * Clamps a caller-given value onto the 0–100 scale the track, the fill width, and
- * `accessibilityValue.now` all agree on. `undefined` is preserved — that absence IS the
+ * `aria-valuenow` all agree on. `undefined` is preserved — that absence IS the
  * indeterminate signal, never a value to coerce. A `NaN` (a caller's bad ratio math) clamps to `0`
  * rather than propagating into a `NaN%` width or an invalid `now`.
  */
@@ -78,12 +76,16 @@ export function resolveProgressBarFill(colors, tone) {
 /**
  * Derives the accessibility surface once, purely, so the determinate/indeterminate contract is
  * testable without a renderer:
- *  - determinate (`value` given) → `accessibilityValue` carries `now`; `busy` is false once the
+ *  - determinate (`value` given) → `aria-valuenow` carries the position; `busy` is false once the
  *    value is known.
- *  - indeterminate (`value` omitted) → NO `accessibilityValue` at all. The absence of `now` is how
+ *  - indeterminate (`value` omitted) → NO value props at all. The absence of `now` is how
  *    assistive tech reports "indeterminate" — inventing a guessed number would misreport actual
- *    progress. `busy: true` (WCAG 1.4.1) announces the ongoing work the visual sweep alone doesn't
+ *    progress. `aria-busy` (WCAG 1.4.1) announces the ongoing work the visual sweep alone doesn't
  *    convey to a screen reader.
+ *
+ * Flat `aria-*` rather than the `accessibilityState`/`accessibilityValue` objects: RN's `View`
+ * folds the flat props back into those objects, while react-native-web only ever forwards the flat
+ * ones — the object form reaches nothing at all on web.
  */
 export function resolveProgressBarAccessibility(input) {
   const {
@@ -92,22 +94,18 @@ export function resolveProgressBarAccessibility(input) {
   if (value === undefined) {
     return {
       accessibilityRole: "progressbar",
-      accessibilityValue: undefined,
-      accessibilityState: {
-        busy: true
-      }
+      "aria-valuemin": undefined,
+      "aria-valuemax": undefined,
+      "aria-valuenow": undefined,
+      "aria-busy": true
     };
   }
   return {
     accessibilityRole: "progressbar",
-    accessibilityValue: {
-      min: 0,
-      max: 100,
-      now: value
-    },
-    accessibilityState: {
-      busy: false
-    }
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": value,
+    "aria-busy": false
   };
 }