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

[majornista]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Coachmark

Expected behavior

Coachmark elements should not continue to animate when the user has prefers-reduced-motion as an operating system or browser setting.

Additional context:

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

Actual behavior

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

The StoryDecorator contains some code to Reduce motion, but this is based on a [reduce-motion] attribute applied to the sp-theme element rather than respecting the prefers-reduced-motion media query.

spectrum-web-components/projects/story-decorator/src/StoryDecorator.ts

Lines 152 to 154 in 7435e7f

	:host([reduce-motion]) sp-theme {
	${reduceMotionProperties}
	}

Relevant issue filed with Spectrum-CSS: adobe/spectrum-css#1952

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

Steps to reproduce

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

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

[Westbrook]

@pfulton what are you thoughts on adding support for this media query at the Spectrum CSS level?

[pfulton]

@Westbrook We're migrating Coach Mark as we speak, so this is one of the things on @jenndiaz's list to tackle with that work

[najikahalsema]

Related to #3666

[Westbrook]

Closed by #3666