Current state
In ui/sections/post-pagination.tsx, the "Older" and "Newer" direction labels are wrapped in <span aria-hidden="true"> (line 53). The accessible name of each pagination link resolves to only the post title, with no navigational direction included. A screen reader user hearing "React performance patterns" as a link label cannot determine whether that link navigates to an older or newer post without additional context outside the link.
Ideal state
- Each pagination link's accessible name includes its navigational direction, e.g. "Newer: React performance patterns" or "Older: React performance patterns".
- Sighted users continue to see the "Older"/"Newer" label displayed visually alongside the post title card.
Out of scope
- Changing the visual layout of the pagination cards.
Starting points
ui/sections/post-pagination.tsx line 53: <span ... aria-hidden="true">{directionText}</span> — where directionText is "Older" or "Newer"ui/sections/post-pagination.tsx — the full component showing how the <a> element wraps the Card to form the accessible name
QA plan
- Navigate to any blog post that has both an older and a newer post.
- Use a screen reader (or inspect the accessibility tree in browser devtools — Chrome: Accessibility tab, Firefox: Accessibility panel) to read the pagination links.
- Expect each link to announce its direction alongside the title, e.g. "Newer: [post title], link".
- Confirm the "Older"/"Newer" text is still visible to sighted users in the rendered UI.
Done when
Each pagination link's accessible name includes the navigational direction so that screen reader users can distinguish older-post from newer-post links.
Current state
In
ui/sections/post-pagination.tsx, the "Older" and "Newer" direction labels are wrapped in<span aria-hidden="true">(line 53). The accessible name of each pagination link resolves to only the post title, with no navigational direction included. A screen reader user hearing "React performance patterns" as a link label cannot determine whether that link navigates to an older or newer post without additional context outside the link.Ideal state
Out of scope
Starting points
ui/sections/post-pagination.tsxline 53:<span ... aria-hidden="true">{directionText}</span>— wheredirectionTextis "Older" or "Newer"ui/sections/post-pagination.tsx— the full component showing how the<a>element wraps theCardto form the accessible nameQA plan
Done when
Each pagination link's accessible name includes the navigational direction so that screen reader users can distinguish older-post from newer-post links.