From 49bb25753c1684f124b0181972c3464b014172eb Mon Sep 17 00:00:00 2001
From: ghzhost <patricknasci@ghzhost.com>
Date: Fri, 21 Aug 2026 14:59:12 +0000
Subject: [PATCH] fix(a11y): add intermediate h2 headings and descriptive
 aria-labels for buttons (#280, #281, #282)

---
 src/app/issues/page.tsx                 |  1 +
 src/app/milestones/MilestoneActions.tsx | 32 +++++++++++++++++++++----
 src/app/milestones/page.tsx             |  5 ++--
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/app/issues/page.tsx b/src/app/issues/page.tsx
index ed1e81d..1c94c70 100644
--- a/src/app/issues/page.tsx
+++ b/src/app/issues/page.tsx
@@ -24,6 +24,7 @@ export default async function IssuesPage() {
           moment it&apos;s merged.
         </p>
       </div>
+      <h2 className="sr-only">Bounties list</h2>
       <div className="grid gap-4 md:grid-cols-2">
         {bounties.map((bounty) => (
           <BountyCard key={bounty.id} bounty={bounty} />
diff --git a/src/app/milestones/MilestoneActions.tsx b/src/app/milestones/MilestoneActions.tsx
index 70c4303..d6d946c 100644
--- a/src/app/milestones/MilestoneActions.tsx
+++ b/src/app/milestones/MilestoneActions.tsx
@@ -6,7 +6,13 @@ import { Button } from "@/components/ui/Button";
 import { useWallet } from "@/context/WalletContext";
 import { apiPost, ApiRequestError } from "@/lib/api";
 
-export function MilestoneFundButton({ milestoneId }: { milestoneId: string }) {
+export function MilestoneFundButton({
+  milestoneId,
+  milestoneName,
+}: {
+  milestoneId: string;
+  milestoneName?: string;
+}) {
   const router = useRouter();
   const { address, connect, connecting } = useWallet();
   const [pending, setPending] = useState(false);
@@ -34,7 +40,13 @@ export function MilestoneFundButton({ milestoneId }: { milestoneId: string }) {
 
   return (
     <div className="mt-4">
-      <Button size="sm" variant="outline" onClick={handleFund} disabled={pending || connecting}>
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={handleFund}
+        disabled={pending || connecting}
+        aria-label={milestoneName ? `Fund ${milestoneName}` : "Fund milestone"}
+      >
         {pending || connecting ? "Confirming in wallet..." : "Fund milestone"}
       </Button>
       {error && <p className="mt-2 text-xs text-rose-600">{error}</p>}
@@ -42,7 +54,13 @@ export function MilestoneFundButton({ milestoneId }: { milestoneId: string }) {
   );
 }
 
-export function PoolDepositButton({ poolId }: { poolId: string }) {
+export function PoolDepositButton({
+  poolId,
+  poolRepo,
+}: {
+  poolId: string;
+  poolRepo?: string;
+}) {
   const router = useRouter();
   const { address, connect, connecting } = useWallet();
   const [amount, setAmount] = useState("100");
@@ -79,7 +97,13 @@ export function PoolDepositButton({ poolId }: { poolId: string }) {
         onChange={(e) => setAmount(e.target.value)}
         className="w-24 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-900 focus:border-indigo-400 focus:outline-none dark:border-slate-800 dark:bg-slate-900 dark:text-white"
       />
-      <Button size="sm" variant="outline" onClick={handleDeposit} disabled={pending || connecting}>
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={handleDeposit}
+        disabled={pending || connecting}
+        aria-label={poolRepo ? `Deposit to ${poolRepo} pool` : "Deposit"}
+      >
         {pending || connecting ? "Confirming..." : "Deposit"}
       </Button>
       {error && <p className="text-xs text-rose-600">{error}</p>}
diff --git a/src/app/milestones/page.tsx b/src/app/milestones/page.tsx
index 16cf0af..0cfd1da 100644
--- a/src/app/milestones/page.tsx
+++ b/src/app/milestones/page.tsx
@@ -25,6 +25,7 @@ export default async function MilestonesPage() {
         each one resolves.
       </p>
 
+      <h2 className="sr-only">Active milestones</h2>
       <div className="mt-8 grid gap-4 md:grid-cols-2">
         {milestones.map((m) => {
           const pct = m.distributed / m.budget;
@@ -51,7 +52,7 @@ export default async function MilestonesPage() {
               <p className="mt-2 text-xs text-slate-400 dark:text-slate-500">
                 {m.completedCount} of {m.issueCount} issues complete
               </p>
-              <MilestoneFundButton milestoneId={m.id} />
+              <MilestoneFundButton milestoneId={m.id} milestoneName={m.name} />
             </div>
           );
         })}
@@ -77,7 +78,7 @@ export default async function MilestonesPage() {
             <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
               {formatCurrency(pool.monthlyDeposit, pool.asset)} deposited monthly
             </p>
-            <PoolDepositButton poolId={pool.id} />
+            <PoolDepositButton poolId={pool.id} poolRepo={pool.repo} />
           </div>
         ))}
       </div>