From ba2e79f6b6882e68940b57f0079ff1f4d60b6a62 Mon Sep 17 00:00:00 2001
From: Melissa Thompson <mthompson@heysparkbox.com>
Date: Thu, 29 Feb 2024 16:47:32 -0500
Subject: [PATCH] fix: no down state for reduced motion

---
 components/button/index.css   | 8 ++++++--
 components/checkbox/index.css | 4 ++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/button/index.css b/components/button/index.css
index b9b70e5b182..f0fdbd03dac 100644
--- a/components/button/index.css
+++ b/components/button/index.css
@@ -150,19 +150,23 @@ governing permissions and limitations under the License.
   &:active {
     /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties */
     transform: perspective(max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down))) translateZ(var(--spectrum-component-size-difference-down));
+
+    @media (prefers-reduced-motion: reduce) {
+      transform: none;
+    }
   }
 
   .spectrum-Icon {
     /* Any block-size difference between the intended workflow icon size and actual icon used.
        Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
     --_icon-size-difference: max(0px,
-      var(--spectrum-button-intended-icon-size) - 
+      var(--spectrum-button-intended-icon-size) -
       var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))
     );
 
     margin-block-start: var(--mod-button-icon-margin-block-start,
       max(0px,
-        var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - 
+        var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) -
         var(--mod-button-border-width, var(--spectrum-button-border-width)) +
         (var(--_icon-size-difference, 0px) / 2)
       )
diff --git a/components/checkbox/index.css b/components/checkbox/index.css
index d4c85fca672..3c8c9883037 100644
--- a/components/checkbox/index.css
+++ b/components/checkbox/index.css
@@ -139,6 +139,10 @@ governing permissions and limitations under the License.
   &:active {
     .spectrum-Checkbox-box {
       transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
+
+      @media (prefers-reduced-motion: reduce) {
+        transform: none;
+      }
     }
 
     .spectrum-Checkbox-box::before {