Why it matters
components/ui/Pagination.tsx renders a row of page links but gives a screen reader no way to know what the row is or which page is currently active. Every page number reads out as an identical bare link, and the "Prev"/"Next" placeholders at the ends of the range are rendered as plain <span> elements with opacity-40, which is a purely visual cue.
What to change
In components/ui/Pagination.tsx:
- Wrap the outer
<div className="mt-6 flex ..."> in a <nav aria-label="Pagination"> (or change the div to a nav).
- Add
aria-current="page" to the <Link> for the page where p === currentPage.
- Give each page link an accessible name, e.g.
aria-label={\Page ${p}`}`.
- Mark the
… spans aria-hidden="true" so they are not announced as content.
- Add
aria-disabled="true" to the disabled Prev/Next <span> elements.
Notes
- The existing
DamageLevel.tsx and VoteButtons.tsx components are good in-repo examples of the labelling style used here.
- No visual change should result. Run
npm run format before opening the PR.
Questions are very welcome. Comment here to claim it and ask anything you are unsure about, you will usually get a reply within a day.
Why it matters
components/ui/Pagination.tsxrenders a row of page links but gives a screen reader no way to know what the row is or which page is currently active. Every page number reads out as an identical bare link, and the "Prev"/"Next" placeholders at the ends of the range are rendered as plain<span>elements withopacity-40, which is a purely visual cue.What to change
In
components/ui/Pagination.tsx:<div className="mt-6 flex ...">in a<nav aria-label="Pagination">(or change thedivto anav).aria-current="page"to the<Link>for the page wherep === currentPage.aria-label={\Page ${p}`}`.…spansaria-hidden="true"so they are not announced as content.aria-disabled="true"to the disabled Prev/Next<span>elements.Notes
DamageLevel.tsxandVoteButtons.tsxcomponents are good in-repo examples of the labelling style used here.npm run formatbefore opening the PR.Questions are very welcome. Comment here to claim it and ask anything you are unsure about, you will usually get a reply within a day.