The drills screens animate and never check whether the player asked the system to stop animating.
Where. src/components/drills/DrillRunner.tsx and src/components/drills/DrillIndex.tsx. Both import motion from framer-motion and animate on mount: the run counter next to the title fades and slides in on every answer, the reveal panel and the next-hand button slide up (DrillRunner.tsx:124, :268, :326), and the room's cards stagger in on a delay (DrillIndex.tsx:54). Nothing in there reads prefers-reduced-motion.
The pattern already exists in the app. src/components/learn/Tutorial.tsx:62 wraps its animated subtree in <MotionConfig reducedMotion="user">, which makes framer-motion respect the OS setting for everything inside it. CSS-driven motion is handled separately in src/app/globals.css:187.
What a fix looks like. Wrap each of the two components' trees the same way Tutorial does, and check the Tailwind transition classes on the answer buttons and cards while you are in there (DrillRunner.tsx:302, :339, :374) - a hover transition is mild, but a scale on tap is the kind of thing the setting is asking about.
How to see it. pnpm dev, then /game/drills and /game/drills/which-hand-wins. Turn on "Reduce motion" in your OS (macOS: System Settings -> Accessibility -> Display; Chrome devtools can also emulate it under Rendering -> Emulate CSS media feature prefers-reduced-motion). Answer a few spots. Nothing should slide.
Gate. pnpm test:all. tests/drills.test.ts reads every file under src/components/drills/ and fails on storage calls, store imports and a Date in the drills layer, so keep clear of those three; a MotionConfig wrapper does not go near them.
Small, self-contained, and a real accessibility gap in something that just shipped. Good first issue.
The drills screens animate and never check whether the player asked the system to stop animating.
Where.
src/components/drills/DrillRunner.tsxandsrc/components/drills/DrillIndex.tsx. Both importmotionfromframer-motionand animate on mount: the run counter next to the title fades and slides in on every answer, the reveal panel and the next-hand button slide up (DrillRunner.tsx:124,:268,:326), and the room's cards stagger in on a delay (DrillIndex.tsx:54). Nothing in there readsprefers-reduced-motion.The pattern already exists in the app.
src/components/learn/Tutorial.tsx:62wraps its animated subtree in<MotionConfig reducedMotion="user">, which makes framer-motion respect the OS setting for everything inside it. CSS-driven motion is handled separately insrc/app/globals.css:187.What a fix looks like. Wrap each of the two components' trees the same way Tutorial does, and check the Tailwind
transitionclasses on the answer buttons and cards while you are in there (DrillRunner.tsx:302,:339,:374) - a hover transition is mild, but a scale on tap is the kind of thing the setting is asking about.How to see it.
pnpm dev, then/game/drillsand/game/drills/which-hand-wins. Turn on "Reduce motion" in your OS (macOS: System Settings -> Accessibility -> Display; Chrome devtools can also emulate it under Rendering -> Emulate CSS media feature prefers-reduced-motion). Answer a few spots. Nothing should slide.Gate.
pnpm test:all.tests/drills.test.tsreads every file undersrc/components/drills/and fails on storage calls, store imports and aDatein the drills layer, so keep clear of those three; aMotionConfigwrapper does not go near them.Small, self-contained, and a real accessibility gap in something that just shipped. Good first issue.