Skip to content

feat(mint): add reduced-motion accessibility audit - #116

Draft
nujovich wants to merge 2 commits into
mainfrom
hermes/build/mint-prefers-reduced-motion-audit
Draft

nujovich wants to merge 2 commits into
mainfrom
hermes/build/mint-prefers-reduced-motion-audit

Conversation

@nujovich

@nujovich nujovich commented Sep 16, 2026

Copy link
Copy Markdown
Owner

Card: https://github.com/nujovich/mint-radar/issues/27

What: Adds a reduced-motion accessibility audit to Mint's CSS lint rules. Milestone 1 added the MotionAccessibilityAudit type system and a lintMotionAccessibility() scanner that detects animation and transition declarations sitting outside a @media (prefers-reduced-motion: reduce) wrapper. Milestone 2 extends the parser to also flag transform declarations and to skip @keyframes internals so keyframe transform steps are not reported as unwrapped motion.

Why: stylelint has had an open request for a prefers-reduced-motion rule since 2022 with no core implementation. Users who opt into reduced motion should not receive full-strength animation, transition, or transform effects. Mint already performs semantic CSS auditing but had no motion-safety check, so this closes that a11y gap.

Milestones

  • Milestone 1 — Add MotionAccessibilityAudit type system detecting animation/transition declarations without a @media (prefers-reduced-motion) wrapper
  • Milestone 2 — Implement parser identifying animation properties (animation, transition, transform) and verifying reduced-motion wrapping
  • Milestone 3 — Add report with count of animations not respecting user motion preference and wrap suggestion
  • Milestone 4 — Add tests with the stylelint prefers-reduced-motion rule dataset

Milestone 2 detail

Extended lintMotionAccessibility() in lib/css-lint-rules.mjs:

  • Added transform to the MOTION_PROPERTIES set so unwrapped transform declarations are flagged alongside animation / transition and their longhands.
  • Added a @keyframes stack (mirroring the existing reduced-motion stack) so declarations inside @keyframes blocks — whose transform steps define the animation itself — are skipped, and only the element's animation reference is reported. Handles vendor-prefixed forms such as @-webkit-keyframes.
  • Updated the MotionAccessibilityIssue.property doc comment in lib/types.ts to include transform.
  • Added a test verifying an unwrapped transform is flagged while keyframe internals remain ignored.

Tests

All 774 tests passing:

npm test

How to test:

npm test
# or scoped: npx vitest run lib/__tests__/css-lint-rules.test.mjs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant