fix(a11y): mint card has no nested interactive elements
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:
parent
caa5f8c56e
commit
75c9cc4010
1 changed files with 13 additions and 11 deletions
|
|
@ -55,16 +55,7 @@ function MintRow({
|
||||||
const health = healthBadge(mint);
|
const health = healthBadge(mint);
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
className="cursor-pointer bg-black/90 border-2 border-white/10 hover:border-[#ccff00]/30 transition-colors"
|
className="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();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<CardContent className="p-4">
|
<CardContent className="p-4">
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
|
|
@ -86,7 +77,18 @@ function MintRow({
|
||||||
|
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
<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)}>
|
<Badge variant="outline" className={cn('text-[10px]', health.className)}>
|
||||||
{t(health.label)}
|
{t(health.label)}
|
||||||
</Badge>
|
</Badge>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue