Skip to content

a11y: make database action links keyboard-operable#543

Open
xpoes123 wants to merge 1 commit into
qbreader:mainfrom
xpoes123:a11y/db-action-links-keyboard
Open

a11y: make database action links keyboard-operable#543
xpoes123 wants to merge 1 commit into
qbreader:mainfrom
xpoes123:a11y/db-action-links-keyboard

Conversation

@xpoes123

@xpoes123 xpoes123 commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

The download (TXT / CSV / JSON) and section-jump links in client/db/index.jsx were <a> elements without an href, so they were invisible to keyboard navigation. This PR makes all five interactive without changing their appearance or click behavior.

Problem

In client/db/index.jsx, five <a class="... clickable"> elements relied solely on onClick handlers with no href. Anchor elements without href are excluded from the tab order, so keyboard users could not download results or jump between the tossup and bonus sections.

Changes

  • Adds role="button", tabIndex={0}, and an onKeyDown handler (activating on Enter and Space) to each of the five affected links: the TXT, CSV, and JSON download links and the "Jump to bonuses" / "Jump to tossups" scroll links.
  • Existing onClick handlers and the clickable CSS class are preserved as-is; visual appearance is unchanged.

Risk & testing

The change is purely additive — no existing logic is altered. The onKeyDown guard checks event.key === 'Enter' || event.key === ' ' and calls event.preventDefault() before the action to avoid page-scroll on Space. semistandard and node --check pass.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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