skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

fix(a11y): mint card has no nested interactive elements

Browse source 
The card was role=button wrapping the Add <Button> (and a terms <a>), so Enter
on Add also opened the detail sheet. The name is now a real button and the card
no longer carries a button role.
This commit is contained in:
SkateSpots 2026-10-02 23:26:23 +07:00
parent caa5f8c56e
commit 75c9cc4010
1 changed files with 13 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/pages/MintsPage.tsx
View file

@ -55,16 +55,7 @@ function MintRow({
const health = healthBadge(mint);
return (
<Card
className="cursor-pointer bg-black/90 border-2 border-white/10 hover:border-[#ccff00]/30 transition-colors"
role="button"
tabIndex={0}
onClick={onSelect}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onSelect();
}
}}
className="bg-black/90 border-2 border-white/10 hover:border-[#ccff00]/30 transition-colors"
>
<CardContent className="p-4">
<div className="flex items-start gap-3">
@ -86,7 +77,18 @@ function MintRow({
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2 flex-wrap">
<h3 className="font-bold text-white truncate">{mint.name || hostOf(mint.url)}</h3>
<h3 className="font-bold text-white truncate">
{/* A real button (not a card-wide role=button) so there are no
nested interactive elements — the Add button and the terms
link live alongside it. */}
<button
type="button"
onClick={onSelect}
className="text-left transition-colors hover:text-[#ccff00]"
>
{mint.name || hostOf(mint.url)}
</button>
</h3>
<Badge variant="outline" className={cn('text-[10px]', health.className)}>
{t(health.label)}
</Badge>