happo/happo.io

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

lencioni opened this issue · 4 comments

lencioni commented

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 commented

This has been added to Chrome now!

tedpennings commented

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

trotzig commented

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.