WSTEAM1-1152: Default browser checkbox renders on HC modes (#11758)

* WSTEAM1-1152: Default browser checkbox renders on HC modes * WSTEAM1-1152: Update snapshots * Remove checked::after psuedo element on HC modes * Update snapshots --------- Co-authored-by: Aaron Moore <[email protected]>
bbc · Jul 16, 2024 · e969f0b · e969f0b
1 parent 73f7a47
commit e969f0b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/FormField/__snapshots__/index.test.tsx.snap
@@ -61,6 +61,19 @@ exports[`FormField should render a checkbox input with an associated label 1`] =
   height: 100%;
 }
 
+@media screen and (forced-colors: active) {
+  .emotion-2 {
+    -webkit-appearance: auto;
+    -moz-appearance: auto;
+    -ms-appearance: auto;
+    appearance: auto;
+  }
+
+  .emotion-2:checked::after {
+    content: none;
+  }
+}
+
 .emotion-2:focus {
   outline: 0.1875rem solid #FFFFFF;
   box-shadow: 0 0 0 0.1875rem #000000;

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/FormField/styles.ts
@@ -87,7 +87,7 @@ export default {
       marginInlineStart: `${spacings.DOUBLE}rem`,
       cursor: 'pointer',
     }),
-  checkbox: ({ palette }: Theme) =>
+  checkbox: ({ palette, mq }: Theme) =>
     css({
       display: 'inline-block',
       flex: 'initial',
@@ -108,6 +108,12 @@ export default {
         width: '100%',
         height: '100%',
       },
+      [mq.HIGH_CONTRAST]: {
+        appearance: 'auto', // renders browser default checkbox
+        '&:checked::after': {
+          content: 'none',
+        },
+      },
     }),
   checkboxError: ({ palette }: Theme) =>
     css({

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormScreen/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/FormScreen/__snapshots__/index.test.tsx.snap
@@ -284,6 +284,19 @@ exports[`Form should render and match snapshot 1`] = `
   height: 100%;
 }
 
+@media screen and (forced-colors: active) {
+  .emotion-20 {
+    -webkit-appearance: auto;
+    -moz-appearance: auto;
+    -ms-appearance: auto;
+    appearance: auto;
+  }
+
+  .emotion-20:checked::after {
+    content: none;
+  }
+}
+
 .emotion-20:focus {
   outline: 0.1875rem solid #FFFFFF;
   box-shadow: 0 0 0 0.1875rem #000000;