Headless components do not respect the user's reduced-motion preference

[0xNeit]

Summary

Reduced motion was committed as a v1 accessibility feature — respected in every animated headless component (prefers-reduced-motion on web, AccessibilityInfo.isReduceMotionEnabled on native). At v1.0.0 (486b0f7) there is no reduced-motion handling anywhere in @usemotif/headless.

Details

• grep -ri "reduced-motion|isReduceMotion|prefers-reduced" packages/headless/src returns nothing.
• Motion in headless components is consumer-supplied CSS. Only Dialog.Content exit transitions are wired (via _use-exit-transition.ts), and even those do not check the user's preference.

Impact

Users with motion sensitivity receive full enter/exit animations from Dialog, Drawer, Popover, Toast, and every other animated headless component — an accessibility regression against the stated commitment.

Suggested fix

• Add a shared useReducedMotion() hook (in @usemotif/headless or core): matchMedia('(prefers-reduced-motion: reduce)') with a change listener on web; AccessibilityInfo.isReduceMotionEnabled() plus the reduceMotionChanged subscription on native.
• Have _use-exit-transition.ts and any enter/exit animation skip or shorten transitions when it returns true.
• Export and document the hook so consumers supplying their own animation CSS can opt into the same signal.