ordinarthur/freedge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(profile): remove nested Checkbox inside equipment tile buttons

Browse Source 
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.
This commit is contained in:
ordinarthur 2026-04-08 14:02:27 +02:00
parent 64d2bf4506
commit 8d1202ca34
1 changed files with 3 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/pages/Profile.tsx
View File

@ -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>