Skip to content

fix(pagination): announce state to screen readers - #64

Open
waterlemonnn wants to merge 1 commit into
AgentPostmortem:mainfrom
waterlemonnn:fix/pagination-a11y
Open

fix(pagination): announce state to screen readers#64
waterlemonnn wants to merge 1 commit into
AgentPostmortem:mainfrom
waterlemonnn:fix/pagination-a11y

Conversation

@waterlemonnn

Copy link
Copy Markdown

Closes #18

components/ui/Pagination.tsx gave screen reader users no way to tell what the row was, which page was current, or that the Prev/Next placeholders were disabled (opacity-only visual cue).

  • Changed the outer div to <nav aria-label="Pagination">
  • Added aria-current="page" to the current page's <Link>
  • Added aria-label={\Page ${p}`}` to each page link
  • Marked the spans aria-hidden="true"
  • Added aria-disabled="true" to the disabled Prev/Next spans

No visual change. Ran npx prettier --write . (no-op), npm run lint, npx tsc --noEmit, and npx vitest run (87 passed) locally.

The pagination row had no landmark, page links all read the same,
and Prev/Next disabled states were opacity-only visual cues.
@github-actions

github-actions Bot commented Aug 7, 2026

Copy link
Copy Markdown

Welcome, @waterlemonnn, and thanks for your first pull request to agentpostmortem.

A quick look at CONTRIBUTING.md covers how things are set up and run here.

I'll review this shortly. Ask anything in the thread if something is unclear.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Pagination component is not announced correctly by screen readers

1 participant