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

[majornista]

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"

Expected behavior

Coachmark elements should not continue to vibrate.

Screenshots

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

[pfulton]

@majornista thank you! We're actively working to migrate this component to the new Spectrum Tokens system, and @jenndiaz is working on it in our current sprint. I added a note in her Jira ticket for the migration, so we'll be sure to get this update in with that work.

[majornista]

Thanks!

[jenndiaz]

@majornista Do you have a alternative behavior you'd recommend for the element? Does just stopping the animation (screenshot) lose too much of the original design or do you think this is okay?

[pfulton]

@majornista any additional thoughts here with regard to @jenndiaz's comment above? We're getting close to merging and releasing this component and want to be sure that we've addressed everything.

[jenndiaz]

Prefers reduced motion styling added to the coach indicator in the S1 migration for Coach Mark

https://github.com/adobe/spectrum-css/pull/2323/files#diff-8b0768275144772a003e7c7254ed48176d187ad85fd7dcd23c89039529ab54e7R95