From a41b25eea70d0ed1600d75d265dc0c6df073008f Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Thu, 10 May 2018 16:05:55 +0100
Subject: [PATCH 1/6] Added 'prefers-reduced-motion' css support.

---
 .../layers/CollapseReducedMotion.jsx          | 35 +++++++++++++++++++
 src/components/layers/LayerEditorGroup.jsx    |  7 ++--
 src/styles/_input.scss                        |  4 +++
 src/styles/_layer.scss                        |  4 +++
 4 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 src/components/layers/CollapseReducedMotion.jsx

diff --git a/src/components/layers/CollapseReducedMotion.jsx b/src/components/layers/CollapseReducedMotion.jsx
new file mode 100644
index 0000000..f85f416
--- /dev/null
+++ b/src/components/layers/CollapseReducedMotion.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Collapse from 'react-collapse'
+import lodash from 'lodash'
+
+
+// Wait 3 seconds so when a use enables it they don't have to refresh the page.
+const isReduceMotionEnabled = lodash.throttle(() => {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+}, 3000);
+
+export default class CollapseReducedMotion extends React.Component {
+  static propTypes = {
+    isActive: PropTypes.bool.isRequired,
+    children: PropTypes.element.isRequired
+  }
+
+  render() {
+    if (isReduceMotionEnabled()) {
+      return (
+        <div style={{display: this.props.isActive ? "block" : "none"}}>
+          {this.props.children}
+        </div>
+      )
+    }
+    else {
+      return (
+        <Collapse isOpened={this.props.isActive}>
+          {this.props.children}
+        </Collapse>
+      )
+    }
+  }
+}
+
diff --git a/src/components/layers/LayerEditorGroup.jsx b/src/components/layers/LayerEditorGroup.jsx
index 4678876..867ab34 100644
--- a/src/components/layers/LayerEditorGroup.jsx
+++ b/src/components/layers/LayerEditorGroup.jsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapse from 'react-collapse'
 import Collapser from './Collapser'
+import CollapseReducedMotion from './CollapseReducedMotion'
+
 
 export default class LayerEditorGroup extends React.Component {
   static propTypes = {
@@ -22,11 +23,11 @@ export default class LayerEditorGroup extends React.Component {
         <span style={{flexGrow: 1}} />
         <Collapser isCollapsed={this.props.isActive} />
       </div>
-      <Collapse isOpened={this.props.isActive}>
+      <CollapseReducedMotion isActive={this.props.isActive}>
         <div className="react-collapse-container">
           {this.props.children}
         </div>
-      </Collapse>
+      </CollapseReducedMotion>
     </div>
   }
 }
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 89bbded..bc9b27e 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -126,6 +126,10 @@
     border-width: 2px;
     border-color: $color-gray;
     transition: background-color 0.1s ease-out;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
   }
 
   &-icon {
diff --git a/src/styles/_layer.scss b/src/styles/_layer.scss
index 08cbd45..e3855ea 100644
--- a/src/styles/_layer.scss
+++ b/src/styles/_layer.scss
@@ -43,6 +43,10 @@
     -webkit-transition: opacity 600ms, visibility 600ms;
     transition: opacity 600ms, visibility 600ms;
 
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition-duration: 0;
+    }
+
     @include flex-row;
   }
 

From 7b8b797f9cc216fdd12b615de9a6c869f4110b2d Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Thu, 10 May 2018 16:07:34 +0100
Subject: [PATCH 2/6] Fixed typo.

---
 src/components/layers/CollapseReducedMotion.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layers/CollapseReducedMotion.jsx b/src/components/layers/CollapseReducedMotion.jsx
index f85f416..28bfa9b 100644
--- a/src/components/layers/CollapseReducedMotion.jsx
+++ b/src/components/layers/CollapseReducedMotion.jsx
@@ -4,7 +4,7 @@ import Collapse from 'react-collapse'
 import lodash from 'lodash'
 
 
-// Wait 3 seconds so when a use enables it they don't have to refresh the page.
+// Wait 3 seconds so when a user enables it they don't have to refresh the page.
 const isReduceMotionEnabled = lodash.throttle(() => {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches
 }, 3000);

From c241a6e28045613ed717c36586cd833edd02d603 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Thu, 10 May 2018 16:30:23 +0100
Subject: [PATCH 3/6] Ignore 'prefers-reduced-motion' in stylelint

---
 package.json | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5de85a2..7c17eab 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,15 @@
   "stylelint": {
     "extends": "stylelint-config-recommended-scss",
     "rules": {
-      "no-descending-specificity": null
+      "no-descending-specificity": null,
+      "media-feature-name-no-unknown": [
+        true,
+        {
+          "ignoreMediaFeatureNames": [
+            "prefers-reduced-motion"
+          ]
+        }
+      ]
     }
   },
   "eslintConfig": {

From 7cb2c36ac954f9fb1a2cadad8b49bf35df08673f Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Fri, 11 May 2018 09:32:57 +0100
Subject: [PATCH 4/6] Move accessibility checks into module.

---
 src/components/layers/CollapseReducedMotion.jsx |  9 ++-------
 src/libs/accessibility.js                       | 12 ++++++++++++
 2 files changed, 14 insertions(+), 7 deletions(-)
 create mode 100644 src/libs/accessibility.js

diff --git a/src/components/layers/CollapseReducedMotion.jsx b/src/components/layers/CollapseReducedMotion.jsx
index 28bfa9b..6a1b64e 100644
--- a/src/components/layers/CollapseReducedMotion.jsx
+++ b/src/components/layers/CollapseReducedMotion.jsx
@@ -1,14 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Collapse from 'react-collapse'
-import lodash from 'lodash'
+import accessibility from '../../libs/accessibility'
 
 
-// Wait 3 seconds so when a user enables it they don't have to refresh the page.
-const isReduceMotionEnabled = lodash.throttle(() => {
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
-}, 3000);
-
 export default class CollapseReducedMotion extends React.Component {
   static propTypes = {
     isActive: PropTypes.bool.isRequired,
@@ -16,7 +11,7 @@ export default class CollapseReducedMotion extends React.Component {
   }
 
   render() {
-    if (isReduceMotionEnabled()) {
+    if (accessibility.reducedMotionEnabled()) {
       return (
         <div style={{display: this.props.isActive ? "block" : "none"}}>
           {this.props.children}
diff --git a/src/libs/accessibility.js b/src/libs/accessibility.js
new file mode 100644
index 0000000..095e953
--- /dev/null
+++ b/src/libs/accessibility.js
@@ -0,0 +1,12 @@
+import lodash from 'lodash'
+
+
+// Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
+const reducedMotionEnabled = lodash.throttle(() => {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+}, 3000);
+
+
+export default {
+  reducedMotionEnabled
+}

From b8f32d46cf68d97fc23b39934a9abcf409c08040 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Fri, 11 May 2018 14:03:46 +0100
Subject: [PATCH 5/6] Rename <CollapseReducedMotion/> to <Collapse/>

---
 .../layers/{CollapseReducedMotion.jsx => Collapse.jsx}      | 2 +-
 src/components/layers/LayerEditorGroup.jsx                  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/components/layers/{CollapseReducedMotion.jsx => Collapse.jsx} (90%)

diff --git a/src/components/layers/CollapseReducedMotion.jsx b/src/components/layers/Collapse.jsx
similarity index 90%
rename from src/components/layers/CollapseReducedMotion.jsx
rename to src/components/layers/Collapse.jsx
index 6a1b64e..a0981e1 100644
--- a/src/components/layers/CollapseReducedMotion.jsx
+++ b/src/components/layers/Collapse.jsx
@@ -4,7 +4,7 @@ import Collapse from 'react-collapse'
 import accessibility from '../../libs/accessibility'
 
 
-export default class CollapseReducedMotion extends React.Component {
+export default class Collapse extends React.Component {
   static propTypes = {
     isActive: PropTypes.bool.isRequired,
     children: PropTypes.element.isRequired
diff --git a/src/components/layers/LayerEditorGroup.jsx b/src/components/layers/LayerEditorGroup.jsx
index 867ab34..e132dd5 100644
--- a/src/components/layers/LayerEditorGroup.jsx
+++ b/src/components/layers/LayerEditorGroup.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Collapser from './Collapser'
-import CollapseReducedMotion from './CollapseReducedMotion'
+import Collapse from './Collapse'
 
 
 export default class LayerEditorGroup extends React.Component {
@@ -23,11 +23,11 @@ export default class LayerEditorGroup extends React.Component {
         <span style={{flexGrow: 1}} />
         <Collapser isCollapsed={this.props.isActive} />
       </div>
-      <CollapseReducedMotion isActive={this.props.isActive}>
+      <Collapse isActive={this.props.isActive}>
         <div className="react-collapse-container">
           {this.props.children}
         </div>
-      </CollapseReducedMotion>
+      </Collapse>
     </div>
   }
 }

From 78d71a4e7e9357ef20d321eb072f7b0ab2d68e96 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Fri, 11 May 2018 14:52:48 +0100
Subject: [PATCH 6/6] Fixed duplicate definition.

---
 src/components/layers/Collapse.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layers/Collapse.jsx b/src/components/layers/Collapse.jsx
index a0981e1..aeaa09b 100644
--- a/src/components/layers/Collapse.jsx
+++ b/src/components/layers/Collapse.jsx
@@ -4,7 +4,7 @@ import Collapse from 'react-collapse'
 import accessibility from '../../libs/accessibility'
 
 
-export default class Collapse extends React.Component {
+export default class CollapseAlt extends React.Component {
   static propTypes = {
     isActive: PropTypes.bool.isRequired,
     children: PropTypes.element.isRequired