[💡 Feature]: Configure `prefers-reduced-motion`

Is your feature request related to a problem?

I'm testing a site where I regularly check for prefers-reduced-motion and enable/disable animations accordingly. However there is no way to exercise this state in WebDriverIO as far as I can tell. This applies to all media features, notably prefers-color-scheme which is relevant to testing dark theme states.

Describe the solution you'd like.

I'd love to see an option to configure media features in the browser. Something like:

browser.mediaFeatures.setPrefersReducedMotion('reduced');
browser.mediaFeatures.setPrefersColorScheme('dark');
// ...

The exact API isn't super important, as long as there is some option we can set.

Describe alternatives you've considered.

I don't believe it is possible to set prefers-reduced-motion through JS, meaning browser.execute(() => /* ... */) is not an option.

It would be possible to set some kind of attribute on the root element and code your CSS to also check for that in addition to prefers-reduced-motion, though this gets awkward fast.

browser.execute(() => document.body.setAttribute('disable-animations', ''));

@media (prefers-reduced-motion: no-preference) {
  body:not([disable-animations]) .some-element {
    transition: /* ... */;
  }
}

This also wouldn't work very well with shadow DOM, where body .some-element doesn't work correctly and you'd need to use :host-context or something like that.

Additional context

While this is a generically useful tool for testing, I think prefers-reduced-motion is particularly useful as a means of disabling animations for testing. If a project consistently uses prefers-reduced-motion to disable animations this means:

• This flag can be used to turn off all animations for testing.
• Tests can help enforce that prefers-reduced-motion actually is used consistently. Any time animations are a problem for testing, they are likely also a problem for users sensitive to motion. Fixing your tests is also improving the user experience!

This could be a slightly more generic solution to the general problem of disabling animations in testing, which is the real root problem of https://github.com/webdriverio/webdriverio/issues/3106 and could address that issue as well.

This is assuming that prefers-reduced-motion: reduced is roughly equivalent to "disable animations" which may not be strictly true. I'm not accessibility expert, so I'm not 100% on what the "correct" way to handle this particular setting is.

There is also movement which may be critical for functionality. For example, shooting a bullet in a game needs to move from the source to target, so skipping that animation for prefers-reduced-motion users would fundamentally break the experience. However in those cases, I suspect for testing you actually wouldn't want to skip them anyways, since the bullet's travel time is a key piece of functionality which needs to be handled and tested as well.

Code of Conduct

• I agree to follow this project's Code of Conduct