spectrum-css icon indicating copy to clipboard operation
spectrum-css copied to clipboard

[Coachmark][a11y]: subtle animation should support prefers-reduced-motion media query

Open majornista opened this issue 1 year ago • 5 comments

Description

Coachmark continues to animate subtly despite the prefers-reduced-motion user preference.

Steps to reproduce

  1. Using Chrome, go to https://opensource.adobe.com/spectrum-css/coachmark.html
  2. Open Developer Tools > Rendering
  3. Under Emulate CSS media feature prefers-reduced-motion, select "prefers-reduced-motion: reduce"
Screen shot of  Developer Tools > Rendering panel with Emulate CSS media feature prefers-reduced-motion picker

Expected behavior

Coachmark elements should not continue to vibrate.

Screenshots

Screen Recording showing continuous animation

Environment

  • Spectrum CSS version: @spectrum-css/[email protected]
  • Browser(s) and OS(s): Chrome 114.0.5735.106 (Official Build) (arm64) on macOS

Additional context

  • https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions
  • https://www.w3.org/WAI/WCAG21/Techniques/css/C39

majornista avatar Jun 19 '23 18:06 majornista