New: Added is-prefers-reduced-motion html class and _isPrefersReduced…

…MotionEnabled a11y option (#348)

js/a11y.js

@@ -2,6 +2,7 @@ import Adapt from 'core/js/adapt';
 import offlineStorage from 'core/js/offlineStorage';
 import device from 'core/js/device';
 import location from 'core/js/location';
+import BrowserConfig from './a11y/browserConfig';
 import BrowserFocus from 'core/js/a11y/browserFocus';
 import FocusOptions from 'core/js/a11y/focusOptions';
 import KeyboardFocusOutline from 'core/js/a11y/keyboardFocusOutline';
@@ -18,6 +19,7 @@ class A11y extends Backbone.Controller {
 
   defaults() {
     return {
+      _isPrefersReducedMotionEnabled: true,
       _isFocusOutlineKeyboardOnlyEnabled: true,
       /**
        * `_isFocusOutlineDisabled` ignores `_isEnabled` and can be used when all other
@@ -75,6 +77,7 @@ class A11y extends Backbone.Controller {
     this._htmlCharRegex = /&.*;/g;
     /** @type {Object} */
     this.config = null;
+    this._browserConfig = new BrowserConfig({ a11y: this });
     this._browserFocus = new BrowserFocus({ a11y: this });
     this._keyboardFocusOutline = new KeyboardFocusOutline({ a11y: this });
     this._wrapFocus = new WrapFocus({ a11y: this });

js/a11y/browserConfig.js

@@ -0,0 +1,25 @@
+import Adapt from '../adapt';
+
+/**
+ * Browser configuration helper.
+ * @class
+ */
+export default class BrowserConfig extends Backbone.Controller {
+
+  initialize({ a11y }) {
+    this.a11y = a11y;
+    this.listenTo(Adapt, {
+      'accessibility:ready': this._onReady
+    });
+  }
+
+  _onReady() {
+    if (this.a11y.config._options._isPrefersReducedMotionEnabled) this._enablePrefersReducedMotion();
+  }
+
+  _enablePrefersReducedMotion() {
+    if (!window.matchMedia) return;
+    const isEnabledInBrowser = window.matchMedia('(prefers-reduced-motion: reduce');
+    $('html').toggleClass('is-prefers-reduced-motion', Boolean(isEnabledInBrowser?.matches));
+  }
+}