Skip to content

Fix reduced-motion gap in AutofillCollapse chevron - #432

Merged
WilfordGrimley merged 1 commit into
masterfrom
wcag22-editor-print-audit
Jul 24, 2026
Merged

Fix reduced-motion gap in AutofillCollapse chevron#432
WilfordGrimley merged 1 commit into
masterfrom
wcag22-editor-print-audit

Conversation

@WilfordGrimley

Copy link
Copy Markdown

Summary

  • WCAG 2.2 non-contrast audit of the unified /editor + /print surface (target size, focus-visible, reduced-motion, APCA advisory) turned up one genuinely trivial, safely-fixable item: AutofillCollapse's disclosure chevron rotated via a plain inline style={{ transition: "all 0.25s 0s" }}, the only animated surface in the codebase with no prefers-reduced-motion guard (every other animation - PagePreview.tsx's loading sweep, printingTags/cardPanel.tsx, WhatsThatWords.tsx - already has one).
  • Lifted the transition into a tiny styled.h5 (ChevronIcon) carrying the same transition: all 0.25s 0s plus @media (prefers-reduced-motion: reduce) { transition: none; }, matching this codebase's own established pattern. Same className, same DOM shape, only the style prop moved.
  • Everything else found in the audit (target-size offenders, a systemic low-contrast focus-ring issue, and the APCA advisory table) is reported separately for the board - see this PR's own follow-up report, not shipped here, since none of it qualified as a trivial in-place fix (see "Why nothing else is in this PR" below).

Why nothing else is in this PR

  • Target size (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 via toHaveCSS in DisplayLeftRailFidelity.spec.ts), but it lives inside the sheet's own print-scale transform: 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).
  • .fbtoggle Front/Back toggle (55x23/51x23, confirmed failing the SC 2.5.8 spacing exception too): its padding: 2px 12px/font-size: 11px are binding SPEC-editor-polish.md §D.1 (EP6) values - changing them needs an owner spec decision, not a unilateral pixel edit.
  • Bootstrap's stock .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.
  • The focus-ring contrast finding (Bootstrap's default box-shadow focus ring computes to ~1.2-1.5:1 against this dark theme's own surfaces, well under the 3:1 non-text guidance) is systemic to every .btn/.form-control sitewide, not an /editor-or-/print-local fix.

Test plan

  • npx tsc --noEmit - clean
  • npx prettier@2.7.1 --check src/components/AutofillCollapse.tsx - clean
  • npm test (jest) - 65 suites / 573 tests pass, unchanged
  • npx playwright test tests/DisplayLeftRailFidelity.spec.ts tests/GridSelectorModal.spec.ts - 34/34 pass (both mount AutofillCollapse)
  • Ad-hoc Playwright verification (not committed): page.emulateMedia({ reducedMotion: "reduce" }) -> chevron transitionDuration computed as 0s; reducedMotion: "no-preference" -> unchanged 0.25s

🤖 Generated with Claude Code

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.
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