Add aria-labels to icon-only buttons

components/bounty-detail/bounty-detail-sidebar-cta.tsx

@@ -521,6 +521,7 @@ export function MobileCTA({ bounty, onCancelled }: MobileCTAProps) {
               size="lg"
               className="h-11 border-red-500/30 text-red-400 hover:bg-red-500/10 shrink-0"
               onClick={() => setCancelDialogOpen(true)}
+              aria-label="Cancel bounty"
             >
               <XCircle className="size-4" />
             </Button>
@@ -549,6 +550,7 @@ export function MobileCTA({ bounty, onCancelled }: MobileCTAProps) {
               size="lg"
               className="h-11 border-red-500/30 text-red-400 hover:bg-red-500/10 shrink-0"
               onClick={() => setCancelDialogOpen(true)}
+              aria-label="Cancel bounty"
             >
               <XCircle className="size-4" />
             </Button>

components/bounty-detail/model4-maintainer-dashboard.tsx

@@ -78,6 +78,8 @@ export function Model4MaintainerDashboard({
                       ((currentMilestoneIndex + 1) / milestones.length) * 100,
                     ),
                   );
+            const messageActionLabel = `Send message to ${contributor.userName} (coming soon)`;
+            const removeActionLabel = `Remove ${contributor.userName} from slot (coming soon)`;
 
             return (
               <div
@@ -139,13 +141,12 @@ export function Model4MaintainerDashboard({
                               handleAction("Message", contributor.userName)
                             }
                             disabled={loadingAction !== null}
+                            aria-label={messageActionLabel}
                           >
                             <MessageSquare className="size-4" />
                           </Button>
                         </TooltipTrigger>
-                        <TooltipContent>
-                          Send Message [Coming soon]
-                        </TooltipContent>
+                        <TooltipContent>{messageActionLabel}</TooltipContent>
                       </Tooltip>
 
                       <Tooltip>
@@ -228,13 +229,12 @@ export function Model4MaintainerDashboard({
                               handleAction("Remove", contributor.userName)
                             }
                             disabled={loadingAction !== null}
+                            aria-label={removeActionLabel}
                           >
                             <UserMinus className="size-4" />
                           </Button>
                         </TooltipTrigger>
-                        <TooltipContent>
-                          Remove from slot [Coming soon]
-                        </TooltipContent>
+                        <TooltipContent>{removeActionLabel}</TooltipContent>
                       </Tooltip>
                     </TooltipProvider>
                   </div>

components/bounty/forms/milestone-builder.tsx

@@ -114,6 +114,7 @@ export function MilestoneBuilder<
                 onClick={() => remove(index)}
                 disabled={fields.length === 1}
                 className="text-muted-foreground hover:text-destructive"
+                aria-label={`Remove milestone ${index + 1}`}
               >
                 <Trash2 className="size-4" />
               </Button>

components/bounty/refund-status.tsx

@@ -209,6 +209,7 @@ export function RefundStatusTracker({
               onClick={handleCopyHash}
               className="shrink-0 p-1.5 rounded-md hover:bg-muted/50 transition-colors"
               title="Copy transaction hash"
+              aria-label="Copy transaction hash"
             >
               {copiedHash ? (
                 <Check className="h-3.5 w-3.5 text-emerald-400" />

components/compliance/document-upload.tsx

@@ -98,7 +98,12 @@ export function DocumentUpload({
             </div>
           </div>
           {!uploaded && !uploading && (
-            <Button variant="ghost" size="sm" onClick={clearFile}>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={clearFile}
+              aria-label={`Remove ${label} file`}
+            >
               <X className="w-4 h-4" />
             </Button>
           )}

components/global-navbar.tsx

@@ -136,7 +136,7 @@ export function GlobalNavbar() {
             <WalletSheet
               walletInfo={activeWalletInfo}
               trigger={
-                <Button variant="outline" size="icon">
+                <Button variant="outline" size="icon" aria-label="Open wallet">
                   <Wallet className="h-4 w-4" />
                 </Button>
               }

components/mode-toggle.tsx

@@ -1,27 +1,26 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
 
 export function ModeToggle() {
-  const { setTheme } = useTheme()
+  const { setTheme } = useTheme();
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
+        <Button variant="outline" size="icon" aria-label="Toggle theme">
           <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-          <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
@@ -36,5 +35,5 @@ export function ModeToggle() {
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
-  )
+  );
 }