From 9248e007b1fd92ac50388058fa77f9a000debd16 Mon Sep 17 00:00:00 2001
From: Oliver Foster <oliver.foster@kineo.com>
Date: Tue, 18 Apr 2023 16:18:13 +0100
Subject: [PATCH] New: Added is-prefers-reduced-motion html class and
 _isPrefersReducedMotionEnabled a11y option (#348)

---
 js/a11y.js               |  3 +++
 js/a11y/browserConfig.js | 25 +++++++++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 js/a11y/browserConfig.js

diff --git a/js/a11y.js b/js/a11y.js
index d90ecbb3..f6b312fe 100644
--- a/js/a11y.js
+++ b/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 });
diff --git a/js/a11y/browserConfig.js b/js/a11y/browserConfig.js
new file mode 100644
index 00000000..7fd3798e
--- /dev/null
+++ b/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));
+  }
+}