[checkbox] Show Checkmark to users with reduced-motion enabled (#3537)

* [checkbox] Show Checkmark to users with reduced-motion enabled

* remove change

* update snapshot tests

.changeset/silent-books-remain.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+Make checkmark visible on reduced-motion
+
+<!-- Changed components: Checkbox -->

src/Checkbox/Checkbox.tsx

@@ -56,9 +56,7 @@ const StyledCheckbox = styled.input`
     mask-repeat: no-repeat;
     mask-position: center;
 
-    @media screen and (prefers-reduced-motion: no-preference) {
-      animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
-    }
+    animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
   }
 
   &:checked,
@@ -67,9 +65,7 @@ const StyledCheckbox = styled.input`
     border-color: ${get('colors.accent.fg')};
 
     &::before {
-      @media screen and (prefers-reduced-motion: no-preference) {
-        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
-      }
+      animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
     }
   }
 

src/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -44,6 +44,8 @@ exports[`Checkbox renders consistently 1`] = `
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
+  -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
+  animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
 }
 
 .c0:checked,
@@ -52,6 +54,12 @@ exports[`Checkbox renders consistently 1`] = `
   border-color: #0969da;
 }
 
+.c0:checked::before,
+.c0:indeterminate::before {
+  -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
+  animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
+}
+
 .c0:checked {
   -webkit-transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
@@ -100,21 +108,6 @@ exports[`Checkbox renders consistently 1`] = `
   outline-offset: 2px;
 }
 
-@media screen and (prefers-reduced-motion:no-preference) {
-  .c0::before {
-    -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
-    animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
-  }
-}
-
-@media screen and (prefers-reduced-motion:no-preference) {
-  .c0:checked::before,
-  .c0:indeterminate::before {
-    -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
-    animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
-  }
-}
-
 @media (forced-colors:active) {
   .c0:checked {
     background-color: canvastext;

src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap

@@ -111,6 +111,8 @@ exports[`CheckboxGroup renders consistently 1`] = `
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
+  -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
+  animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
 }
 
 .c6:checked,
@@ -119,6 +121,12 @@ exports[`CheckboxGroup renders consistently 1`] = `
   border-color: #0969da;
 }
 
+.c6:checked::before,
+.c6:indeterminate::before {
+  -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
+  animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
+}
+
 .c6:checked {
   -webkit-transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
@@ -167,21 +175,6 @@ exports[`CheckboxGroup renders consistently 1`] = `
   outline-offset: 2px;
 }
 
-@media screen and (prefers-reduced-motion:no-preference) {
-  .c6::before {
-    -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
-    animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
-  }
-}
-
-@media screen and (prefers-reduced-motion:no-preference) {
-  .c6:checked::before,
-  .c6:indeterminate::before {
-    -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
-    animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
-  }
-}
-
 @media (forced-colors:active) {
   .c6:checked {
     background-color: canvastext;

src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap

@@ -844,6 +844,8 @@ exports[`ChoiceFieldset renders a list with selected items 1`] = `
   mask-repeat: no-repeat;
   -webkit-mask-position: center;
   mask-position: center;
+  -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
+  animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
 }
 
 .c6:checked,
@@ -852,6 +854,12 @@ exports[`ChoiceFieldset renders a list with selected items 1`] = `
   border-color: #0969da;
 }
 
+.c6:checked::before,
+.c6:indeterminate::before {
+  -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
+  animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
+}
+
 .c6:checked {
   -webkit-transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
@@ -917,21 +925,6 @@ exports[`ChoiceFieldset renders a list with selected items 1`] = `
   margin-top: 8px;
 }
 
-@media screen and (prefers-reduced-motion:no-preference) {
-  .c6::before {
-    -webkit-animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
-    animation: checkmarkOut 80ms cubic-bezier(0.65,0,0.35,1) forwards;
-  }
-}
-
-@media screen and (prefers-reduced-motion:no-preference) {
-  .c6:checked::before,
-  .c6:indeterminate::before {
-    -webkit-animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
-    animation: checkmarkIn 80ms cubic-bezier(0.65,0,0.35,1) forwards 80ms;
-  }
-}
-
 @media (forced-colors:active) {
   .c6:checked {
     background-color: canvastext;