Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cover Block: Respect prefers-reduced-motion for fixed backgrounds #14848

Merged
merged 2 commits into from Apr 11, 2019

Conversation

@ryelle
Copy link
Contributor

commented Apr 5, 2019

This PR checks the prefers-reduced-motion media query, and disables the parallax effect on Cover blocks if the user has disabled animations.

I was reading this article earlier, Accessibility for Vestibular Disorders, and the author mentions the following about parallax elements. I thought of the Cover block, and how we could make this experience better across WP sites by respecting the user setting.

While most animations did not trigger my symptoms, parallax scrolling did. I’d never been a fan of parallax to begin with, as I found it confusing. And when you’re experiencing vertigo, the issues introduced by parallax scrolling compound.
[…]
Every time I encountered it, I would put the bucket beside me to good use and be forced to lie in bed for hours as I felt the room spinning around me, and no meds could get me out of it. It was THAT bad.

How has this been tested?

I've personally tested with the Cover block + Mac/Safari. prefers-reduced-motion is also supported by Firefox (and will be in the next Chrome), so Windows users should be able to use this too. See #14021 for some existing reduced-motion support.

To test

  • add a cover block to a post, turn on "fixed background"
  • view the post (in Safari or Firefox), the background is fixed
  • turn on the setting on your operating system, in the accessibility settings.
  • view the post, the background is not fixed
  • turn off the OS setting
  • view the post, the background is fixed again

Checklist:

  • [ ] My code is tested. it's just a css change
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • [ ] I've included developer documentation if appropriate.
@afercia

This comment has been minimized.

Copy link
Contributor

commented Apr 11, 2019

Thanks for working on this @ryelle! This is a great example of how WordPress can stay at the edge of the most recent web technologies to help users with different needs. Would love to see more cases where WordPress leads by example ❤️

@kjellr

kjellr approved these changes Apr 11, 2019

Copy link
Contributor

left a comment

🎉 Looks great, thanks @ryelle. I'll merge this in as soon as the tests complete.

@kjellr kjellr merged commit 4ebd906 into WordPress:master Apr 11, 2019

1 check passed

Travis CI - Pull Request Build Passed
Details

@ryelle ryelle deleted the ryelle:update/parallax-reduce-motion branch Apr 11, 2019

@youknowriad youknowriad added this to the 5.5 (Gutenberg) milestone Apr 12, 2019

mchowning added a commit to mchowning/gutenberg that referenced this pull request Apr 15, 2019

Cover Block: Respect prefers-reduced-motion for fixed backgrounds (Wo…
…rdPress#14848)

* Respect prefers-reduced-motion for parallax images

* Default to `scroll` value, which is the correct initial state
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.