src/app/milestones/MilestoneActions.tsx#MilestoneFundButton and #PoolDepositButton
both render a plain, generically-labeled button per instance:
<Button size="sm" variant="outline" onClick={handleFund} disabled={pending || connecting}>
{pending || connecting ? "Confirming in wallet..." : "Fund milestone"}
</Button>
...
<Button size="sm" variant="outline" onClick={handleDeposit} disabled={pending || connecting}>
{pending || connecting ? "Confirming..." : "Deposit"}
</Button>
Neither has an aria-label incorporating which milestone or pool it applies to.
src/app/milestones/page.tsx renders one of each per milestone/pool — with several
milestones and pools on the page (per the mock data, at least two of each), a screen
reader user navigating by control (a common assistive-technology pattern — e.g. NVDA's
"list all buttons" or VoiceOver's rotor) hears "Fund milestone, button" and "Deposit,
button" repeated identically for every card, with no way to distinguish which milestone
or pool a given instance belongs to without first navigating through the surrounding,
unassociated heading text.
Suggested fix: pass the milestone name / pool repo into each button's accessible name,
e.g. aria-label={Fund ${milestoneName}} / aria-label={Deposit to ${poolRepo} pool},
so each control is independently identifiable out of context.
src/app/milestones/MilestoneActions.tsx#MilestoneFundButtonand#PoolDepositButtonboth render a plain, generically-labeled button per instance:
Neither has an
aria-labelincorporating which milestone or pool it applies to.src/app/milestones/page.tsxrenders one of each per milestone/pool — with severalmilestones and pools on the page (per the mock data, at least two of each), a screen
reader user navigating by control (a common assistive-technology pattern — e.g. NVDA's
"list all buttons" or VoiceOver's rotor) hears "Fund milestone, button" and "Deposit,
button" repeated identically for every card, with no way to distinguish which milestone
or pool a given instance belongs to without first navigating through the surrounding,
unassociated heading text.
Suggested fix: pass the milestone name / pool repo into each button's accessible name,
e.g.
aria-label={Fund ${milestoneName}}/aria-label={Deposit to ${poolRepo} pool},so each control is independently identifiable out of context.