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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 2 commits into from
Apr 11, 2019
Merged

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

merged 2 commits into from
Apr 11, 2019

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle 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.

@ryelle ryelle requested a review from chrisvanpatten as a code owner April 5, 2019 19:49
@gziolo gziolo added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Accessibility Feedback Need input from accessibility [Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Enhancement A suggestion for improvement. Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code labels Apr 7, 2019
@afercia
Copy link
Contributor

afercia 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
View reviewed changes
Copy link
Contributor

@kjellr kjellr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 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
@ryelle ryelle deleted the update/parallax-reduce-motion branch April 11, 2019 16:50
@youknowriad youknowriad added this to the 5.5 (Gutenberg) milestone Apr 12, 2019
mchowning pushed a commit to mchowning/gutenberg that referenced this pull request Apr 15, 2019
@ryelle @mchowning
Cover Block: Respect prefers-reduced-motion for fixed backgrounds (Wo…
dc22fdf 
…rdPress#14848)

* Respect prefers-reduced-motion for parallax images

* Default to `scroll` value, which is the correct initial state
This was referenced Apr 15, 2019
Merged
Closed
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kjellr kjellr kjellr approved these changes

@chrisvanpatten chrisvanpatten Awaiting requested review from chrisvanpatten

Assignees
No one assigned
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code Needs Accessibility Feedback Need input from accessibility [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
5.5 (Gutenberg)
Development

Successfully merging this pull request may close these issues.
5 participants
@ryelle @afercia @kjellr @youknowriad @gziolo