diff --git a/packages/yoga/src/Checkbox/web/Checkbox.jsx b/packages/yoga/src/Checkbox/web/Checkbox.jsx
index bde5fb7a50..75cfe7771d 100644
--- a/packages/yoga/src/Checkbox/web/Checkbox.jsx
+++ b/packages/yoga/src/Checkbox/web/Checkbox.jsx
@@ -4,7 +4,7 @@ import styled, { withTheme } from 'styled-components';
 import { hexToRgb } from '@gympass/yoga-common';
 import { Check, Rectangle } from '@gympass/yoga-icons';
 
-import { HiddenInput } from '../../shared';
+import { VisuallyHidden } from '../../shared';
 
 const CheckboxWrapper = styled.div`
   display: inline-block;
@@ -266,6 +266,13 @@ const Checkbox = ({
     }
   });
 
+  const handleKeyDown = event => {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      onClick(event);
+    }
+  };
+
   return (
     <CheckboxWrapper
       style={style}
@@ -282,6 +289,8 @@ const Checkbox = ({
         <Label id={checkboxLabelId}>
           <Shadow />
           <CheckMark
+            tabIndex={0}
+            onKeyDown={handleKeyDown}
             aria-labelledby={ariaLabel ? undefined : checkboxLabelId}
             aria-label={ariaLabel}
             {...{
@@ -299,17 +308,18 @@ const Checkbox = ({
               <Rectangle width={checkbox.size} height={checkbox.size} />
             )}
           </CheckMark>
-          <HiddenInput
-            type="checkbox"
-            ref={inputRef}
-            checked={checked}
-            disabled={disabled}
-            {...(value ? { value } : {})}
-            {...restWithoutEvents}
-            onChange={onChange}
-            onClick={onClick}
-            aria-hidden
-          />
+          <VisuallyHidden>
+            <input
+              type="checkbox"
+              ref={inputRef}
+              checked={checked}
+              disabled={disabled}
+              {...(value ? { value } : {})}
+              {...restWithoutEvents}
+              onChange={onChange}
+              onClick={onClick}
+            />
+          </VisuallyHidden>
           {label}
         </Label>
       </CheckboxStyled>
diff --git a/packages/yoga/src/Checkbox/web/Checkbox.test.jsx b/packages/yoga/src/Checkbox/web/Checkbox.test.jsx
index 182b00c06c..42f5e3ae8b 100644
--- a/packages/yoga/src/Checkbox/web/Checkbox.test.jsx
+++ b/packages/yoga/src/Checkbox/web/Checkbox.test.jsx
@@ -174,16 +174,22 @@ describe('<Checkbox />', () => {
   });
 
   describe('Events', () => {
-    it('should call onChange function when press on Checkbox', () => {
+    it('should call onChange and onClick functions when interacting with Checkbox', () => {
       const onChangeMock = jest.fn();
-      const { getByTestId } = render(
+      const onClickMock = jest.fn();
+
+      const { container } = render(
         <ThemeProvider>
-          <Checkbox {...data} onChange={onChangeMock} />
+          <Checkbox {...data} onChange={onChangeMock} onClick={onClickMock} />
         </ThemeProvider>,
       );
 
-      fireEvent.click(getByTestId('checkbox-checkMark'));
+      const hiddenInput = container.querySelector('input[type="checkbox"]');
+
+      fireEvent.click(hiddenInput);
+
       expect(onChangeMock).toHaveBeenCalled();
+      expect(onClickMock).toHaveBeenCalled();
     });
   });
 });
diff --git a/packages/yoga/src/Checkbox/web/__snapshots__/Checkbox.test.jsx.snap b/packages/yoga/src/Checkbox/web/__snapshots__/Checkbox.test.jsx.snap
index ac695da16b..312afd57a6 100644
--- a/packages/yoga/src/Checkbox/web/__snapshots__/Checkbox.test.jsx.snap
+++ b/packages/yoga/src/Checkbox/web/__snapshots__/Checkbox.test.jsx.snap
@@ -1,17 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Checkbox /> Snapshots should match snapshot with a given value 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -103,117 +92,117 @@ exports[`<Checkbox /> Snapshots should match snapshot with a given value 1`] = `
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c10 .c2:active .c4,
-.c10:focus-within .c4,
-.c10:hover .c4 {
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
   display: block;
 }
 
-.c10:hover .c4 {
+.c9:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c10:focus-within .c4 {
+.c9:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c10 .c2:active .c4 {
+.c9 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c11 .c2:active .c4,
-.c11:focus-within .c4,
-.c11:hover .c4 {
+.c10 .c2:active .c4,
+.c10:focus-within .c4,
+.c10:hover .c4 {
   display: block;
 }
 
-.c11:hover .c4 {
+.c10:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c11:focus-within .c4 {
+.c10:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c11 .c2:active .c4 {
+.c10 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c12 .c2:active .c4,
-.c12:focus-within .c4,
-.c12:hover .c4 {
+.c11 .c2:active .c4,
+.c11:focus-within .c4,
+.c11:hover .c4 {
   display: block;
 }
 
-.c12:hover .c4 {
+.c11:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c12:focus-within .c4 {
+.c11:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c12 .c2:active .c4 {
+.c11 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c13 .c2:active .c4,
-.c13:focus-within .c4,
-.c13:hover .c4 {
+.c12 .c2:active .c4,
+.c12:focus-within .c4,
+.c12:hover .c4 {
   display: block;
 }
 
-.c13:hover .c4 {
+.c12:hover .c4 {
   background-color: rgba(255,255,255,0.25);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.25);
 }
 
-.c13:focus-within .c4 {
+.c12:focus-within .c4 {
   background-color: rgba(255,255,255,0.5);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.5);
 }
 
-.c13 .c2:active .c4 {
+.c12 .c2:active .c4 {
   background-color: rgba(255,255,255,0.75);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
 
-.c14 .c2:active .c4,
-.c14:focus-within .c4,
-.c14:hover .c4 {
+.c13 .c2:active .c4,
+.c13:focus-within .c4,
+.c13:hover .c4 {
   display: block;
 }
 
-.c14:hover .c4 {
+.c13:hover .c4 {
   background-color: rgba(255,255,255,0.25);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.25);
 }
 
-.c14:focus-within .c4 {
+.c13:focus-within .c4 {
   background-color: rgba(255,255,255,0.5);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.5);
 }
 
-.c14 .c2:active .c4 {
+.c13 .c2:active .c4 {
   background-color: rgba(255,255,255,0.75);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
 
-.c8 {
+.c7 {
   width: 100%;
   margin-top: 4px;
 }
 
-.c9 {
+.c8 {
   color: #6B6B78;
   font-size: 14px;
 }
@@ -238,21 +227,25 @@ exports[`<Checkbox /> Snapshots should match snapshot with a given value 1`] = `
           class="c6"
           data-testid="checkbox-checkMark"
           role="checkbox"
+          tabindex="0"
         />
-        <input
-          aria-hidden="true"
-          class="c7"
-          type="checkbox"
-          value="test_value"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            type="checkbox"
+            value="test_value"
+          />
+        </span>
         Checkbox Component
       </label>
     </div>
     <div
-      class="c8"
+      class="c7"
     >
       <span
-        class="c9"
+        class="c8"
       >
         Helper Text
       </span>
@@ -262,17 +255,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with a given value 1`] = `
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with checked checkbox 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -331,44 +313,44 @@ exports[`<Checkbox /> Snapshots should match snapshot with checked checkbox 1`]
   border-radius: 9999px;
 }
 
-.c10 .c2:active .c4,
-.c10:focus-within .c4,
-.c10:hover .c4 {
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
   display: block;
 }
 
-.c10:hover .c4 {
+.c9:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c10:focus-within .c4 {
+.c9:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c10 .c2:active .c4 {
+.c9 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c11 .c2:active .c4,
-.c11:focus-within .c4,
-.c11:hover .c4 {
+.c10 .c2:active .c4,
+.c10:focus-within .c4,
+.c10:hover .c4 {
   display: block;
 }
 
-.c11:hover .c4 {
+.c10:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c11:focus-within .c4 {
+.c10:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c11 .c2:active .c4 {
+.c10 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
@@ -406,12 +388,12 @@ exports[`<Checkbox /> Snapshots should match snapshot with checked checkbox 1`]
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c8 {
+.c7 {
   width: 100%;
   margin-top: 4px;
 }
 
-.c9 {
+.c8 {
   color: #6B6B78;
   font-size: 14px;
 }
@@ -436,26 +418,30 @@ exports[`<Checkbox /> Snapshots should match snapshot with checked checkbox 1`]
           class="c6"
           data-testid="checkbox-checkMark"
           role="checkbox"
+          tabindex="0"
         >
           <svg
             height="24"
             width="24"
           />
         </div>
-        <input
-          aria-hidden="true"
-          checked=""
-          class="c7"
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            checked=""
+            type="checkbox"
+          />
+        </span>
         Checkbox Component
       </label>
     </div>
     <div
-      class="c8"
+      class="c7"
     >
       <span
-        class="c9"
+        class="c8"
       >
         Helper Text
       </span>
@@ -465,17 +451,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with checked checkbox 1`]
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with default checkbox 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -567,12 +542,12 @@ exports[`<Checkbox /> Snapshots should match snapshot with default checkbox 1`]
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c8 {
+.c7 {
   width: 100%;
   margin-top: 4px;
 }
 
-.c9 {
+.c8 {
   color: #6B6B78;
   font-size: 14px;
 }
@@ -597,20 +572,24 @@ exports[`<Checkbox /> Snapshots should match snapshot with default checkbox 1`]
           class="c6"
           data-testid="checkbox-checkMark"
           role="checkbox"
+          tabindex="0"
         />
-        <input
-          aria-hidden="true"
-          class="c7"
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            type="checkbox"
+          />
+        </span>
         Checkbox Component
       </label>
     </div>
     <div
-      class="c8"
+      class="c7"
     >
       <span
-        class="c9"
+        class="c8"
       >
         Helper Text
       </span>
@@ -620,17 +599,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with default checkbox 1`]
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with disabled and checked checkbox 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
   cursor: not-allowed;
@@ -690,65 +658,65 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled and checked
   border-radius: 9999px;
 }
 
-.c10 .c2:active .c4,
-.c10:focus-within .c4,
-.c10:hover .c4 {
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
   display: block;
 }
 
-.c10:hover .c4 {
+.c9:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c10:focus-within .c4 {
+.c9:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c10 .c2:active .c4 {
+.c9 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c11 .c2:active .c4,
-.c11:focus-within .c4,
-.c11:hover .c4 {
+.c10 .c2:active .c4,
+.c10:focus-within .c4,
+.c10:hover .c4 {
   display: block;
 }
 
-.c11:hover .c4 {
+.c10:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c11:focus-within .c4 {
+.c10:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c11 .c2:active .c4 {
+.c10 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c12 .c2:active .c4,
-.c12:focus-within .c4,
-.c12:hover .c4 {
+.c11 .c2:active .c4,
+.c11:focus-within .c4,
+.c11:hover .c4 {
   display: block;
 }
 
-.c12:hover .c4 {
+.c11:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c12:focus-within .c4 {
+.c11:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c12 .c2:active .c4 {
+.c11 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
@@ -787,12 +755,12 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled and checked
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c8 {
+.c7 {
   width: 100%;
   margin-top: 4px;
 }
 
-.c9 {
+.c8 {
   color: #6B6B78;
   font-size: 14px;
 }
@@ -821,27 +789,31 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled and checked
           data-testid="checkbox-checkMark"
           disabled=""
           role="checkbox"
+          tabindex="0"
         >
           <svg
             height="24"
             width="24"
           />
         </div>
-        <input
-          aria-hidden="true"
-          checked=""
-          class="c7"
-          disabled=""
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            checked=""
+            disabled=""
+            type="checkbox"
+          />
+        </span>
         Checkbox Component
       </label>
     </div>
     <div
-      class="c8"
+      class="c7"
     >
       <span
-        class="c9"
+        class="c8"
       >
         Helper Text
       </span>
@@ -851,17 +823,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled and checked
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with disabled checkbox 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
   cursor: not-allowed;
@@ -921,23 +882,23 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled checkbox 1`]
   border-radius: 9999px;
 }
 
-.c10 .c2:active .c4,
-.c10:focus-within .c4,
-.c10:hover .c4 {
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
   display: block;
 }
 
-.c10:hover .c4 {
+.c9:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c10:focus-within .c4 {
+.c9:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c10 .c2:active .c4 {
+.c9 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
@@ -976,12 +937,12 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled checkbox 1`]
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c8 {
+.c7 {
   width: 100%;
   margin-top: 4px;
 }
 
-.c9 {
+.c8 {
   color: #6B6B78;
   font-size: 14px;
 }
@@ -1010,21 +971,25 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled checkbox 1`]
           data-testid="checkbox-checkMark"
           disabled=""
           role="checkbox"
+          tabindex="0"
         />
-        <input
-          aria-hidden="true"
-          class="c7"
-          disabled=""
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            disabled=""
+            type="checkbox"
+          />
+        </span>
         Checkbox Component
       </label>
     </div>
     <div
-      class="c8"
+      class="c7"
     >
       <span
-        class="c9"
+        class="c8"
       >
         Helper Text
       </span>
@@ -1034,17 +999,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled checkbox 1`]
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with error and checked checkbox 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -1103,44 +1057,44 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and checked che
   border-radius: 9999px;
 }
 
-.c10 .c2:active .c4,
-.c10:focus-within .c4,
-.c10:hover .c4 {
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
   display: block;
 }
 
-.c10:hover .c4 {
+.c9:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c10:focus-within .c4 {
+.c9:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c10 .c2:active .c4 {
+.c9 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c11 .c2:active .c4,
-.c11:focus-within .c4,
-.c11:hover .c4 {
+.c10 .c2:active .c4,
+.c10:focus-within .c4,
+.c10:hover .c4 {
   display: block;
 }
 
-.c11:hover .c4 {
+.c10:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c11:focus-within .c4 {
+.c10:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c11 .c2:active .c4 {
+.c10 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
@@ -1178,33 +1132,33 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and checked che
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c12 .c2:active .c4,
-.c12:focus-within .c4,
-.c12:hover .c4 {
+.c11 .c2:active .c4,
+.c11:focus-within .c4,
+.c11:hover .c4 {
   display: block;
 }
 
-.c12:hover .c4 {
+.c11:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c12:focus-within .c4 {
+.c11:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c12 .c2:active .c4 {
+.c11 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c8 {
+.c7 {
   width: 100%;
   margin-top: 4px;
 }
 
-.c9 {
+.c8 {
   color: #CA4808;
   font-size: 14px;
 }
@@ -1229,26 +1183,30 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and checked che
           class="c6"
           data-testid="checkbox-checkMark"
           role="checkbox"
+          tabindex="0"
         >
           <svg
             height="24"
             width="24"
           />
         </div>
-        <input
-          aria-hidden="true"
-          checked=""
-          class="c7"
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            checked=""
+            type="checkbox"
+          />
+        </span>
         Checkbox Component
       </label>
     </div>
     <div
-      class="c8"
+      class="c7"
     >
       <span
-        class="c9"
+        class="c8"
       >
         Error msg
       </span>
@@ -1258,17 +1216,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and checked che
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with error and indeterminate checkbox 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -1327,44 +1274,44 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and indetermina
   border-radius: 9999px;
 }
 
-.c10 .c2:active .c4,
-.c10:focus-within .c4,
-.c10:hover .c4 {
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
   display: block;
 }
 
-.c10:hover .c4 {
+.c9:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c10:focus-within .c4 {
+.c9:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c10 .c2:active .c4 {
+.c9 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c11 .c2:active .c4,
-.c11:focus-within .c4,
-.c11:hover .c4 {
+.c10 .c2:active .c4,
+.c10:focus-within .c4,
+.c10:hover .c4 {
   display: block;
 }
 
-.c11:hover .c4 {
+.c10:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c11:focus-within .c4 {
+.c10:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c11 .c2:active .c4 {
+.c10 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
@@ -1402,75 +1349,75 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and indetermina
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c12 .c2:active .c4,
-.c12:focus-within .c4,
-.c12:hover .c4 {
+.c11 .c2:active .c4,
+.c11:focus-within .c4,
+.c11:hover .c4 {
   display: block;
 }
 
-.c12:hover .c4 {
+.c11:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c12:focus-within .c4 {
+.c11:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c12 .c2:active .c4 {
+.c11 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c13 .c2:active .c4,
-.c13:focus-within .c4,
-.c13:hover .c4 {
+.c12 .c2:active .c4,
+.c12:focus-within .c4,
+.c12:hover .c4 {
   display: block;
 }
 
-.c13:hover .c4 {
+.c12:hover .c4 {
   background-color: rgba(255,255,255,0.25);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.25);
 }
 
-.c13:focus-within .c4 {
+.c12:focus-within .c4 {
   background-color: rgba(255,255,255,0.5);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.5);
 }
 
-.c13 .c2:active .c4 {
+.c12 .c2:active .c4 {
   background-color: rgba(255,255,255,0.75);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
 
-.c14 .c2:active .c4,
-.c14:focus-within .c4,
-.c14:hover .c4 {
+.c13 .c2:active .c4,
+.c13:focus-within .c4,
+.c13:hover .c4 {
   display: block;
 }
 
-.c14:hover .c4 {
+.c13:hover .c4 {
   background-color: rgba(255,255,255,0.25);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.25);
 }
 
-.c14:focus-within .c4 {
+.c13:focus-within .c4 {
   background-color: rgba(255,255,255,0.5);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.5);
 }
 
-.c14 .c2:active .c4 {
+.c13 .c2:active .c4 {
   background-color: rgba(255,255,255,0.75);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
 
-.c8 {
+.c7 {
   width: 100%;
   margin-top: 4px;
 }
 
-.c9 {
+.c8 {
   color: #CA4808;
   font-size: 14px;
 }
@@ -1495,25 +1442,29 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and indetermina
           class="c6"
           data-testid="checkbox-checkMark"
           role="checkbox"
+          tabindex="0"
         >
           <svg
             height="24"
             width="24"
           />
         </div>
-        <input
-          aria-hidden="true"
-          class="c7"
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            type="checkbox"
+          />
+        </span>
         Checkbox Component
       </label>
     </div>
     <div
-      class="c8"
+      class="c7"
     >
       <span
-        class="c9"
+        class="c8"
       >
         Error msg
       </span>
@@ -1523,17 +1474,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and indetermina
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with error checkbox 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -1625,75 +1565,75 @@ exports[`<Checkbox /> Snapshots should match snapshot with error checkbox 1`] =
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c10 .c2:active .c4,
-.c10:focus-within .c4,
-.c10:hover .c4 {
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
   display: block;
 }
 
-.c10:hover .c4 {
+.c9:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c10:focus-within .c4 {
+.c9:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c10 .c2:active .c4 {
+.c9 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c11 .c2:active .c4,
-.c11:focus-within .c4,
-.c11:hover .c4 {
+.c10 .c2:active .c4,
+.c10:focus-within .c4,
+.c10:hover .c4 {
   display: block;
 }
 
-.c11:hover .c4 {
+.c10:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c11:focus-within .c4 {
+.c10:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c11 .c2:active .c4 {
+.c10 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c12 .c2:active .c4,
-.c12:focus-within .c4,
-.c12:hover .c4 {
+.c11 .c2:active .c4,
+.c11:focus-within .c4,
+.c11:hover .c4 {
   display: block;
 }
 
-.c12:hover .c4 {
+.c11:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c12:focus-within .c4 {
+.c11:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c12 .c2:active .c4 {
+.c11 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c8 {
+.c7 {
   width: 100%;
   margin-top: 4px;
 }
 
-.c9 {
+.c8 {
   color: #CA4808;
   font-size: 14px;
 }
@@ -1718,20 +1658,24 @@ exports[`<Checkbox /> Snapshots should match snapshot with error checkbox 1`] =
           class="c6"
           data-testid="checkbox-checkMark"
           role="checkbox"
+          tabindex="0"
         />
-        <input
-          aria-hidden="true"
-          class="c7"
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            type="checkbox"
+          />
+        </span>
         Checkbox Component
       </label>
     </div>
     <div
-      class="c8"
+      class="c7"
     >
       <span
-        class="c9"
+        class="c8"
       >
         Error msg
       </span>
@@ -1741,17 +1685,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with error checkbox 1`] =
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with indeterminate 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -1810,44 +1743,44 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate 1`] = `
   border-radius: 9999px;
 }
 
-.c8 .c2:active .c4,
-.c8:focus-within .c4,
-.c8:hover .c4 {
+.c7 .c2:active .c4,
+.c7:focus-within .c4,
+.c7:hover .c4 {
   display: block;
 }
 
-.c8:hover .c4 {
+.c7:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c8:focus-within .c4 {
+.c7:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c8 .c2:active .c4 {
+.c7 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c9 .c2:active .c4,
-.c9:focus-within .c4,
-.c9:hover .c4 {
+.c8 .c2:active .c4,
+.c8:focus-within .c4,
+.c8:hover .c4 {
   display: block;
 }
 
-.c9:hover .c4 {
+.c8:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c9:focus-within .c4 {
+.c8:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c9 .c2:active .c4 {
+.c8 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
@@ -1885,65 +1818,65 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate 1`] = `
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c10 .c2:active .c4,
-.c10:focus-within .c4,
-.c10:hover .c4 {
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
   display: block;
 }
 
-.c10:hover .c4 {
+.c9:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c10:focus-within .c4 {
+.c9:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c10 .c2:active .c4 {
+.c9 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c11 .c2:active .c4,
-.c11:focus-within .c4,
-.c11:hover .c4 {
+.c10 .c2:active .c4,
+.c10:focus-within .c4,
+.c10:hover .c4 {
   display: block;
 }
 
-.c11:hover .c4 {
+.c10:hover .c4 {
   background-color: rgba(255,255,255,0.25);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.25);
 }
 
-.c11:focus-within .c4 {
+.c10:focus-within .c4 {
   background-color: rgba(255,255,255,0.5);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.5);
 }
 
-.c11 .c2:active .c4 {
+.c10 .c2:active .c4 {
   background-color: rgba(255,255,255,0.75);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
 
-.c12 .c2:active .c4,
-.c12:focus-within .c4,
-.c12:hover .c4 {
+.c11 .c2:active .c4,
+.c11:focus-within .c4,
+.c11:hover .c4 {
   display: block;
 }
 
-.c12:hover .c4 {
+.c11:hover .c4 {
   background-color: rgba(255,255,255,0.25);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.25);
 }
 
-.c12:focus-within .c4 {
+.c11:focus-within .c4 {
   background-color: rgba(255,255,255,0.5);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.5);
 }
 
-.c12 .c2:active .c4 {
+.c11 .c2:active .c4 {
   background-color: rgba(255,255,255,0.75);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
@@ -1968,17 +1901,21 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate 1`] = `
           class="c6"
           data-testid="checkbox-checkMark"
           role="checkbox"
+          tabindex="0"
         >
           <svg
             height="24"
             width="24"
           />
         </div>
-        <input
-          aria-hidden="true"
-          class="c7"
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            type="checkbox"
+          />
+        </span>
       </label>
     </div>
   </div>
@@ -1986,17 +1923,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate 1`] = `
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with indeterminate and disabled checkbox 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
   cursor: not-allowed;
@@ -2056,65 +1982,65 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate and dis
   border-radius: 9999px;
 }
 
-.c8 .c2:active .c4,
-.c8:focus-within .c4,
-.c8:hover .c4 {
+.c7 .c2:active .c4,
+.c7:focus-within .c4,
+.c7:hover .c4 {
   display: block;
 }
 
-.c8:hover .c4 {
+.c7:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c8:focus-within .c4 {
+.c7:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c8 .c2:active .c4 {
+.c7 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c9 .c2:active .c4,
-.c9:focus-within .c4,
-.c9:hover .c4 {
+.c8 .c2:active .c4,
+.c8:focus-within .c4,
+.c8:hover .c4 {
   display: block;
 }
 
-.c9:hover .c4 {
+.c8:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c9:focus-within .c4 {
+.c8:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c9 .c2:active .c4 {
+.c8 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c10 .c2:active .c4,
-.c10:focus-within .c4,
-.c10:hover .c4 {
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
   display: block;
 }
 
-.c10:hover .c4 {
+.c9:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c10:focus-within .c4 {
+.c9:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c10 .c2:active .c4 {
+.c9 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
@@ -2153,44 +2079,44 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate and dis
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c11 .c2:active .c4,
-.c11:focus-within .c4,
-.c11:hover .c4 {
+.c10 .c2:active .c4,
+.c10:focus-within .c4,
+.c10:hover .c4 {
   display: block;
 }
 
-.c11:hover .c4 {
+.c10:hover .c4 {
   background-color: rgba(255,255,255,0.25);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.25);
 }
 
-.c11:focus-within .c4 {
+.c10:focus-within .c4 {
   background-color: rgba(255,255,255,0.5);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.5);
 }
 
-.c11 .c2:active .c4 {
+.c10 .c2:active .c4 {
   background-color: rgba(255,255,255,0.75);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
 
-.c12 .c2:active .c4,
-.c12:focus-within .c4,
-.c12:hover .c4 {
+.c11 .c2:active .c4,
+.c11:focus-within .c4,
+.c11:hover .c4 {
   display: block;
 }
 
-.c12:hover .c4 {
+.c11:hover .c4 {
   background-color: rgba(255,255,255,0.25);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.25);
 }
 
-.c12:focus-within .c4 {
+.c11:focus-within .c4 {
   background-color: rgba(255,255,255,0.5);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.5);
 }
 
-.c12 .c2:active .c4 {
+.c11 .c2:active .c4 {
   background-color: rgba(255,255,255,0.75);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
@@ -2219,18 +2145,22 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate and dis
           data-testid="checkbox-checkMark"
           disabled=""
           role="checkbox"
+          tabindex="0"
         >
           <svg
             height="24"
             width="24"
           />
         </div>
-        <input
-          aria-hidden="true"
-          class="c7"
-          disabled=""
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            disabled=""
+            type="checkbox"
+          />
+        </span>
       </label>
     </div>
   </div>
@@ -2238,17 +2168,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate and dis
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with inverted 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -2307,86 +2226,86 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted 1`] = `
   border-radius: 9999px;
 }
 
-.c10 .c2:active .c4,
-.c10:focus-within .c4,
-.c10:hover .c4 {
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
   display: block;
 }
 
-.c10:hover .c4 {
+.c9:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c10:focus-within .c4 {
+.c9:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c10 .c2:active .c4 {
+.c9 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c11 .c2:active .c4,
-.c11:focus-within .c4,
-.c11:hover .c4 {
+.c10 .c2:active .c4,
+.c10:focus-within .c4,
+.c10:hover .c4 {
   display: block;
 }
 
-.c11:hover .c4 {
+.c10:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c11:focus-within .c4 {
+.c10:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c11 .c2:active .c4 {
+.c10 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c12 .c2:active .c4,
-.c12:focus-within .c4,
-.c12:hover .c4 {
+.c11 .c2:active .c4,
+.c11:focus-within .c4,
+.c11:hover .c4 {
   display: block;
 }
 
-.c12:hover .c4 {
+.c11:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c12:focus-within .c4 {
+.c11:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c12 .c2:active .c4 {
+.c11 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c13 .c2:active .c4,
-.c13:focus-within .c4,
-.c13:hover .c4 {
+.c12 .c2:active .c4,
+.c12:focus-within .c4,
+.c12:hover .c4 {
   display: block;
 }
 
-.c13:hover .c4 {
+.c12:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c13:focus-within .c4 {
+.c12:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c13 .c2:active .c4 {
+.c12 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
@@ -2424,12 +2343,12 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted 1`] = `
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
 
-.c8 {
+.c7 {
   width: 100%;
   margin-top: 4px;
 }
 
-.c9 {
+.c8 {
   color: #6B6B78;
   font-size: 14px;
 }
@@ -2454,20 +2373,24 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted 1`] = `
           class="c6"
           data-testid="checkbox-checkMark"
           role="checkbox"
+          tabindex="0"
         />
-        <input
-          aria-hidden="true"
-          class="c7"
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            type="checkbox"
+          />
+        </span>
         Checkbox Component
       </label>
     </div>
     <div
-      class="c8"
+      class="c7"
     >
       <span
-        class="c9"
+        class="c8"
       >
         Helper Text
       </span>
@@ -2477,17 +2400,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted 1`] = `
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -2546,86 +2458,86 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
   border-radius: 9999px;
 }
 
-.c10 .c2:active .c4,
-.c10:focus-within .c4,
-.c10:hover .c4 {
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
   display: block;
 }
 
-.c10:hover .c4 {
+.c9:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c10:focus-within .c4 {
+.c9:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c10 .c2:active .c4 {
+.c9 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c11 .c2:active .c4,
-.c11:focus-within .c4,
-.c11:hover .c4 {
+.c10 .c2:active .c4,
+.c10:focus-within .c4,
+.c10:hover .c4 {
   display: block;
 }
 
-.c11:hover .c4 {
+.c10:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c11:focus-within .c4 {
+.c10:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c11 .c2:active .c4 {
+.c10 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c12 .c2:active .c4,
-.c12:focus-within .c4,
-.c12:hover .c4 {
+.c11 .c2:active .c4,
+.c11:focus-within .c4,
+.c11:hover .c4 {
   display: block;
 }
 
-.c12:hover .c4 {
+.c11:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c12:focus-within .c4 {
+.c11:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c12 .c2:active .c4 {
+.c11 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c13 .c2:active .c4,
-.c13:focus-within .c4,
-.c13:hover .c4 {
+.c12 .c2:active .c4,
+.c12:focus-within .c4,
+.c12:hover .c4 {
   display: block;
 }
 
-.c13:hover .c4 {
+.c12:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c13:focus-within .c4 {
+.c12:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c13 .c2:active .c4 {
+.c12 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
@@ -2663,12 +2575,12 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
 
-.c8 {
+.c7 {
   width: 100%;
   margin-top: 4px;
 }
 
-.c9 {
+.c8 {
   color: #6B6B78;
   font-size: 14px;
 }
@@ -2693,26 +2605,30 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
           class="c6"
           data-testid="checkbox-checkMark"
           role="checkbox"
+          tabindex="0"
         >
           <svg
             height="24"
             width="24"
           />
         </div>
-        <input
-          aria-hidden="true"
-          checked=""
-          class="c7"
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            checked=""
+            type="checkbox"
+          />
+        </span>
         Checkbox Component
       </label>
     </div>
     <div
-      class="c8"
+      class="c7"
     >
       <span
-        class="c9"
+        class="c8"
       >
         Helper Text
       </span>
@@ -2722,17 +2638,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked and disabled 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
   cursor: not-allowed;
@@ -2792,6 +2697,27 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
   border-radius: 9999px;
 }
 
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
+  display: block;
+}
+
+.c9:hover .c4 {
+  background-color: rgba(245,245,250,0.25);
+  box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
+}
+
+.c9:focus-within .c4 {
+  background-color: rgba(245,245,250,0.5);
+  box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
+}
+
+.c9 .c2:active .c4 {
+  background-color: rgba(245,245,250,0.75);
+  box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
+}
+
 .c10 .c2:active .c4,
 .c10:focus-within .c4,
 .c10:hover .c4 {
@@ -2820,18 +2746,18 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
 }
 
 .c11:hover .c4 {
-  background-color: rgba(245,245,250,0.25);
-  box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
+  background-color: rgba(216,56,94,0.25);
+  box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
 .c11:focus-within .c4 {
-  background-color: rgba(245,245,250,0.5);
-  box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
+  background-color: rgba(216,56,94,0.5);
+  box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
 .c11 .c2:active .c4 {
-  background-color: rgba(245,245,250,0.75);
-  box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
+  background-color: rgba(216,56,94,0.75);
+  box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
 .c12 .c2:active .c4,
@@ -2862,37 +2788,16 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
 }
 
 .c13:hover .c4 {
-  background-color: rgba(216,56,94,0.25);
-  box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
-}
-
-.c13:focus-within .c4 {
-  background-color: rgba(216,56,94,0.5);
-  box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
-}
-
-.c13 .c2:active .c4 {
-  background-color: rgba(216,56,94,0.75);
-  box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
-}
-
-.c14 .c2:active .c4,
-.c14:focus-within .c4,
-.c14:hover .c4 {
-  display: block;
-}
-
-.c14:hover .c4 {
   background-color: rgba(255,255,255,0.25);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.25);
 }
 
-.c14:focus-within .c4 {
+.c13:focus-within .c4 {
   background-color: rgba(255,255,255,0.5);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.5);
 }
 
-.c14 .c2:active .c4 {
+.c13 .c2:active .c4 {
   background-color: rgba(255,255,255,0.75);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
@@ -2931,12 +2836,12 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
 
-.c8 {
+.c7 {
   width: 100%;
   margin-top: 4px;
 }
 
-.c9 {
+.c8 {
   color: #6B6B78;
   font-size: 14px;
 }
@@ -2965,27 +2870,31 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
           data-testid="checkbox-checkMark"
           disabled=""
           role="checkbox"
+          tabindex="0"
         >
           <svg
             height="24"
             width="24"
           />
         </div>
-        <input
-          aria-hidden="true"
-          checked=""
-          class="c7"
-          disabled=""
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            checked=""
+            disabled=""
+            type="checkbox"
+          />
+        </span>
         Checkbox Component
       </label>
     </div>
     <div
-      class="c8"
+      class="c7"
     >
       <span
-        class="c9"
+        class="c8"
       >
         Helper Text
       </span>
@@ -2995,17 +2904,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot with inverted and indeterminate 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -3064,86 +2962,86 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and indeterm
   border-radius: 9999px;
 }
 
-.c10 .c2:active .c4,
-.c10:focus-within .c4,
-.c10:hover .c4 {
+.c9 .c2:active .c4,
+.c9:focus-within .c4,
+.c9:hover .c4 {
   display: block;
 }
 
-.c10:hover .c4 {
+.c9:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c10:focus-within .c4 {
+.c9:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c10 .c2:active .c4 {
+.c9 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c11 .c2:active .c4,
-.c11:focus-within .c4,
-.c11:hover .c4 {
+.c10 .c2:active .c4,
+.c10:focus-within .c4,
+.c10:hover .c4 {
   display: block;
 }
 
-.c11:hover .c4 {
+.c10:hover .c4 {
   background-color: rgba(245,245,250,0.25);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.25);
 }
 
-.c11:focus-within .c4 {
+.c10:focus-within .c4 {
   background-color: rgba(245,245,250,0.5);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.5);
 }
 
-.c11 .c2:active .c4 {
+.c10 .c2:active .c4 {
   background-color: rgba(245,245,250,0.75);
   box-shadow: 0 0 0 8px rgba(245,245,250,0.75);
 }
 
-.c12 .c2:active .c4,
-.c12:focus-within .c4,
-.c12:hover .c4 {
+.c11 .c2:active .c4,
+.c11:focus-within .c4,
+.c11:hover .c4 {
   display: block;
 }
 
-.c12:hover .c4 {
+.c11:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c12:focus-within .c4 {
+.c11:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c12 .c2:active .c4 {
+.c11 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
 
-.c13 .c2:active .c4,
-.c13:focus-within .c4,
-.c13:hover .c4 {
+.c12 .c2:active .c4,
+.c12:focus-within .c4,
+.c12:hover .c4 {
   display: block;
 }
 
-.c13:hover .c4 {
+.c12:hover .c4 {
   background-color: rgba(216,56,94,0.25);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.25);
 }
 
-.c13:focus-within .c4 {
+.c12:focus-within .c4 {
   background-color: rgba(216,56,94,0.5);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.5);
 }
 
-.c13 .c2:active .c4 {
+.c12 .c2:active .c4 {
   background-color: rgba(216,56,94,0.75);
   box-shadow: 0 0 0 8px rgba(216,56,94,0.75);
 }
@@ -3181,33 +3079,33 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and indeterm
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
 
-.c14 .c2:active .c4,
-.c14:focus-within .c4,
-.c14:hover .c4 {
+.c13 .c2:active .c4,
+.c13:focus-within .c4,
+.c13:hover .c4 {
   display: block;
 }
 
-.c14:hover .c4 {
+.c13:hover .c4 {
   background-color: rgba(255,255,255,0.25);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.25);
 }
 
-.c14:focus-within .c4 {
+.c13:focus-within .c4 {
   background-color: rgba(255,255,255,0.5);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.5);
 }
 
-.c14 .c2:active .c4 {
+.c13 .c2:active .c4 {
   background-color: rgba(255,255,255,0.75);
   box-shadow: 0 0 0 8px rgba(255,255,255,0.75);
 }
 
-.c8 {
+.c7 {
   width: 100%;
   margin-top: 4px;
 }
 
-.c9 {
+.c8 {
   color: #6B6B78;
   font-size: 14px;
 }
@@ -3232,25 +3130,29 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and indeterm
           class="c6"
           data-testid="checkbox-checkMark"
           role="checkbox"
+          tabindex="0"
         >
           <svg
             height="24"
             width="24"
           />
         </div>
-        <input
-          aria-hidden="true"
-          class="c7"
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            type="checkbox"
+          />
+        </span>
         Checkbox Component
       </label>
     </div>
     <div
-      class="c8"
+      class="c7"
     >
       <span
-        class="c9"
+        class="c8"
       >
         Helper Text
       </span>
@@ -3260,17 +3162,6 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and indeterm
 `;
 
 exports[`<Checkbox /> Snapshots should match snapshot without props 1`] = `
-.c7 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-}
-
 .c0 {
   display: inline-block;
 }
@@ -3382,12 +3273,16 @@ exports[`<Checkbox /> Snapshots should match snapshot without props 1`] = `
           class="c6"
           data-testid="checkbox-checkMark"
           role="checkbox"
+          tabindex="0"
         />
-        <input
-          aria-hidden="true"
-          class="c7"
-          type="checkbox"
-        />
+        <span
+          class="visually-hidden"
+          style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;"
+        >
+          <input
+            type="checkbox"
+          />
+        </span>
       </label>
     </div>
   </div>
diff --git a/packages/yoga/src/shared/VisualyHidden.jsx b/packages/yoga/src/shared/VisualyHidden.jsx
new file mode 100644
index 0000000000..bfde5d8ea7
--- /dev/null
+++ b/packages/yoga/src/shared/VisualyHidden.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const VisuallyHidden = ({ children, ...delegated }) => {
+  return (
+    <span
+      className="visually-hidden"
+      style={{
+        position: 'absolute',
+        width: '1px',
+        height: '1px',
+        overflow: 'hidden',
+        clip: 'rect(0 0 0 0)',
+        clipPath: 'inset(50%)',
+        whiteSpace: 'nowrap',
+      }}
+      {...delegated}
+    >
+      {children}
+    </span>
+  );
+};
+
+VisuallyHidden.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default VisuallyHidden;
diff --git a/packages/yoga/src/shared/index.js b/packages/yoga/src/shared/index.js
index 23cfab20bd..2de6917d9d 100644
--- a/packages/yoga/src/shared/index.js
+++ b/packages/yoga/src/shared/index.js
@@ -1,4 +1,5 @@
 import HiddenInput from './HiddenInput';
+import VisuallyHidden from './VisualyHidden';
 import {
   limitChildren,
   typeOf,
@@ -7,4 +8,12 @@ import {
   deprecated,
 } from './propTypes';
 
-export { HiddenInput, limitChildren, typeOf, charLength, max, deprecated };
+export {
+  HiddenInput,
+  VisuallyHidden,
+  limitChildren,
+  typeOf,
+  charLength,
+  max,
+  deprecated,
+};