Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
MotionAccessibilityAudittype system and alintMotionAccessibility()scanner that detects animation and transition declarations sitting outside a@media (prefers-reduced-motion: reduce)wrapper. Milestone 2 extends the parser to also flagtransformdeclarations and to skip@keyframesinternals so keyframetransformsteps 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
MotionAccessibilityAudittype system detecting animation/transition declarations without a@media (prefers-reduced-motion)wrapperanimation,transition,transform) and verifying reduced-motion wrappingprefers-reduced-motionrule datasetMilestone 2 detail
Extended
lintMotionAccessibility()inlib/css-lint-rules.mjs:transformto theMOTION_PROPERTIESset so unwrapped transform declarations are flagged alongsideanimation/transitionand their longhands.@keyframesstack (mirroring the existing reduced-motion stack) so declarations inside@keyframesblocks — whosetransformsteps define the animation itself — are skipped, and only the element'sanimationreference is reported. Handles vendor-prefixed forms such as@-webkit-keyframes.MotionAccessibilityIssue.propertydoc comment inlib/types.tsto includetransform.transformis flagged while keyframe internals remain ignored.Tests
All 774 tests passing:
npm testHow to test: