Reduce motion without hiding message state
Style message-state feedback so it remains visibly distinct when reduced motion disables decorative transitions and animations.Description
Requirements
Keep challenge-shell content readable without horizontal overflow at narrow and wide viewports.
Give message-state a visible non-motion distinction from surrounding text.
When motion is allowed, keep any message-state animation finite and no longer than one second.
Under reduced motion, remove animation and transition movement from message-state.
Keep Message sent rendered and visibly styled under reduced motion.
Give challenge-control a visible keyboard focus indicator in both motion modes.
Default motion
Message sent appears
A brief finite transition may emphasize the state
Keep challenge-shell content readable without horizontal overflow at narrow and wide viewports.
Reduced motion
The reduce preference is active
Motion stops but Message sent remains distinct
Give message-state a visible non-motion distinction from surrounding text.
Constraints
Edit CSS only and keep the supplied shared fixture class namesSupport narrow and wide viewports without horizontal page overflowPreserve visible keyboard focus and readable text in every tested mode
Hints
Hint 1
Start with the shell-readable-layout behavior and make its observable result deterministic.
Hint 2
Model visible-message-state independently before combining it with the remaining states.
Hint 3
Verify the boundary described by control-focus-visible without changing caller-owned input.