spectrum-web-components
spectrum-web-components copied to clipboard
adobe
[Bug][a11y]: Coachmark subtle animation should support prefers-reduced-motion media query
Code of conduct
- [X] 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.
https://github.com/adobe/spectrum-web-components/blob/7435e7fc7b66a9f4332bb6498ac9c423384f57ac/projects/story-decorator/src/StoryDecorator.ts#L152-L154
Relevant issue filed with Spectrum-CSS: https://github.com/adobe/spectrum-css/issues/1952
Screenshots
No response
What browsers are you seeing the problem in?
No response
How can we reproduce this issue?
Steps to reproduce
- Using Chrome, go to https://opensource.adobe.com/spectrum-web-components/components/coachmark/
- Open Developer Tools > Rendering
- 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
Sample code that illustrates the problem
No response
Logs taken while reproducing problem
No response
@pfulton what are you thoughts on adding support for this media query at the Spectrum CSS level?
@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
