Use prefers-reduced-motion media query on batch progress bar

Thanks for working on this @johncook. This is a great first step which demonstrates how we can support platform level user prefs for reduced motion.

Some screenshots would be nice. How about an animated GIF showing the batch progress bar appearance when a reduced motion has been selected in macOS or iOS prefs?

I have run the patch in #2 on a new 8.6.x site and the animation on an iPad is indeed reduced as intended.

To configure an iOS iPad to reduce motion, I enabled the Settings > General > Accessibility > Redecue Motion setting. Then, I recorded adding a few hundred example Articles using the devel module to show the batch API progress meter. A short video (QuickTime .mov) is attached.

Would like to see the effect of this in Windows, especially on IE & Edge.

Would like to see the effect of this in Windows, especially on IE & Edge.

Safari (macOS and iOS) is the only user agent which implements prefers-reduced-motion to date, so that's no necessary.

This is a great first step in the plan for #2928103: [policy, no patch] Use "prefers-reduced-motion" media query to disable animations.

Nice! Terrific to have a pattern we can start using with css animations.

@John Cook, can you elaborate on this comment about transition: none? It would be good to know what the browser issues are with the CSS shorthand, and document them in the parent policy/plan. Currently Safari is the only browser which supports the media query, but when other browsers implement it, it would be good if we'd anticipated cross-browser support for animation properties.

+    /**
+     * Some browses do to recognise transition: none, so using
+     * transition-duration instead.
+     */
+    -webkit-transition-duration: 0s;
+    transition-duration: 0s;

Still RTBC - this comment is just research to flesh out the parent policy/plan.

Thanks! I don't have an opinion on which is preferred; perhaps the CSS maintainers and/or front-end framework managers do. I just want it noted as a possible WTF on the parent plan. I use that stackoverflow link.

We need to update our stylelint rules for this change.

themes/classy/css/components/progress.css
 47:20  ✖  Unexpected unknown media feature name "prefers-reduced-motion"   media-feature-name-no-unknown

We need to add the following to the patch:

diff --git a/core/.stylelintrc.json b/core/.stylelintrc.json
index 7442c7aa2a..645fd8fe03 100644
--- a/core/.stylelintrc.json
+++ b/core/.stylelintrc.json
@@ -10,6 +10,9 @@
     "function-linear-gradient-no-nonstandard-direction": null,
     "function-whitespace-after": null,
     "no-unknown-animations": true,
+    "media-feature-name-no-unknown": [true, {
+      "ignoreMediaFeatureNames": ["prefers-reduced-motion"]
+    }],
     "number-leading-zero": "always",
     "plugin/no-browser-hacks": [true, {
       "browsers": [

I think the suggestion in #10 is neater but yeah a frontend framework manager should comment as this is a new thing.

@John Cook - can you explain what the changes in #16 are about? I read the linked Joomla GitHub issue, and I'm not sure what part of it you're referring to. Why is it preferable to use the shorthand instead of tranition-duration?

Re-roll of #16 patch.

Just manually re-tested on my iPad with prefers-reduced-motion enabled. All is still working as expected and the comments from Alexpott have been incorporated.

Screen recording attached.

Setting to RTBC...

I did some more manual testing of this, to check that these rules would disbable animation in all browsers. I wanted to confirm that we were future-proofed for when other browsers eventually support it, mainly the Opera quirk that's been noted. So I tested with the media query wrapper lines commented out, i.e. like this:

/*
@media screen and (prefers-reduced-motion: reduce) {
*/
  .progress__bar {
    -webkit-animation: none;
    -moz-animation: none;
    /**
     * Opera does not recognise transition: none, so using
     * -o-transition: all 0 none;.
     */
    -o-transition: all 0 none;
    -webkit-transition: none;
    transition: none;
  }
/*
}
*/

All the browsers we support display the non-animated style correctly.

+1 to RTBC, this is a great first-step to supporting prefers-reduced-motion across all our UI.

The framework manager review tag is still here, for the new linting rules I think.

Adding the visually-induced motion sickness tag. I know @mgifford is using this tag, and linking to it in upstream browser bugtrackers..

Testbot Snafu.

Just wanted to record here that the initial work on this took place at the sprint in Leeds alongside Brian Teeman from Joomla!

He also raised the equivalent issue in their queues.

Joomla issue
https://github.com/joomla/joomla-cms/issues/19694

Pushed up to Bootstrap (as that’s their admin theme)
https://github.com/twbs/bootstrap/issues/25249

Solved by Bootstrap
https://github.com/twbs/bootstrap/pull/25641

+++ b/core/themes/classy/css/components/progress.css
@@ -41,6 +41,20 @@
+@media screen and (prefers-reduced-motion: reduce) {
...
+    /**
+     * Opera does not recognise transition: none, so using
+     * -o-transition: all 0 none;.
+     */
+    -o-transition: all 0 none;

This is only a problem with some very old versions of Opera that aren't supported, and doesn't support prefers-reduced-motion. Since they are not supported anymore, they won't get support for that feature in future so no reason to try to support them meaning that we could remove this.

That’s good - I like not having loads of “exceptions” in there!

(Another patch done on the iPad...)

Patch #28 is straightforward, addresses #27.

Is this our first VIMS patch that's gotten to RTBC?

This seems like a low risk change for Classy. Anyway, because this is modifying code that people are relying on production, I'm only committing this to the development branch.

Committed 427ffa6 and pushed to 8.6.x. Thanks!

@mgifford - yes, this is the first. There aren't many animations in core yet, and this one looked like a good starter to see how we would manage it. Next up is #2940677: Support prefers-reduced-motion in off-canvas dialog which involves a big portion of the viewport.

Including the video demo in the issue summary. I'll use this issue as a demo/reference for other stuff in future.

The prefers-reduced-motion media query will be supported in Firefox 63 for Windows (the Mac version will arrive later). I've tested the progress bar with the latest Firefox Nightly on Windows 7 and 10, and this is working there as expected.

The media query is tied to the OS-level user setting.

• "Turn off all unnecessary animations (when possible)" user setting in Windows 7.
• "Show animations in Windows" user setting in Windows 10.