Accessibility rule: Recommend and detect MotionConfig reducedMotion for motion library

[better-salmon]

Rule: Reduced Motion Handling for Motion Library Usage

Context

Projects that utilize a motion/animation library must provide handling for users who prefer reduced motion, in alignment with accessibility requirements (WCAG 2.3.3).

Current Suggestion

The rule currently states:

Project uses a motion library but has no prefers-reduced-motion handling — required for accessibility (WCAG 2.3.3)

Remediation Suggestion (existing):

• Add useReducedMotion() from your animation library
• Or: add a @media (prefers-reduced-motion: reduce) CSS query

---

Enhancement Proposal

For users of the motion library, there is another recommended approach:

• Wrap your app (or relevant animated components) with the MotionConfig provider, setting the reducedMotion prop to "user".

Example

export default function App() {
  return <MotionConfig reducedMotion="user">{/* ... */}</MotionConfig>;
}

This respects the user's device preference for motion reductions.

Reference

Docs: https://motion.dev/docs/react-motion-config#reducedmotion

---

Proposal

• Rule Checks: Update the useReducedMotion rule logic to consider the app's use of <MotionConfig reducedMotion="user" /> (from motion library, e.g. framer-motion) as satisfying the reduced-motion accessibility requirement.
  • If MotionConfig with reducedMotion="user" is present in component tree, the rule should report the check as satisfied for accessibility.
• Suggestions: When motion libraries are detected, recommend all applicable strategies, including the new MotionConfig approach.

[aidenybai]

pushing a fix!