diff --git a/.claude/skills/coding-standards/SKILL.md b/.claude/skills/coding-standards/SKILL.md
index d34adf0f723b5..f2450a4cc2fcf 100644
--- a/.claude/skills/coding-standards/SKILL.md
+++ b/.claude/skills/coding-standards/SKILL.md
@@ -15,6 +15,7 @@ Coding standards for the Expensify App. Each standard is a standalone file in `r
| Performance | `PERF-*` | Render optimization, memo patterns, useEffect hygiene, data selection |
| Consistency | `CONSISTENCY-*` | Platform checks, magic values, unused props, ESLint discipline |
| Clean React Patterns | `CLEAN-REACT-PATTERNS-*` | Composition, component ownership, state structure |
+| Accessibility | `A11Y-*` | WCAG 2.2 AA compliance, screen reader support, inclusive interaction patterns |
## Quick Reference
@@ -50,6 +51,23 @@ Coding standards for the Expensify App. Each standard is a standalone file in `r
- [CLEAN-REACT-PATTERNS-4](rules/clean-react-4-no-side-effect-spaghetti.md) — No side-effect spaghetti
- [CLEAN-REACT-PATTERNS-5](rules/clean-react-5-narrow-state.md) — Keep state narrow
+### Accessibility (WCAG 2.2 AA)
+
+**Use React Native accessibility props.** React Native Web translates them to ARIA attributes automatically. Only use `aria-*` when a React Native equivalent isn't available. Reference: [React Native Accessibility](https://reactnative.dev/docs/accessibility)
+
+- [A11Y-1](rules/a11y-1-label-interactive-elements.md) — Label interactive elements
+- [A11Y-2](rules/a11y-2-semantic-roles.md) — Semantic accessibilityRole
+- [A11Y-3](rules/a11y-3-communicate-state.md) — Communicate component state
+- [A11Y-4](rules/a11y-4-touch-target-size.md) — Minimum 44x44 touch targets
+- [A11Y-5](rules/a11y-5-announce-dynamic-content.md) — Announce dynamic content
+- [A11Y-6](rules/a11y-6-accessible-images.md) — Accessible images
+- [A11Y-7](rules/a11y-7-no-color-only-info.md) — No color-only information
+- [A11Y-8](rules/a11y-8-modal-focus-management.md) — Modal focus management
+- [A11Y-9](rules/a11y-9-drag-alternatives.md) — Drag interaction alternatives
+- [A11Y-10](rules/a11y-10-respect-text-scaling.md) — Respect text scaling
+- [A11Y-11](rules/a11y-11-form-accessibility.md) — Form accessibility
+- [A11Y-12](rules/a11y-12-logical-focus-order.md) — Logical focus order
+
## Usage
**During development**: When writing or modifying `src/` files, consult the relevant standard files for detailed conditions, examples, and exceptions.
diff --git a/.claude/skills/coding-standards/rules/a11y-1-label-interactive-elements.md b/.claude/skills/coding-standards/rules/a11y-1-label-interactive-elements.md
new file mode 100644
index 0000000000000..12ad37c03aa0e
--- /dev/null
+++ b/.claude/skills/coding-standards/rules/a11y-1-label-interactive-elements.md
@@ -0,0 +1,65 @@
+---
+ruleId: A11Y-1
+title: Interactive elements must have accessible labels
+---
+
+## [A11Y-1] Interactive elements must have accessible labels
+
+### Reasoning
+
+Screen readers (VoiceOver/TalkBack) cannot convey the purpose of an interactive element without a text label. Icon-only buttons, image-only touchables, and components whose visible text is insufficient for context must provide `accessibilityLabel`. Without it, assistive technology announces the element as an unnamed control, making the app unusable for screen reader users. (WCAG 1.1.1, 4.1.2)
+
+### Incorrect
+
+```tsx
+// Icon-only button with no label — screen reader says "button"
+
+
+
+
+// Image-only touchable with no description
+
+
+
+```
+
+### Correct
+
+```tsx
+
+
+
+
+
+
+
+```
+
+---
+
+### Review Metadata
+
+Flag ONLY when ALL of these are true:
+
+- Element is interactive (`Pressable`, `TouchableOpacity`, `TouchableWithoutFeedback`, `PressableWithFeedback`, `Button`, or has `onPress`/`onLongPress`)
+- Element contains **no visible `` child** (icon-only, image-only, or SVG-only)
+- Element has **no** `accessibilityLabel` prop
+
+**DO NOT flag if:**
+
+- Element has a `` child that clearly describes the action
+- Element is explicitly hidden from accessibility (`accessible={false}`, `accessibilityElementsHidden={true}` on iOS, `importantForAccessibility="no"` on Android)
+- Element is a list item wrapper where the child component handles its own accessibility
+
+**Search Patterns** (hints for reviewers):
+- `Account Balance
+
+// Capping font scaling to prevent layout issues instead of fixing the layout
+$2,450.00
+
+// Fixed height container that clips scaled text
+
+ This text will be clipped at larger scales
+
+```
+
+### Correct
+
+```tsx
+// Text respects system scaling (default behavior — don't override it)
+Account Balance
+
+// Flexible container that accommodates scaled text
+
+
+ This text grows with the container at larger scales
+
+
+
+// Acceptable: limiting scaling on tiny decorative text only (e.g., badge count)
+3
+```
+
+---
+
+### Review Metadata
+
+Flag ONLY when ANY of these patterns is found:
+
+- `allowFontScaling={false}` on `` or `` displaying user-facing content
+- `maxFontSizeMultiplier={1}` effectively disabling scaling on readable text
+- Fixed `height` on a container with text content and no `minHeight` or overflow accommodation
+
+**DO NOT flag if:**
+
+- `allowFontScaling={false}` on purely decorative text (icons rendered as text, single-character badges)
+- `maxFontSizeMultiplier` set to a reasonable value (>= 1.5) to prevent extreme layout breakage
+- Container uses `minHeight` instead of `height`
+- Text is inside a component that manages scaling internally
+
+**Search Patterns** (hints for reviewers):
+- `allowFontScaling={false}`
+- `maxFontSizeMultiplier={1}`
+- `maxFontSizeMultiplier={1.0}`
+- Fixed `height:` on text containers
diff --git a/.claude/skills/coding-standards/rules/a11y-11-form-accessibility.md b/.claude/skills/coding-standards/rules/a11y-11-form-accessibility.md
new file mode 100644
index 0000000000000..4cdcbb398fa28
--- /dev/null
+++ b/.claude/skills/coding-standards/rules/a11y-11-form-accessibility.md
@@ -0,0 +1,90 @@
+---
+ruleId: A11Y-11
+title: Forms must have accessible labels, errors, and instructions
+---
+
+## [A11Y-11] Forms must have accessible labels, errors, and instructions
+
+### Reasoning
+
+Screen reader users navigate forms field by field. Each input must be associated with a descriptive label so users know what to enter. While React Native uses `placeholder` as a fallback accessible name, it disappears once the user starts typing, leaving the field unlabeled. An explicit `accessibilityLabel` (or `accessibilityLabelledBy` on Android) persists regardless of input state. Error messages must be announced when they appear using `accessibilityLiveRegion` (Android) and `AccessibilityInfo.announceForAccessibility()` (iOS). (WCAG 1.3.1, 3.3.1, 3.3.2)
+
+### Incorrect
+
+```tsx
+// Input with no accessible label — screen reader says "edit text"
+
+
+// Error not announced, not associated with input
+
+{emailError && {emailError}}
+```
+
+### Correct
+
+```tsx
+// Input with accessible label
+
+
+// Android: label linked to input via nativeID
+{translate('common.email')}
+
+
+// Error announced via live region (Android) + announceForAccessibility (iOS)
+
+{emailError && (
+
+ {emailError}
+
+)}
+
+// iOS: announce error to VoiceOver
+useEffect(() => {
+ if (emailError) {
+ AccessibilityInfo.announceForAccessibility(emailError);
+ }
+}, [emailError]);
+```
+
+---
+
+### Review Metadata
+
+Flag ONLY when ANY of these patterns is found:
+
+- `` with **no** `accessibilityLabel` and **no** `accessibilityLabelledBy`
+- `` relying **only** on `placeholder` for labeling (placeholder disappears once user types, leaving the field unlabeled for screen readers)
+- Form validation error text rendered without `accessibilityLiveRegion` or `accessibilityRole="alert"`
+
+**DO NOT flag if:**
+
+- Using a form component library that wraps inputs with labels internally
+- `accessibilityLabel` is set on the input or a parent `accessible` container
+- `accessibilityLabelledBy` links to a visible label via `nativeID` (Android-only — ensure `accessibilityLabel` is also set as iOS fallback)
+
+**Search Patterns** (hints for reviewers):
+- `
+ Submit
+ Cancel
+
+
+// Header visually on top via absolute positioning, but last in JSX
+
+ Body content
+
+ Title
+
+
+```
+
+### Correct
+
+```tsx
+// JSX order matches visual reading order
+
+ Cancel
+ Submit
+
+
+// Header first in JSX, matching visual order
+
+
+ Title
+
+ Body content
+
+```
+
+---
+
+### Review Metadata
+
+Flag ONLY when ANY of these patterns is found:
+
+- `flexDirection: 'row-reverse'` or `'column-reverse'` on a container with multiple interactive children
+- Absolute positioning causing an element to appear visually before its JSX siblings
+- `zIndex` layering that places interactive elements in a different visual order than JSX order
+
+**DO NOT flag if:**
+
+- `row-reverse` is used on a container with a single child or non-interactive children
+- Visual reordering is purely decorative (no interactive elements affected)
+- The component uses `experimental_accessibilityOrder` to explicitly control focus order
+
+**Search Patterns** (hints for reviewers):
+- `flexDirection: 'row-reverse'` / `'column-reverse'`
+- `position: 'absolute'` on interactive elements
+- `zIndex` on containers with multiple interactive children
diff --git a/.claude/skills/coding-standards/rules/a11y-2-semantic-roles.md b/.claude/skills/coding-standards/rules/a11y-2-semantic-roles.md
new file mode 100644
index 0000000000000..72eb299f006f2
--- /dev/null
+++ b/.claude/skills/coding-standards/rules/a11y-2-semantic-roles.md
@@ -0,0 +1,75 @@
+---
+ruleId: A11Y-2
+title: Use semantic accessibilityRole for interactive elements
+---
+
+## [A11Y-2] Use semantic accessibilityRole for interactive elements
+
+### Reasoning
+
+React Native components have no implicit semantic meaning — assistive technology treats them as generic containers. Interactive elements must declare their role via `accessibilityRole` or `role` so screen readers can convey what the element does. Note: `role` is a cross-platform alias that takes precedence over `accessibilityRole` when both are set. (WCAG 4.1.2)
+
+### Incorrect
+
+```tsx
+// Pressable with no role — screen reader doesn't convey it's a button
+
+ Submit
+
+
+// Pressable acting as link with no role
+ openURL(href)}>
+ Learn more
+
+
+// Section heading with no role
+Account Settings
+```
+
+### Correct
+
+```tsx
+
+ Submit
+
+
+ openURL(href)}
+>
+ Learn more
+
+
+
+ Account Settings
+
+```
+
+---
+
+### Review Metadata
+
+Flag ONLY when ANY of these patterns is found:
+
+- `` or interactive component with `onPress`/`onLongPress` handler but **no** `accessibilityRole` or `role` prop
+- `` or `` navigating to a URL without `accessibilityRole="link"`
+- Text styled as a heading (large/bold, section title) without `accessibilityRole="header"`
+- Toggle/switch UI without `accessibilityRole="switch"` or `"checkbox"`
+- Tab UI without `accessibilityRole="tab"`
+
+**DO NOT flag if:**
+
+- Component already has `accessibilityRole` or `role` set
+- Using a design system component that sets the role internally (e.g., `
+
+// Checkbox with no checked state communicated
+
+
+ I agree
+
+
+// Expandable section with no expanded state
+
+ Details
+
+
+```
+
+### Correct
+
+```tsx
+
+ Submit
+
+
+
+
+ I agree
+
+
+
+ Details
+
+
+```
+
+---
+
+### Review Metadata
+
+Flag ONLY when ANY of these patterns is found:
+
+- Element has `disabled` prop but **no** `accessibilityState={{disabled: ...}}` (only on custom components — `Pressable`, `TouchableOpacity`, and `TouchableWithoutFeedback` auto-merge `disabled` into `accessibilityState`)
+- Element has `accessibilityRole="checkbox"` or `"switch"` but **no** `accessibilityState={{checked: ...}}`
+- Element visually toggles expanded/collapsed but **no** `accessibilityState={{expanded: ...}}`
+- Element visually indicates selection (active tab, selected item) but **no** `accessibilityState={{selected: ...}}`
+
+**DO NOT flag if:**
+
+- Using a design system component that handles state internally (e.g., ``, ``, ``)
+- Using `Pressable`, `TouchableOpacity`, or `TouchableWithoutFeedback` with `disabled` prop (these auto-merge `disabled` into `accessibilityState`)
+- Using Expensify's `GenericPressable` or `PressableWithFeedback` (they set `accessibilityState={{disabled}}` internally)
+- State is already communicated via `accessibilityState` on a parent or wrapper component
+
+**Search Patterns** (hints for reviewers):
+- `disabled={` without `accessibilityState`
+- `accessibilityRole="checkbox"` without `checked`
+- `accessibilityRole="switch"` without `checked`
+- Visual expand/collapse toggling without `expanded`
diff --git a/.claude/skills/coding-standards/rules/a11y-4-touch-target-size.md b/.claude/skills/coding-standards/rules/a11y-4-touch-target-size.md
new file mode 100644
index 0000000000000..6fa80d9ba3642
--- /dev/null
+++ b/.claude/skills/coding-standards/rules/a11y-4-touch-target-size.md
@@ -0,0 +1,69 @@
+---
+ruleId: A11Y-4
+title: Minimum touch target size of 44x44 points
+---
+
+## [A11Y-4] Minimum touch target size of 44x44 points
+
+### Reasoning
+
+Users with motor impairments, tremors, or limited dexterity struggle to tap small targets. WCAG 2.5.8 requires a minimum target size of 24x24 CSS pixels, but Apple HIG and Android guidelines recommend 44x44pt / 48x48dp respectively. React Native targets both platforms, so interactive elements should meet the 44x44pt minimum. Use `hitSlop` to enlarge the tappable area without changing visual layout when the visual element must be smaller.
+
+### Incorrect
+
+```tsx
+// Small icon button with no hit area expansion
+
+
+
+
+// Inline link-style button that's too small to tap reliably
+
+ Retry
+
+```
+
+### Correct
+
+```tsx
+// Properly sized touch target
+
+
+
+
+// Using hitSlop to expand tappable area without changing layout
+
+ Retry
+
+```
+
+---
+
+### Review Metadata
+
+Flag ONLY when ALL of these are true:
+
+- Element is interactive (`Pressable`, `TouchableOpacity`, `TouchableWithoutFeedback`, `PressableWithFeedback`, `Button`, or has `onPress`)
+- Element has explicit dimensions (width/height in style) **less than 44** on either axis
+- Element has **no** `hitSlop` prop to compensate
+
+**DO NOT flag if:**
+
+- Element uses `hitSlop` or `shouldUseAutoHitSlop={true}` to expand the tappable area
+- Element is within a larger tappable parent that meets the minimum
+- Element is an inline text link within a paragraph (WCAG exception)
+- Dimensions are not explicitly set (defaults may be adequate)
+- Using Expensify's `GenericPressable` or `PressableWithFeedback` with `shouldUseAutoHitSlop` (auto-computes hitSlop to meet 44x44)
+
+**Search Patterns** (hints for reviewers):
+- Explicit `width` or `height` under 44 on interactive elements (e.g., `width: 24`, `height: 32`)
+- `onPress` with small explicit sizing and no `hitSlop`
diff --git a/.claude/skills/coding-standards/rules/a11y-5-announce-dynamic-content.md b/.claude/skills/coding-standards/rules/a11y-5-announce-dynamic-content.md
new file mode 100644
index 0000000000000..bb44db8edf18a
--- /dev/null
+++ b/.claude/skills/coding-standards/rules/a11y-5-announce-dynamic-content.md
@@ -0,0 +1,81 @@
+---
+ruleId: A11Y-5
+title: Announce dynamic content changes to assistive technology
+---
+
+## [A11Y-5] Announce dynamic content changes to assistive technology
+
+### Reasoning
+
+Screen reader users cannot see visual changes — toast messages, success/error banners, loading completions, and counter updates are invisible unless explicitly announced. Full platform coverage requires **both** approaches: `accessibilityLiveRegion` works on Android (TalkBack) and web (React Native Web maps it to `aria-live`), but is a no-op on iOS. `AccessibilityInfo.announceForAccessibility()` works on iOS and Android natively, but not on web. Use both together for iOS + Android + web coverage. (WCAG 4.1.3)
+
+### Incorrect
+
+```tsx
+// Success message appears but screen reader is not informed
+{showSuccess && (
+
+ Changes saved successfully
+
+)}
+
+// Error message rendered without live region
+{error && (
+ {error}
+)}
+
+// Loading completes with no announcement
+{!isLoading && Data loaded}
+```
+
+### Correct
+
+```tsx
+// Cross-platform: live region (Android + web) + announceForAccessibility (iOS + Android native)
+{showSuccess && (
+
+ Changes saved successfully
+
+)}
+
+useEffect(() => {
+ if (showSuccess) {
+ AccessibilityInfo.announceForAccessibility(translate('common.changesSaved'));
+ }
+}, [showSuccess]);
+
+// Error messages should interrupt — use assertive (Android + web) + announcement (iOS + Android)
+{error && (
+
+ {error}
+
+)}
+
+useEffect(() => {
+ if (error) {
+ AccessibilityInfo.announceForAccessibility(error);
+ }
+}, [error]);
+```
+
+---
+
+### Review Metadata
+
+Flag ONLY when ANY of these patterns is found:
+
+- Toast, snackbar, banner, or success/error message rendered conditionally with **no** `accessibilityLiveRegion` (Android + web) and **no** `AccessibilityInfo.announceForAccessibility` call (iOS + Android)
+- Form validation error text appears dynamically with **no** live region or announcement
+- Loading state transitions (loading -> loaded) with **no** announcement
+- Counter or status text updates with **no** live region
+
+**DO NOT flag if:**
+
+- Component uses a shared notification/toast system that already handles announcements internally
+- Focus is explicitly moved to the new content via `AccessibilityInfo.setAccessibilityFocus()`
+- Content change is within a focused input field (screen reader already tracks it)
+
+**Search Patterns** (hints for reviewers):
+- Conditional rendering of success/error messages without `accessibilityLiveRegion`
+- `Toast` / `Growl` / `Banner` / `SnackBar` components
+- `AccessibilityInfo.announceForAccessibility` (presence = good)
diff --git a/.claude/skills/coding-standards/rules/a11y-6-accessible-images.md b/.claude/skills/coding-standards/rules/a11y-6-accessible-images.md
new file mode 100644
index 0000000000000..a2306e80320c6
--- /dev/null
+++ b/.claude/skills/coding-standards/rules/a11y-6-accessible-images.md
@@ -0,0 +1,70 @@
+---
+ruleId: A11Y-6
+title: Images must have labels or be hidden from assistive technology
+---
+
+## [A11Y-6] Images must have labels or be hidden from assistive technology
+
+### Reasoning
+
+Screen readers attempt to announce every image. Informative images (photos, charts, meaningful icons) need descriptive `accessibilityLabel` so users understand the content. Decorative images (background patterns, visual separators, ornamental icons) must be hidden with `accessible={false}` to avoid cluttering the screen reader experience with meaningless announcements. (WCAG 1.1.1)
+
+### Incorrect
+
+```tsx
+// Informative image with no label — screen reader says "image"
+
+
+// Decorative separator announced to screen reader unnecessarily
+
+
+// Avatar with no description
+
+```
+
+### Correct
+
+```tsx
+// Informative image with descriptive label
+
+
+// Decorative image hidden from screen reader
+
+
+// Avatar with meaningful label
+
+```
+
+---
+
+### Review Metadata
+
+Flag ONLY when ANY of these patterns is found:
+
+- `` with a meaningful `source` (not a decorative pattern) and **no** `accessibilityLabel` and **not** hidden (`accessible={false}`)
+- Icon used to convey information (status, type, category) with **no** label and **not** hidden
+- Decorative/ornamental image that is **not** hidden from assistive technology
+
+**DO NOT flag if:**
+
+- Image is inside an interactive parent that already has an `accessibilityLabel`
+- Image component internally handles accessibility (design system components)
+- Image is part of a group wrapped with `accessible={true}` and a group label
+
+**Search Patterns** (hints for reviewers):
+- `
+
+// Error indicated only by red border color
+
+
+// Required field indicated only by red asterisk color
+*
+```
+
+### Correct
+
+```tsx
+// Status uses color + icon + label
+const statusLabel = isOnline ? translate('common.online') : translate('common.offline');
+
+
+ {statusLabel}
+
+
+// Error uses color + icon + text message
+
+{hasError && (
+
+
+
+ {errorMessage}
+
+
+)}
+
+// Required field uses label text, not just color
+
+ {fieldLabel} *
+
+```
+
+---
+
+### Review Metadata
+
+Flag ONLY when ANY of these patterns is found:
+
+- Status dot/indicator using **only** background color with **no** accompanying text or icon
+- Error/validation state indicated **only** by changing border or text color with **no** error message text
+- Success/failure feedback using **only** green/red color with **no** text or icon explanation
+- Colored badge/tag with **no** text label inside it
+
+**DO NOT flag if:**
+
+- Color is supplementary — text label or icon also conveys the same information
+- Element is purely decorative with no informational purpose
+- Color distinction is between text and background (contrast issue, not color-only issue)
+
+**Search Patterns** (hints for reviewers):
+- `backgroundColor:` conditionally set based on status with no sibling `
+
+ Confirm deletion?
+ Delete
+ Cancel
+
+
+
+// Bottom sheet that doesn't trap focus
+{isSheetOpen && (
+
+ Options
+ Edit
+
+)}
+```
+
+### Correct
+
+```tsx
+// Modal with cross-platform focus trapping
+
+
+ Confirm deletion?
+
+ Delete
+
+
+ Cancel
+
+
+
+{/* Android: hide background from TalkBack when modal is open */}
+
+ {/* ... app content ... */}
+
+```
+
+---
+
+### Review Metadata
+
+Flag ONLY when ANY of these patterns is found:
+
+- `` or custom modal/overlay component with **no** `accessibilityViewIsModal` (iOS) and **no** `importantForAccessibility="no-hide-descendants"` on background (Android)
+- Bottom sheet or popover overlay with **no** focus trapping mechanism
+- Modal/overlay that does **not** handle `onRequestClose` (Android back button dismissal)
+
+**DO NOT flag if:**
+
+- Using React Native's built-in `` component (it renders in a separate native window/dialog that already isolates focus)
+- Using a shared modal/dialog component that already sets `accessibilityViewIsModal` internally
+- Overlay is non-blocking (e.g., tooltip that doesn't obscure primary content)
+- Component uses React Navigation modal which handles focus management
+
+**Search Patterns** (hints for reviewers):
+- ` (
+
+ {item.name}
+
+ )}
+ onDragEnd={({data}) => setItems(data)}
+/>
+
+// Swipe-to-delete with no button alternative
+}>
+
+
+```
+
+### Correct
+
+```tsx
+// Reorderable list with move up/down buttons as accessible alternative
+ {
+ const index = items.indexOf(item);
+ return (
+
+
+
+
+ {item.name}
+ moveItem(index, 'up')}
+ accessibilityLabel={translate('common.moveUp')}
+ accessibilityRole="button"
+ >
+
+
+ moveItem(index, 'down')}
+ accessibilityLabel={translate('common.moveDown')}
+ accessibilityRole="button"
+ >
+
+
+
+ );
+ }}
+ onDragEnd={({data}) => setItems(data)}
+/>
+
+// Swipeable with accessible delete action via context menu or button
+}>
+ {
+ if (event.nativeEvent.actionName === 'delete') {
+ deleteItem(item.id);
+ }
+ }}
+ />
+
+```
+
+---
+
+### Review Metadata
+
+Flag ONLY when ANY of these patterns is found:
+
+- `DraggableFlatList` or drag-and-drop with **no** visible move/reorder buttons or `accessibilityActions`
+- `Swipeable` component with **no** accessible alternative (button, menu item, or `accessibilityActions`)
+- Pinch-to-zoom with **no** zoom buttons
+- `onLongPress` used specifically to initiate a drag/reorder operation (e.g., `onLongPress={drag}`) with **no** tap-based alternative — do NOT flag `onLongPress` used for context menus or secondary actions, as long press is accessible via double-tap-and-hold
+
+**DO NOT flag if:**
+
+- Accessible alternative controls are provided (buttons, menus, accessibility actions)
+- The gesture is supplementary to an existing tap-based primary interaction
+- `onLongPress` is used for context menus or secondary actions (not drag initiation)
+- Component is purely decorative or non-functional (e.g., animation)
+
+**Search Patterns** (hints for reviewers):
+- `DraggableFlatList` / `Draggable` / `drag`
+- `Swipeable` / `SwipeableRow`
+- `onLongPress` used for drag initiation
+- `PanGestureHandler` for reordering