ff85765728
- Move useCallback hooks before early return in ReferencesDialog to fix conditional hook call violation (Rules of Hooks) - Add useReducedMotion hook and apply to all motion animations for WCAG 2.3.3 accessibility compliance - Replace useEffect state reset with key prop on ItemCatalog for proper React reconciliation on category change - Add global prefers-reduced-motion CSS media query Fixes 4 react-doctor errors, bringing score from 81 to ~85+.
21 lines
625 B
TypeScript
21 lines
625 B
TypeScript
import { useEffect, useState } from 'react'
|
|
|
|
/**
|
|
* Returns true when the user has requested reduced motion via OS settings.
|
|
* Useful for disabling animations (WCAG 2.3.3).
|
|
*/
|
|
export function useReducedMotion(): boolean {
|
|
const [reducedMotion, setReducedMotion] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const mql = window.matchMedia('(prefers-reduced-motion: reduce)')
|
|
setReducedMotion(mql.matches)
|
|
|
|
const handler = (e: MediaQueryListEvent) => setReducedMotion(e.matches)
|
|
mql.addEventListener('change', handler)
|
|
return () => mql.removeEventListener('change', handler)
|
|
}, [])
|
|
|
|
return reducedMotion
|
|
}
|