Feature request: add a way to configure targets to use the prefers reduced motion option

[lencioni]

Happo is allergic to animations. Some animations, like from animated GIFs, are hard to disable using CSS. I think it would be nice to add an option to targets (or maybe just make it the default) to allow them to be run with the prefers reduced motion option enabled. This would give consumers an easy way to fix this class of spurious diffs while also making their product more accessible.

More info: https://developers.google.com/web/updates/2019/03/prefers-reduced-motion

[lencioni]

This has been added to Chrome now!

[tedpennings]

upvote for this! it would be a more semantic alternative to data-happo-hide in many contexts

[trotzig]

This is actually already possible if you set prefersReducedMotion: true for a target in .happo.js. E.g.

module.exports = {
  targets: { 
    chrome: new RemoteBrowserTarget('chrome', { viewport: '800x600', prefersReducedMotion: true }),
  },
};

IIRC, this works in Happo targets for Firefox, Safari, Chrome and Edge but not iOS Safari.

I'm adding documentation for this right away.

[trotzig]

Docs are now updated: https://docs.happo.io/docs/configuration#target-prefersreducedmotion