diff --git a/frontend/src/components/AutofillCollapse.tsx b/frontend/src/components/AutofillCollapse.tsx index 1213abe31..0a4f2f974 100644 --- a/frontend/src/components/AutofillCollapse.tsx +++ b/frontend/src/components/AutofillCollapse.tsx @@ -1,9 +1,28 @@ +import styled from "@emotion/styled"; import React, { ReactElement } from "react"; import Card from "react-bootstrap/Card"; import Collapse from "react-bootstrap/Collapse"; import Container from "react-bootstrap/Container"; import Stack from "react-bootstrap/Stack"; +// WCAG 2.2 audit (2026-07-24, REDUCED MOTION finding) - this chevron's rotate transition used to +// be a plain inline `style={{ transition: "all 0.25s 0s" }}`, which - unlike every other animated +// surface in the codebase (PagePreview.tsx's loading sweep, printingTags/cardPanel.tsx, +// WhatsThatWords.tsx, all of which carry an explicit `@media (prefers-reduced-motion: reduce)` +// override) - never checked `prefers-reduced-motion` at all. A plain inline style can't express a +// media query, so the transition is lifted into this tiny styled component instead (same +// className/DOM shape, only the `style` prop's `transition` moves here) - the disclosure still +// works identically for a reduced-motion user, it just snaps instead of animating over 0.25s, +// matching this codebase's own established pattern for every other transition/animation. +const ChevronIcon = styled.h5` + color: white; + transition: all 0.25s 0s; + + @media (prefers-reduced-motion: reduce) { + transition: none; + } +`; + interface AutofillCollapseProps { expanded: boolean; onClick: () => void; @@ -104,11 +123,10 @@ export function AutofillCollapse({
{subtitle}
)}