From 75c9cc40104b1102302bf568990bdeaa62994aa9 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Fri, 2 Oct 2026 23:26:23 +0700
Subject: [PATCH] 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.
---
 src/pages/MintsPage.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/pages/MintsPage.tsx b/src/pages/MintsPage.tsx
index 418f379..827d29d 100644
--- a/src/pages/MintsPage.tsx
+++ b/src/pages/MintsPage.tsx
@@ -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>