pixelize-native-library 1.0.6 → 1.2.0

package/lib/module/modules/reorder/Reorder.js

@@ -1,42 +1,52 @@
 "use strict";
 
 /**
- * Reorder — a drag-to-reorder list built on plain `PanResponder` + `Animated` (Wave 3: no new
- * dependency). Each row's drag handle is a hand-built three-bar "grip" glyph (no `IconName` in the
- * closed 22-name set represents a drag handle, and that set is never extended for one component) —
- * the `PanResponder` lives on the grip ONLY, not the whole row, so the label text never fights the
- * gesture.
+ * Reorder — a drag-to-reorder list built on ONE shared `Gesture.Pan()` (react-native-gesture-handler)
+ * and five reanimated shared values for the WHOLE list. There is no per-row responder and no per-row
+ * `Animated.Value`: a 500-item list constructs one gesture and five animated nodes, and only the
+ * rows `VirtualList` currently has on screen ever mount.
  *
- * The list is FULLY CONTROLLED: `items`/`onReorder` are the only source of truth. While a drag is
- * live, the component tracks purely EPHEMERAL state — which row grabbed the gesture (`startIndex`)
- * and which slot it is over now (`targetIndex`), both cleared on release — and previews the reorder
- * by shifting the OTHER rows out of the way with `resolveRowShift` (see `Reorder.variants.ts`); the
- * underlying `items` array is never mutated mid-drag, only on release, via `onReorder`. Because the
- * shift preview and the final `moveItem` commit share the exact same splice semantics, the row that
- * was being dragged lands in the same visual slot its shifted neighbours already vacated — no jump.
+ * A row's grip reports the grabbed item by id (`onGrab`); the shared pan then owns the rest of the
+ * drag on the reanimated UI thread — `translationY` follows the finger and `targetIndex` is the
+ * closed-form row it is over (`resolveDragTargetIndex`). Every row's own `useAnimatedStyle` reads
+ * those shared values and animates ONLY `transform` (translateY) and `opacity`; a passive row's
+ * preview offset is `resolveRowShift`, the dragged row's is the raw `translationY`.
  *
- * WCAG 2.5.7 (Dragging Movements) requires a non-dragging way to perform the same function: every
- * row also renders two `Button` icon-only presses ("Move X up" / "Move X down", reusing the shipped
- * `chevron-up`/`chevron-down` names), disabled at the list's own start/end via
- * `resolveReorderMoveState`. This is the REQUIRED accessible path, not optional polish — it is a
- * real `accessibilityRole="button"` each (Button's own contract), fully operable without any touch
- * gesture, and it shares `moveItem` with the drag path so both always agree.
+ * The list stays FULLY CONTROLLED: `items` is never mutated mid-drag. On release the pan hands off
+ * to JS once (`runOnJS`) and commits `moveItem(items, startIndex, targetIndex)` through `onReorder`.
+ * Because the preview and the commit share the same splice semantics, the dragged row lands in the
+ * slot its shifted neighbours already vacated — and passive rows snap back to 0 the instant
+ * `activeIndex` goes idle, so no stale offset can outlive the drop.
  *
- * The grip itself carries no accessible action of its own — `PanResponder` gestures are invisible to
- * assistive tech, and exposing it as a fake, non-operable "button" would be misleading — so it is
- * hidden from the accessibility tree (`accessibilityElementsHidden` + `no-hide-descendants`, the same
- * pairing `Timeline`'s decorative connector uses), leaving the up/down `Button`s as the one real
- * accessible affordance for reordering.
+ * WCAG 2.5.7 (Dragging Movements) requires a non-dragging way to do the same thing: every row also
+ * renders two icon-only `Button`s ("Move X up" / "Move X down") sharing the same `moveItem`. The
+ * grip carries no accessible action of its own — a gesture is invisible to assistive tech, and a
+ * fake non-operable "button" would mislead — so it stays hidden from the accessibility tree.
+ *
+ * Those buttons disable at the list's ends, EXCEPT the one currently holding keyboard focus: moving
+ * an item to an end would otherwise disable the very button that was just pressed and drop focus to
+ * nothing (WCAG 2.4.3). See `ReorderRow` for the trade — an inert focused button, never lost focus.
+ *
+ * A row's own accessible name states its position ("<label>, item 2 of 5", WCAG 1.3.1) — order is
+ * this component's entire purpose, and screen position is otherwise the only way to read it. On
+ * commit — from either the drag gesture or a move button — `useAnnounce` speaks the result (WCAG
+ * 4.1.3): the accessible buttons already move the list, but without this the new order was
+ * observable only by sight, which defeated the point of having them.
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, PanResponder, Text, View } from "react-native";
-import { useReducedMotion } from "../../core/a11y/index.js";
-import { useTheme } from "../../theme/index.js";
+import { Text, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { cancelAnimation, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useAnnounce } from "../../core/a11y/index.js";
+import { VirtualList } from "../../core/list/index.js";
+import { useMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
-import { GRIP_HIT_SLOP, moveItem, reorderGripBarStructure, reorderGripStructure, reorderListStructure, reorderRowStructure, resolveDragTargetIndex, resolveReorderColors, resolveReorderMoveState, resolveRowPitch, resolveRowShift } from "./Reorder.variants.js";
+import { GRIP_HIT_SLOP, moveItem, reorderGripBarStructure, reorderGripStructure, reorderRowStructure, resolveDragTargetIndex, resolveReorderColors, resolveReorderMoveAnnouncement, resolveReorderMoveState, resolveReorderRowLabel, resolveRowPitch, resolveRowShift } from "./Reorder.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SHIFT_DURATION_MS = 200;
+/** `activeIndex`/`targetIndex` when nothing is being dragged. */
+const IDLE = -1;
 export const Reorder = /*#__PURE__*/memo(function Reorder({
   items,
   onReorder,
@@ -45,222 +55,244 @@ export const Reorder = /*#__PURE__*/memo(function Reorder({
   testID
 }) {
   const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-  // Memoized so every row (see `ReorderRow` below) gets the same `colors` reference across renders
-  // that don't change the theme — a fresh object here would defeat `ReorderRow`'s own `React.memo`.
+  const motion = useMotion();
   const colors = useMemo(() => resolveReorderColors(theme.colors), [theme.colors]);
-  const [dragState, setDragState] = useState(null);
-  // Mirrors `dragState` for `handleDragEnd` to read without depending on it directly — depending on
-  // `dragState` there would recreate that callback (and its `onDragEnd` prop reference on every row)
-  // on each drag-target transition, defeating every `ReorderRow`'s memo mid-drag, the exact hot path
-  // this component's memoization is for.
-  const dragStateRef = useRef(dragState);
-  dragStateRef.current = dragState;
-  const dragY = useRef(new Animated.Value(0)).current;
   const rowPitch = resolveRowPitch(theme.space[2]);
+  const activeIndex = useSharedValue(IDLE);
+  const targetIndex = useSharedValue(IDLE);
+  const translationY = useSharedValue(0);
+  const lift = useSharedValue(0);
+  const itemCount = useSharedValue(items.length);
 
-  // Each row's own preview-shift `Animated.Value`, keyed by the item's stable id (not array index)
-  // so `handleDragEnd` below can reach every row and snap it back to 0 synchronously — see there for
-  // why that reset can't be left to each row's own effect.
-  const shiftValues = useRef(new Map()).current;
-  const getShiftValue = id => {
-    let value = shiftValues.get(id);
-    if (value === undefined) {
-      value = new Animated.Value(0);
-      shiftValues.set(id, value);
-    }
-    return value;
-  };
+  // Only the lifted row's non-animatable chrome (raised fill, elevation, zIndex) needs React state;
+  // it flips twice per drag, not once per frame.
+  const [activeRow, setActiveRow] = useState(null);
+
+  // Set once per committed move (button or drag), never per frame — `useAnnounce` itself dedupes an
+  // unchanged message, so a move that lands back on the same phrasing is silently not re-spoken.
+  const [announcement, setAnnouncement] = useState(undefined);
+  useAnnounce(announcement);
+
+  // Read by the drag commit, which must see the CURRENT array/callback without rebuilding the
+  // gesture — a `GestureDetector` re-registering mid-drag would drop the live gesture.
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const onReorderRef = useRef(onReorder);
+  onReorderRef.current = onReorder;
+  const motionEnabled = motion.enabled;
+  const liftMs = motion.duration("fast");
   useEffect(() => {
-    const liveIds = new Set(items.map(item => item.id));
-    shiftValues.forEach((_value, id) => {
-      if (!liveIds.has(id)) shiftValues.delete(id);
-    });
-  }, [items, shiftValues]);
-  const handleDragStart = useCallback(index => {
-    dragY.setValue(0);
-    setDragState({
-      startIndex: index,
-      targetIndex: index
-    });
-  }, [dragY]);
-  const handleDragMove = useCallback((index, dy) => {
-    dragY.setValue(dy);
-    const targetIndex = resolveDragTargetIndex(index, dy, rowPitch, items.length);
-    setDragState(prev => prev !== null && prev.targetIndex === targetIndex ? prev : {
-      startIndex: index,
-      targetIndex
-    });
-  }, [dragY, rowPitch, items.length]);
-  const handleDragEnd = useCallback(() => {
-    // Every row's own `shift` must already read 0 in the SAME tick the array commits. React
-    // relocates a reordered row instantly via its stable `item.id` key, so a row that was previewed
-    // mid-drag would otherwise keep animating its stale offset toward 0 AFTER already landing in its
-    // new (correct) slot — a visible jump-then-slide. Resetting here, synchronously and before the
-    // `dragState` update below flips every row's `shiftTarget` prop to 0, means that prop-driven
-    // effect (in `ReorderRow`) only ever animates 0 → 0 — a no-op, not a stale-value correction.
-    shiftValues.forEach(value => value.setValue(0));
-    // `onReorder` (the consumer's own state setter, e.g. `setItems`) must NOT be called from inside
-    // a `setDragState` updater function — React requires updater functions to be pure, and may
-    // invoke them while processing `Reorder`'s own render, which is exactly what produced "Cannot
-    // update a component (…) while rendering a different component (Reorder)". Read via
-    // `dragStateRef` (kept in sync above on every render) rather than closing over `dragState`
-    // directly, so this callback's identity stays stable across a drag instead of churning on every
-    // target-row transition — see the ref's own comment for why that stability matters.
-    const currentDragState = dragStateRef.current;
-    if (currentDragState !== null && currentDragState.startIndex !== currentDragState.targetIndex) {
-      onReorder(moveItem(items, currentDragState.startIndex, currentDragState.targetIndex));
+    itemCount.value = items.length;
+  }, [items.length, itemCount]);
+  useEffect(() => () => {
+    cancelAnimation(lift);
+    cancelAnimation(translationY);
+  }, [lift, translationY]);
+  const beginDrag = useCallback(id => {
+    if (disabled) return;
+    const index = itemsRef.current.findIndex(item => item.id === id);
+    if (index < 0) return;
+    cancelAnimation(lift);
+    cancelAnimation(translationY);
+    translationY.value = 0;
+    activeIndex.value = index;
+    targetIndex.value = index;
+    lift.value = motionEnabled ? withTiming(1, {
+      duration: liftMs
+    }) : 1;
+    setActiveRow(index);
+  }, [disabled, activeIndex, targetIndex, translationY, lift, motionEnabled, liftMs]);
+  const endDrag = useCallback(() => {
+    const from = activeIndex.value;
+    if (from === IDLE) return;
+    const to = targetIndex.value;
+    activeIndex.value = IDLE;
+    targetIndex.value = IDLE;
+    translationY.value = 0;
+    cancelAnimation(lift);
+    lift.value = 0;
+    setActiveRow(null);
+    if (from !== to) {
+      const moved = itemsRef.current[from];
+      onReorderRef.current(moveItem(itemsRef.current, from, to));
+      if (moved !== undefined) {
+        setAnnouncement(resolveReorderMoveAnnouncement(moved.label, to, itemsRef.current.length));
+      }
     }
-    setDragState(null);
-    dragY.setValue(0);
-  }, [shiftValues, items, onReorder, dragY]);
+  }, [activeIndex, targetIndex, translationY, lift]);
+  const pan = useMemo(() => Gesture.Pan()
+  // Without manual activation the pan swallows the virtualized list's own scroll gesture.
+  .manualActivation(true).onTouchesMove((_event, manager) => {
+    "worklet";
+
+    if (activeIndex.value === IDLE) manager.fail();else manager.activate();
+  }).onChange(event => {
+    "worklet";
+
+    if (activeIndex.value === IDLE) return;
+    translationY.value = event.translationY;
+    targetIndex.value = resolveDragTargetIndex(activeIndex.value, event.translationY, rowPitch, itemCount.value);
+  }).onFinalize(() => {
+    "worklet";
+
+    if (activeIndex.value === IDLE) return;
+    runOnJS(endDrag)();
+  }), [activeIndex, targetIndex, translationY, itemCount, rowPitch, endDrag]);
   const handleMove = useCallback((fromIndex, toIndex) => {
+    // A row's move button stays operable while it holds focus even at the list's end (see
+    // `ReorderRow`), so the out-of-range press it can then receive has to no-op here.
+    if (toIndex < 0 || toIndex >= items.length || disabled) return;
+    const moved = items[fromIndex];
     onReorder(moveItem(items, fromIndex, toIndex));
-  }, [items, onReorder]);
-
-  // `onMoveUp`/`onMoveDown` are handed to every row (see `ReorderRow` below); binding `index` here
-  // via one stable per-list callback (rather than a fresh `() => handleMove(index, index ± 1)`
-  // closure per row per render) keeps their identity stable across renders that don't touch
-  // `handleMove`, so a row's own `React.memo` isn't defeated by these two props alone.
+    if (moved !== undefined) {
+      setAnnouncement(resolveReorderMoveAnnouncement(moved.label, toIndex, items.length));
+    }
+  }, [items, onReorder, disabled]);
   const handleMoveUp = useCallback(index => handleMove(index, index - 1), [handleMove]);
   const handleMoveDown = useCallback(index => handleMove(index, index + 1), [handleMove]);
+  const renderItem = useCallback(({
+    item,
+    index
+  }) => {
+    const moveState = resolveReorderMoveState(index, items.length, disabled);
+    return /*#__PURE__*/_jsx(ReorderRow, {
+      item: item,
+      index: index,
+      count: items.length,
+      disabled: disabled,
+      isDragging: activeRow === index,
+      rowPitch: rowPitch,
+      motionEnabled: motionEnabled,
+      liftMs: liftMs,
+      liftOpacity: motion.transform.pressOpacity,
+      activeIndex: activeIndex,
+      targetIndex: targetIndex,
+      translationY: translationY,
+      lift: lift,
+      colors: colors,
+      theme: theme,
+      upDisabled: moveState.upDisabled,
+      downDisabled: moveState.downDisabled,
+      onGrab: beginDrag,
+      onMoveUp: handleMoveUp,
+      onMoveDown: handleMoveDown,
+      testID: testID === undefined ? undefined : `${testID}-item-${index}`
+    });
+  }, [items.length, disabled, activeRow, rowPitch, motionEnabled, liftMs, motion.transform.pressOpacity, activeIndex, targetIndex, translationY, lift, colors, theme, beginDrag, handleMoveUp, handleMoveDown, testID]);
+  const keyExtractor = useCallback(item => item.id, []);
   return /*#__PURE__*/_jsx(View, {
     testID: testID,
-    style: [reorderListStructure(theme), style],
-    children: items.map((item, index) => {
-      const rowTestID = testID === undefined ? undefined : `${testID}-item-${index}`;
-      const moveState = resolveReorderMoveState(index, items.length, disabled);
-      const isDragging = dragState !== null && dragState.startIndex === index;
-      const shiftTarget = dragState === null ? 0 : resolveRowShift(index, dragState.startIndex, dragState.targetIndex, rowPitch);
-      return /*#__PURE__*/_jsx(ReorderRow, {
-        item: item,
-        index: index,
-        disabled: disabled,
-        isDragging: isDragging,
-        shiftTarget: shiftTarget,
-        shift: getShiftValue(item.id),
-        dragY: dragY,
-        reducedMotion: reducedMotion,
-        colors: colors,
-        theme: theme,
-        upDisabled: moveState.upDisabled,
-        downDisabled: moveState.downDisabled,
-        onDragStart: handleDragStart,
-        onDragMove: handleDragMove,
-        onDragEnd: handleDragEnd,
-        onMoveUp: handleMoveUp,
-        onMoveDown: handleMoveDown,
-        testID: rowTestID
-      }, item.id);
+    style: style,
+    children: /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: pan,
+      children: /*#__PURE__*/_jsx(View, {
+        children: /*#__PURE__*/_jsx(VirtualList, {
+          data: items,
+          renderItem: renderItem,
+          keyExtractor: keyExtractor,
+          itemHeight: rowPitch
+        })
+      })
     })
   });
 });
 /**
- * One row. Split out as its own component (rather than inlined in `Reorder`'s `.map()`) because
- * its shift-settle effect needs a per-row hook instance — Rules of Hooks forbid calling `useEffect`
- * inside a loop body. `shift` itself is now passed in (owned by `Reorder`, keyed by `item.id`), not
- * a locally-owned ref, so `handleDragEnd` can reset it synchronously on drop — see there for why.
- * Wrapped in `React.memo`: `Reorder` re-renders every row on each drag-move tick, so only a row
- * whose own props actually changed (its `shiftTarget`/`isDragging`, primarily) should re-render.
+ * One row. Memoized because `Reorder` re-renders its rows when the lifted row changes, and because
+ * `VirtualList` recycles them; everything that moves per FRAME comes from the shared values below,
+ * so a live drag re-renders nothing.
  */
 const ReorderRow = /*#__PURE__*/memo(function ReorderRow({
   item,
   index,
+  count,
   disabled,
   isDragging,
-  shiftTarget,
-  shift,
-  dragY,
-  reducedMotion,
+  rowPitch,
+  motionEnabled,
+  liftMs,
+  liftOpacity,
+  activeIndex,
+  targetIndex,
+  translationY,
+  lift,
   colors,
   theme,
   upDisabled,
   downDisabled,
-  onDragStart,
-  onDragMove,
-  onDragEnd,
+  onGrab,
   onMoveUp,
   onMoveDown,
   testID
 }) {
-  useEffect(() => {
-    if (reducedMotion) {
-      shift.setValue(shiftTarget);
-      return;
+  const animatedStyle = useAnimatedStyle(() => {
+    const active = activeIndex.value;
+    if (active === IDLE) return {
+      transform: [{
+        translateY: 0
+      }],
+      opacity: 1
+    };
+    if (active === index) {
+      return {
+        transform: [{
+          translateY: translationY.value
+        }],
+        opacity: 1 - (1 - liftOpacity) * lift.value
+      };
     }
-    Animated.timing(shift, {
-      toValue: shiftTarget,
-      duration: SHIFT_DURATION_MS,
-      useNativeDriver: true
-    }).start();
-  }, [shift, shiftTarget, reducedMotion]);
-
-  // Recreated every render — a fresh closure over this render's `disabled`/index means there is no
-  // stale-closure risk to manage via refs (the same trade Button/Select make for their own inline
-  // `onPress` closures).
-  const panResponder = PanResponder.create({
-    onStartShouldSetPanResponder: () => !disabled,
-    onMoveShouldSetPanResponder: () => !disabled,
-    onPanResponderGrant: () => onDragStart(index),
-    onPanResponderMove: (_event, gestureState) => onDragMove(index, gestureState.dy),
-    onPanResponderRelease: () => onDragEnd(index),
-    onPanResponderTerminate: () => onDragEnd(index)
-  });
-  const {
-    onStartShouldSetResponder,
-    onMoveShouldSetResponder,
-    onResponderGrant,
-    onResponderMove,
-    onResponderRelease,
-    onResponderTerminate,
-    onResponderTerminationRequest
-  } = panResponder.panHandlers;
-  const gripColor = disabled ? colors.gripDisabled : colors.grip;
-  const gripTestID = testID === undefined ? undefined : `${testID}-grip`;
+    const shift = resolveRowShift(index, active, targetIndex.value, rowPitch);
+    return {
+      transform: [{
+        translateY: motionEnabled ? withTiming(shift, {
+          duration: liftMs
+        }) : shift
+      }],
+      opacity: 1
+    };
+  }, [index, rowPitch, motionEnabled, liftMs, liftOpacity]);
 
-  // Bind this row's own `index` into `onMoveUp`/`onMoveDown` once per render, rather than handing
-  // `Button` (this library's own component) a fresh inline closure on every render regardless of
-  // whether `index` or the handler actually changed.
+  // Which of the two move buttons holds keyboard/AT focus, if either. Disabling the button a user is
+  // standing on drops focus to the document body (WCAG 2.4.3) — RNW gives a disabled Pressable
+  // `tabIndex={-1}` in the SAME commit as the move — so the focused button stays operable-but-inert
+  // (`handleMove` ignores the out-of-range press) until focus leaves it.
+  const [focusedControl, setFocusedControl] = useState(null);
+  const handleGrab = useCallback(() => onGrab(item.id), [onGrab, item.id]);
   const handlePressUp = useCallback(() => onMoveUp(index), [onMoveUp, index]);
   const handlePressDown = useCallback(() => onMoveDown(index), [onMoveDown, index]);
+  const handleFocusUp = useCallback(() => setFocusedControl("up"), []);
+  const handleFocusDown = useCallback(() => setFocusedControl("down"), []);
+  const handleBlurControl = useCallback(() => setFocusedControl(null), []);
+  const gripColor = disabled ? colors.gripDisabled : colors.grip;
+  const gripBarStyle = [reorderGripBarStructure(theme), {
+    backgroundColor: gripColor
+  }];
   return /*#__PURE__*/_jsxs(Animated.View, {
     testID: testID,
     style: [reorderRowStructure(theme), {
       backgroundColor: isDragging ? colors.draggingRowBackground : colors.rowBackground
     }, isDragging && theme.elevation.md, {
-      transform: [{
-        translateY: isDragging ? dragY : shift
-      }],
       zIndex: isDragging ? 1 : 0
-    }],
+    }, animatedStyle],
     children: [/*#__PURE__*/_jsxs(View, {
-      testID: gripTestID,
+      testID: testID === undefined ? undefined : `${testID}-grip`,
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
-      hitSlop: GRIP_HIT_SLOP,
-      onStartShouldSetResponder: onStartShouldSetResponder,
-      onMoveShouldSetResponder: onMoveShouldSetResponder,
-      onResponderGrant: onResponderGrant,
-      onResponderMove: onResponderMove,
-      onResponderRelease: onResponderRelease,
-      onResponderTerminate: onResponderTerminate,
-      onResponderTerminationRequest: onResponderTerminationRequest,
+      hitSlop: GRIP_HIT_SLOP
+      // Only the grab is reported here — gesture-handler cancels this view's touches once the
+      // pan activates, so the pan's own `onFinalize` is the single owner of the drag's end.
+      ,
+      onTouchStart: disabled ? undefined : handleGrab,
       style: reorderGripStructure(),
       children: [/*#__PURE__*/_jsx(View, {
-        style: [reorderGripBarStructure(theme), {
-          backgroundColor: gripColor
-        }]
+        style: gripBarStyle
       }), /*#__PURE__*/_jsx(View, {
-        style: [reorderGripBarStructure(theme), {
-          backgroundColor: gripColor
-        }]
+        style: gripBarStyle
       }), /*#__PURE__*/_jsx(View, {
-        style: [reorderGripBarStructure(theme), {
-          backgroundColor: gripColor
-        }]
+        style: gripBarStyle
       })]
     }), /*#__PURE__*/_jsx(Text, {
       numberOfLines: 1,
+      accessibilityLabel: resolveReorderRowLabel(item.label, index, count),
       style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
         flex: 1,
         fontSize: theme.fontSizes.md,
@@ -272,18 +304,22 @@ const ReorderRow = /*#__PURE__*/memo(function ReorderRow({
       variant: "ghost",
       tone: "neutral",
       size: "sm",
-      disabled: upDisabled,
+      disabled: upDisabled && focusedControl !== "up",
       accessibilityLabel: `Move ${item.label} up`,
       onPress: handlePressUp,
+      onFocus: handleFocusUp,
+      onBlur: handleBlurControl,
       testID: testID === undefined ? undefined : `${testID}-move-up`
     }), /*#__PURE__*/_jsx(Button, {
       icon: "chevron-down",
       variant: "ghost",
       tone: "neutral",
       size: "sm",
-      disabled: downDisabled,
+      disabled: downDisabled && focusedControl !== "down",
       accessibilityLabel: `Move ${item.label} down`,
       onPress: handlePressDown,
+      onFocus: handleFocusDown,
+      onBlur: handleBlurControl,
       testID: testID === undefined ? undefined : `${testID}-move-down`
     })]
   });

package/lib/module/modules/reorder/Reorder.variants.js

@@ -77,6 +77,23 @@ export function resolveReorderMoveState(index, count, disabled) {
   };
 }
 
+/**
+ * A row's accessible name. Position in the list is otherwise carried only by where the row sits on
+ * screen (WCAG 1.3.1) — and reordering is the one thing this component exists to do, so a user who
+ * can't see the row's place can't tell whether their move landed.
+ */
+export function resolveReorderRowLabel(label, index, count) {
+  return `${label}, item ${index + 1} of ${count}`;
+}
+
+/**
+ * Spoken after a committed move (WCAG 4.1.3). The accessible up/down buttons and the drag gesture
+ * share it: both change the same order, and neither moves focus to anything that would report it.
+ */
+export function resolveReorderMoveAnnouncement(label, toIndex, count) {
+  return `${label} moved to position ${toIndex + 1} of ${count}`;
+}
+
 /**
  * Pure array move: `fromIndex` → `toIndex` (clamped into range). Used by BOTH the drag gesture and
  * the accessible up/down buttons, so both interaction paths are guaranteed to produce the same
@@ -92,12 +109,13 @@ export function moveItem(items, fromIndex, toIndex) {
 }
 
 /**
- * The REAL on-screen distance between two rows' tops: the row's own height plus the `rowGap` the
- * list container applies between rows (the same `theme.space[2]` `reorderListStructure` uses below)
- * — NOT `REORDER_ROW_HEIGHT` alone, which is how tall a row is, not how far apart two rows sit.
+ * The REAL on-screen distance between two rows' tops: the row's own height plus the gap the row
+ * carries below it (the same `theme.space[2]` `reorderRowStructure` applies as `marginBottom`) —
+ * NOT `REORDER_ROW_HEIGHT` alone, which is how tall a row is, not how far apart two rows sit.
  * `resolveDragTargetIndex`/`resolveRowShift` must be given THIS distance (call with
  * `theme.space[2]`, never a hardcoded gap), or the target-row flip fires one `rowGap` early and the
  * preview shift undershoots the vacated slot by `rowGap` per row, compounding on multi-row shifts.
+ * It is also the `itemHeight` `VirtualList` gets, so `getItemLayout` matches the real layout.
  */
 export function resolveRowPitch(rowGap) {
   return REORDER_ROW_HEIGHT + rowGap;
@@ -107,9 +125,12 @@ export function resolveRowPitch(rowGap) {
  * The row a drag gesture is over right now, from the accumulated `dy` since the gesture grabbed
  * `startIndex` — a closed-form step count against the REAL row pitch (see `resolveRowPitch`),
  * clamped into the list's bounds. Rounds to the nearest row, so a drag must cross half a row's
- * PITCH to advance a step.
+ * PITCH to advance a step. Marked `"worklet"` so the shared pan gesture can call it on the UI
+ * thread; it stays an ordinary function from JS, so the pure tests below call it directly.
  */
 export function resolveDragTargetIndex(startIndex, dy, rowPitch, itemCount) {
+  "worklet";
+
   const steps = Math.round(dy / rowPitch);
   return Math.max(0, Math.min(itemCount - 1, startIndex + steps));
 }
@@ -122,28 +143,29 @@ export function resolveDragTargetIndex(startIndex, dy, rowPitch, itemCount) {
  * `resolveRowPitch`) — row height alone undershoots by `rowGap` per row. Symmetric with `moveItem`'s
  * splice semantics: on drop, the dragged row's array position becomes `targetIndex` and every
  * shifted row's array position is unchanged — only its on-screen slot moved — so this is exactly the
- * visual preview of what `moveItem` will commit.
+ * visual preview of what `moveItem` will commit. Marked `"worklet"` so each row's
+ * `useAnimatedStyle` can call it on the UI thread; still an ordinary function from JS.
  */
 export function resolveRowShift(rowIndex, startIndex, targetIndex, rowPitch) {
+  "worklet";
+
   if (startIndex === targetIndex) return 0;
   if (startIndex < targetIndex && rowIndex > startIndex && rowIndex <= targetIndex) return -rowPitch;
   if (startIndex > targetIndex && rowIndex < startIndex && rowIndex >= targetIndex) return rowPitch;
   return 0;
 }
 
-/** The list container: rows are laid out as plain flex children, spaced by `rowGap`. */
-export const reorderListStructure = createThemedVariants(theme => ({
-  base: {
-    rowGap: theme.space[2]
-  }
-}));
-
-/** The whole row: fixed height (see `REORDER_ROW_HEIGHT`), grip/label/buttons spaced by `columnGap`. */
+/**
+ * The whole row: fixed height (see `REORDER_ROW_HEIGHT`), grip/label/buttons spaced by `columnGap`.
+ * The inter-row gap is the row's own `marginBottom`, not a container `rowGap` — rows are virtualized
+ * cells now, and a container gap never lands between them.
+ */
 export const reorderRowStructure = createThemedVariants(theme => ({
   base: {
     flexDirection: "row",
     alignItems: "center",
     height: REORDER_ROW_HEIGHT,
+    marginBottom: theme.space[2],
     paddingHorizontal: theme.space[3],
     borderRadius: theme.radii.base,
     columnGap: theme.space[3]