Skip to content

fix(a11y): fix heading hierarchy skips and add descriptive button aria-labels (#280, #281, #282) #290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ghzhost wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(a11y): fix heading hierarchy skips and add descriptive button aria-labels (#280, #281, #282) #290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/app/issues/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export default async function IssuesPage() {
moment it'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} />
Expand Down
32 changes: 28 additions & 4 deletions src/app/milestones/MilestoneActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -34,15 +40,27 @@ 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>}
</div>
);
}

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");
Expand Down Expand Up @@ -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>}
Expand Down
5 changes: 3 additions & 2 deletions src/app/milestones/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
);
})}
Expand All @@ -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>
Expand Down