From 8d1202ca34accb87de9483ef3d007bafaf2ce054 Mon Sep 17 00:00:00 2001
From: ordinarthur <arthur.barre@forgeron3.fr>
Date: Wed, 8 Apr 2026 14:02:27 +0200
Subject: [PATCH] fix(profile): remove nested Checkbox inside equipment tile
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Radix Checkbox renders a <button>, so wrapping it inside our own tile
<button> violated HTML nesting rules and blocked the click from reaching
the tile handler. The visual state (orange border + bg) already
indicates selection — drop the Checkbox entirely and add aria-pressed
for accessibility. Also bump vertical padding and add an active scale
for tactile feedback.
---
 frontend/src/pages/Profile.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 2a40922..6b3aa42 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -35,7 +35,6 @@ import {
   Zap,
 } from "lucide-react";
 import { Link } from "react-router-dom";
-import { Checkbox } from "@/components/ui/checkbox";
 
 import { recipeService, Recipe } from "@/api/recipe";
 import userService from "@/api/user";
@@ -632,17 +631,13 @@ export default function Profile() {
                           key={opt.key}
                           type="button"
                           onClick={() => toggleEquipment(opt.key)}
-                          className={`flex flex-col items-center justify-center gap-1 rounded-xl border-2 px-2 py-3 text-xs font-medium transition-all ${
+                          aria-pressed={active}
+                          className={`flex flex-col items-center justify-center gap-1.5 rounded-xl border-2 px-2 py-3.5 text-xs font-medium transition-all active:scale-[0.97] ${
                             active
-                              ? "border-orange-500 bg-orange-50 dark:bg-orange-950/30 text-orange-700 dark:text-orange-300"
+                              ? "border-orange-500 bg-orange-50 dark:bg-orange-950/30 text-orange-700 dark:text-orange-300 shadow-sm shadow-orange-500/10"
                               : "border-border hover:border-orange-200 hover:bg-orange-50/50 dark:hover:bg-orange-950/20 text-muted-foreground"
                           }`}
                         >
-                          <Checkbox
-                            checked={active}
-                            className="pointer-events-none sr-only"
-                            tabIndex={-1}
-                          />
                           <span className="text-2xl leading-none">{opt.emoji}</span>
                           <span className="text-center leading-tight">{opt.label}</span>
                         </button>