Fix reduced-motion gap in AutofillCollapse chevron - #432
Merged
Conversation
WCAG 2.2 non-contrast audit (/editor, /print): the disclosure chevron's 0.25s rotate transition was a plain inline style, the one animated surface in the codebase with no reduced-motion guard.
4 tasks
5 tasks
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.
Summary
AutofillCollapse's disclosure chevron rotated via a plain inlinestyle={{ transition: "all 0.25s 0s" }}, the only animated surface in the codebase with noprefers-reduced-motionguard (every other animation -PagePreview.tsx's loading sweep,printingTags/cardPanel.tsx,WhatsThatWords.tsx- already has one).styled.h5(ChevronIcon) carrying the sametransition: all 0.25s 0splus@media (prefers-reduced-motion: reduce) { transition: none; }, matching this codebase's own established pattern. Same className, same DOM shape, only thestyleprop moved.Why nothing else is in this PR
page-preview-slot-menu-cue/-flip, 9-17px measured across viewports, not the "26px" assumed in the audit brief): the 26x26 CSS size is real (confirmed viatoHaveCSSinDisplayLeftRailFidelity.spec.ts), but it lives inside the sheet's own print-scaletransform: scale(), so the actual on-screen/pointer-hit footprint shrinks with it at every practical viewport. Not a padding fix - a structural scale-compensation change, and the 26x26 value is itself spec-locked (SPEC-editor-polish.md EPcue)..fbtoggleFront/Back toggle (55x23/51x23, confirmed failing the SC 2.5.8 spacing exception too): itspadding: 2px 12px/font-size: 11pxare binding SPEC-editor-polish.md §D.1 (EP6) values - changing them needs an owner spec decision, not a unilateral pixel edit..btn-close(21x21, used in every Modal/Offcanvas header): a real gap, but reaches far beyond /editor and /print (~15+ modals sitewide) - out of this task's scope to touch blind..btn/.form-controlsitewide, not an /editor-or-/print-local fix.Test plan
npx tsc --noEmit- cleannpx prettier@2.7.1 --check src/components/AutofillCollapse.tsx- cleannpm test(jest) - 65 suites / 573 tests pass, unchangednpx playwright test tests/DisplayLeftRailFidelity.spec.ts tests/GridSelectorModal.spec.ts- 34/34 pass (both mountAutofillCollapse)page.emulateMedia({ reducedMotion: "reduce" })-> chevrontransitionDurationcomputed as0s;reducedMotion: "no-preference"-> unchanged0.25s🤖 Generated with Claude Code