feat(a11y): improve checkbox accessibility

- Replace `display: none` with visually hidden pattern for checkbox inputs.
- Add focus styles (`:focus-visible`) to checkbox visuals.
- Ensure keyboard navigation and screen reader support for checkboxes.

This fixes the issue where checkboxes were not reachable via keyboard navigation and potentially ignored by screen readers.

Co-authored-by: vizzyfreezy <36118637+vizzyfreezy@users.noreply.github.com>

Author: google-labs-jules[bot]

src/components/checkbox/styles.scss

@@ -3,7 +3,20 @@
   align-items: center;
 
   input {
-    display: none;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  input:focus-visible + .box {
+    box-shadow: 0 0 0 2px #3399ff;
+    box-shadow: 0 0 0 2px var(--button-background-color);
   }
 
   .box {