From 788aac5837c407cf6e278cba3d876883a7954012 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Tue, 7 Jul 2026 12:07:23 +0200
Subject: [PATCH] fix(a11y): extend the row-checkbox touch target to 32 px
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 16×16 checkbox on the measurement/mood/values row selectors sits
below the WCAG 2.5.8 24 px minimum. Reuse the switch's ::before
hit-area extension: the visual box stays 16 px, the pointer target
grows to 32×32 without any layout shift.
---
 src/components/ui/checkbox.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 3fa35c4c5..9ff06273e 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -25,7 +25,14 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer border-border/70 size-4 shrink-0 rounded border",
+        // The visual box stays 16×16, but the effective touch target is
+        // 32×32 via the switch's `::before` hit-area trick (v1.4.43 W5-H1):
+        // `relative` + an absolutely positioned 8 px halo that receives
+        // pointer events without disturbing layout. 16 px alone sits below
+        // the WCAG 2.5.8 24 px floor on the measurement/mood row selectors;
+        // 32 px clears it with margin while staying small enough not to
+        // blanket neighbouring controls in dense table rows.
+        "peer border-border/70 relative size-4 shrink-0 rounded border before:absolute before:inset-[-8px] before:content-['']",
         "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-background",
         "focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none",
         "disabled:cursor-not-allowed disabled:opacity-50",