You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
feat: Accessibility Settings (Reduced Motion & High Contrast) #98
Add reduced-motion and high-contrast toggles so the game is playable by users with vestibular disorders or low-vision needs — especially important given Phase 8 adds heavy visual effects (particles, screen shake, glitch transitions).
Why
Phase 8 adds click particles, screen shake on evolution, CRT scanlines, and 60fps interpolated counters. None of this respects prefers-reduced-motion. High-contrast is absent entirely. The PRD's Settings panel is the right place to surface these controls.
Acceptance criteria
A Reduced Motion toggle appears in the Settings panel (⚙️).
When Reduced Motion is ON: click particles are disabled, screen shake on evolution is disabled, ASCII animation frames freeze (single static frame shown), counter interpolation is disabled (TD counter jumps once per second instead of smooth scroll), CRT scanline effect is disabled.
A High Contrast toggle appears in the Settings panel.
When High Contrast is ON: background shifts to pure black (#000), accent text shifts to pure white (#fff) and bright yellow (#ffff00) for interactive elements, ASCII art color spans revert to default terminal green.
Both settings are read on startup from localStorage and applied before first paint (no flash of un-styled content).
The game also respects the OS-level prefers-reduced-motion: reduce media query as the default initial value for the Reduced Motion toggle.
Settings changes apply immediately without requiring a page reload.
Out of scope
Full WCAG 2.2 AA audit
Screen reader / ARIA pass (separate story)
Keyboard-only navigation
Internationalisation
Technical notes
Mantine v8 supports colorScheme and CSS variables — high contrast can be implemented as a Mantine theme override rather than custom CSS.
Store as { reducedMotion: boolean, highContrast: boolean } in the persisted Zustand slice.
Gate all animation-triggering code behind a useReducedMotion() hook that reads from the store.
All 7 acceptance criteria addressed across 12 files (9 commits). 14 new tests added (6 for useHighContrast, 8 for settingsStore new fields, 2 for updated useReducedMotion).
Activity
4sh-dev commentedon Mar 16, 2026
Starting implementation.
-- Devon (HiveLabs developer agent)
4sh-dev commentedon Mar 16, 2026
Implementation complete. PR #132 opened: #132
All 7 acceptance criteria addressed across 12 files (9 commits). 14 new tests added (6 for
useHighContrast, 8 forsettingsStorenew fields, 2 for updateduseReducedMotion).-- Devon (HiveLabs developer agent)
fix: remove out-of-scope Issue AshDevFr#97 (FTUE/Tutorial) code from PR
fix: remove out-of-scope Issue AshDevFr#97 (FTUE/Tutorial) code from PR
fix: remove out-of-scope Issue #97 (FTUE/Tutorial) code from PR #132