Dashboard checkbox should honor reduced-motion (#20385)

frontend/src/metabase/components/Swapper.jsx

@@ -2,6 +2,8 @@
 import React from "react";
 import { Motion, spring } from "react-motion";
 
+import { isReducedMotionPreferred } from "metabase/lib/dom";
+
 class Swapper extends React.Component {
   state = {
     hovered: false,
@@ -19,6 +21,11 @@ class Swapper extends React.Component {
     const { defaultElement, swappedElement, startSwapped } = this.props;
     const { hovered } = this.state;
 
+    const preferReducedMotion = isReducedMotionPreferred();
+    const springOpts = preferReducedMotion
+      ? { stiffness: 500 }
+      : { stiffness: 170 };
+
     return (
       <span
         onMouseEnter={() => this._onMouseEnter()}
@@ -31,12 +38,22 @@ class Swapper extends React.Component {
             scale: 1,
           }}
           style={{
-            scale: hovered || startSwapped ? spring(0) : spring(1),
+            scale:
+              hovered || startSwapped
+                ? spring(0, springOpts)
+                : spring(1, springOpts),
           }}
         >
           {({ scale }) => {
+            const snapScale = scale < 0.5 ? 0 : 1;
+            const _scale = preferReducedMotion ? snapScale : scale;
             return (
-              <span style={{ display: "block", transform: `scale(${scale})` }}>
+              <span
+                style={{
+                  display: "block",
+                  transform: `scale(${_scale})`,
+                }}
+              >
                 {defaultElement}
               </span>
             );
@@ -47,14 +64,19 @@ class Swapper extends React.Component {
             scale: 0,
           }}
           style={{
-            scale: hovered || startSwapped ? spring(1) : spring(0),
+            scale:
+              hovered || startSwapped
+                ? spring(1, springOpts)
+                : spring(0, springOpts),
           }}
         >
           {({ scale }) => {
+            const snapScale = scale < 0.5 ? 0 : 1;
+            const _scale = preferReducedMotion ? snapScale : scale;
             return (
               <span
                 className="absolute top left bottom right"
-                style={{ display: "block", transform: `scale(${scale})` }}
+                style={{ display: "block", transform: `scale(${_scale})` }}
               >
                 {swappedElement}
               </span>