From 09e1612db7bf9b082e2914ad55087861d0cce224 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sat, 26 Sep 2026 18:46:51 +0700
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20Batch=20E=20part=201=20=E2=80=94?=
 =?UTF-8?q?=20labels,=20valid=20nesting,=20touch=20targets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- EmptyState: render <Link> as the button (a <button> inside <Link> was invalid
  and double-focusable); AboutPage <a href> -> <Link> (no full reload)
- aria-label on icon-only controls: settings Back, conversation Refresh/Send,
  crew chat Send
- Crew invite Accept/Decline raised to 44px touch targets
---
 src/components/CrewChat.tsx       | 1 +
 src/components/CrewInviteCard.tsx | 4 ++--
 src/components/EmptyState.tsx     | 8 ++++----
 src/pages/AboutPage.tsx           | 4 ++--
 src/pages/ConversationPage.tsx    | 4 +++-
 src/pages/SettingsPage.tsx        | 1 +
 6 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/CrewChat.tsx b/src/components/CrewChat.tsx
index 7585c7e..d3de85e 100644
--- a/src/components/CrewChat.tsx
+++ b/src/components/CrewChat.tsx
@@ -431,6 +431,7 @@ export function CrewChat({
                   type="submit"
                   size="icon"
                   disabled={isPending || !draft.trim()}
+                  aria-label="Send message"
                   className="bg-teal-500 hover:bg-teal-600 text-black shrink-0"
                 >
                   {isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
diff --git a/src/components/CrewInviteCard.tsx b/src/components/CrewInviteCard.tsx
index c5eb19c..3a0d4d8 100644
--- a/src/components/CrewInviteCard.tsx
+++ b/src/components/CrewInviteCard.tsx
@@ -118,7 +118,7 @@ export function CrewInviteCard({
               size="sm"
               onClick={handleAccept}
               disabled={busy}
-              className="h-8 flex-1 gap-1.5 bg-teal-500 font-bold text-black hover:bg-teal-600"
+              className="min-h-11 flex-1 gap-1.5 bg-teal-500 font-bold text-black hover:bg-teal-600"
             >
               {accepting ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Check className="h-3.5 w-3.5" />}
               Accept
@@ -128,7 +128,7 @@ export function CrewInviteCard({
               variant="outline"
               onClick={handleDecline}
               disabled={busy}
-              className="h-8 gap-1.5 border-white/15 text-gray-400 hover:bg-white/10 hover:text-white"
+              className="min-h-11 gap-1.5 border-white/15 text-gray-400 hover:bg-white/10 hover:text-white"
             >
               {declining ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <X className="h-3.5 w-3.5" />}
               Decline
diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
index 003139c..3f0419f 100644
--- a/src/components/EmptyState.tsx
+++ b/src/components/EmptyState.tsx
@@ -63,11 +63,11 @@ function ActionButton({ action }: { action: EmptyStateAction }) {
   );
 
   if (action.to) {
+    // Single interactive element — a <button> nested in a <Link> was invalid
+    // and double-focusable for assistive tech.
     return (
-      <Link to={action.to} className="w-full sm:w-auto">
-        <button type="button" className={classes}>
-          {inner}
-        </button>
+      <Link to={action.to} className={classes}>
+        {inner}
       </Link>
     );
   }
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
index b9efe98..f2ace54 100644
--- a/src/pages/AboutPage.tsx
+++ b/src/pages/AboutPage.tsx
@@ -156,11 +156,11 @@ Version: v0.1.0`;
               <p className="text-gray-300 mb-4 text-sm">
                 SkateSpots is open source and community-driven. Contribute code, share spots, or help others get started.
               </p>
-              <a href="/onboarding">
+              <Link to="/onboarding">
                 <Button className="gap-2 bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold uppercase w-full">
                   Get Started
                 </Button>
-              </a>
+              </Link>
             </CardContent>
           </Card>
         </div>
diff --git a/src/pages/ConversationPage.tsx b/src/pages/ConversationPage.tsx
index 0709198..ccb6dd8 100644
--- a/src/pages/ConversationPage.tsx
+++ b/src/pages/ConversationPage.tsx
@@ -217,7 +217,7 @@ export default function ConversationPage() {
         {/* Header */}
         <div className="flex items-center gap-2 sm:gap-3 pb-3 sm:pb-4 border-b border-gray-800 flex-shrink-0">
           <Link to="/messages">
-            <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
+            <Button variant="ghost" size="icon" aria-label="Back" className="text-gray-400 hover:text-white">
               <ArrowLeft className="h-5 w-5" />
             </Button>
           </Link>
@@ -239,6 +239,7 @@ export default function ConversationPage() {
             size="icon"
             onClick={() => refetch()}
             disabled={isRefetching}
+            aria-label="Refresh"
             className="text-gray-400 hover:text-white"
           >
             <RefreshCw className={cn("h-4 w-4", isRefetching && "animate-spin")} />
@@ -303,6 +304,7 @@ export default function ConversationPage() {
             <Button
               onClick={handleSend}
               disabled={!newMessage.trim() || isSending}
+              aria-label="Send message"
               className="bg-[#ff0040] hover:bg-[#ff0040]/90 text-white h-[44px] w-[44px] sm:h-auto sm:w-auto p-0 sm:px-4 flex-shrink-0"
             >
               {isSending ? (
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index 5c0e56b..6f31ca8 100644
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -76,6 +76,7 @@ function BackHeader({ title, onBack }: { title: string; onBack: () => void }) {
     <div className="flex items-center gap-3 mb-5">
       <button
         onClick={onBack}
+        aria-label="Back"
         className="flex items-center justify-center w-8 h-8 rounded-xl bg-white/5 hover:bg-white/10 active:scale-95 transition-all"
       >
         <ChevronLeft className="h-4 w-4 text-white" />