Skip to content

a11y: add aria-current to active db-explorer pagination links#529

Merged
geoffrey-wu merged 1 commit into
qbreader:mainfrom
xpoes123:a11y/pagination-aria-current
Jul 18, 2026
Merged

a11y: add aria-current to active db-explorer pagination links#529
geoffrey-wu merged 1 commit into
qbreader:mainfrom
xpoes123:a11y/pagination-aria-current

Conversation

@xpoes123

@xpoes123 xpoes123 commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

The tossup and bonus pagination in client/db/index.jsx was inaccessible to screen readers: the active page had no semantic marker, so assistive technologies announced all page links identically with no way to distinguish the current one.

Problem

In both the tossup and bonus pagination loops, the active page link was identified only by a CSS class:

<a className={`page-link ${isActive && 'active'}`} href='#' ...>

Two issues:

  1. No aria-current attribute — screen readers cannot identify the current page.
  2. isActive && 'active' evaluates to the boolean false (not an empty string) when inactive, injecting the literal text "false" into the className string.

Changes

  • Adds aria-current={isActive ? 'page' : undefined} to the active page <a> in both the tossup (line 421) and bonus (line 480) pagination loops.
  • Fixes the class expression to ${isActive ? 'active' : ''} to eliminate the spurious "false" class name.

Risk & testing

Two-line mechanical change per pagination component. The visual rendering is identical for sighted users; only the DOM attribute and class string differ. semistandard and node --check pass.

@xpoes123 xpoes123 changed the title a11y: add aria-current to active pagination page a11y: add aria-current to active db-explorer pagination links Jun 30, 2026
@geoffrey-wu
geoffrey-wu merged commit 0cf6d08 into qbreader:main Jul 18, 2026
1 check passed
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.

2 participants