Skip to content

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

Open
xpoes123 wants to merge 1 commit into
qbreader:mainfrom
xpoes123:a11y/pagination-aria-current
Open

a11y: add aria-current to active db-explorer pagination links#529
xpoes123 wants to merge 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
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.

1 participant