From 7729f9c37250b4ff4bbd5be3bfd3e9f5e49eb050 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 7 Feb 2026 20:53:39 +0000
Subject: [PATCH] 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>
---
 src/components/checkbox/styles.scss | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/checkbox/styles.scss b/src/components/checkbox/styles.scss
index 91c1ed415..dc6e94cd4 100644
--- a/src/components/checkbox/styles.scss
+++ b/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 {