search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
9.07k stars 856 forks source link

Implement animation tokens for more control #3712

Open christophe-g opened 1 year ago

christophe-g commented 1 year ago

In view of https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html, would it be possible to provide more/better control over MD components animation?

For instance, would it be possible to express all animation duration as a css variable so as to contol it over a @media (prefers-reduced-motion: reduce) global statement (inspired for example by https://www.silvestar.codes/articles/using-css-variables-for-reduced-motion-on-a-global-scale/ or https://web.dev/learn/accessibility/motion/) ?

We are using this strategy with success at https:accessiblesurveys.com on our own components. For the time being, we override all MD components for which we need to control animation behaviors.

It would be simpler to provide this by default for the release of the next MD spec (MD3).

asyncLiz commented 1 year ago

You're absolutely correct! While we don't have them know, animation tokens are planned by design after layout tokens, so these will likely be customizable with custom properties.

shadow-identity commented 5 months ago

What do you guys think, should the library respect prefers-reduced-motion and switch animations off, or the consuming app should take care of it and set animation-related properties "manually"?