From 84d1fc3f01c16f6bfea66ef01d05361594931086 Mon Sep 17 00:00:00 2001
From: Tyler Krys <Tyler.Krys@gov.bc.ca>
Date: Thu, 12 Sep 2024 15:23:49 -0700
Subject: [PATCH] Switch animation obeys prefers-reduced-motion

---
 .../src/components/Switch/Switch.css                 | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/react-components/src/components/Switch/Switch.css b/packages/react-components/src/components/Switch/Switch.css
index b777618c..d0c93cbc 100644
--- a/packages/react-components/src/components/Switch/Switch.css
+++ b/packages/react-components/src/components/Switch/Switch.css
@@ -16,6 +16,12 @@
   border-radius: var(--icons-size-medium);
   transition: all 200ms;
 }
+@media (prefers-reduced-motion) {
+  /* No animation on Switch container color if user has reduced motion set */
+  .bcds-react-aria-Switch > .indicator {
+    transition: none;
+  }
+}
 
 /* Indicator */
 .bcds-react-aria-Switch > .indicator::before {
@@ -30,6 +36,12 @@
   border-radius: var(--icons-size-small);
   transition: all 200ms;
 }
+@media (prefers-reduced-motion) {
+  /* No animation on Switch circle indicator if user has reduced motion set */
+  .bcds-react-aria-Switch > .indicator::before {
+    transition: none;
+  }
+}
 
 /* Selected */
 .bcds-react-aria-Switch[data-selected] > .indicator {