From 24ceddc7cc9b72c9a7ea4c4aeacddf99dabac70e Mon Sep 17 00:00:00 2001
From: xpoes123 <logiccubing@gmail.com>
Date: Mon, 29 Jun 2026 23:47:00 -0400
Subject: [PATCH] a11y: make db download and jump links keyboard-operable

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/db/index.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/db/index.jsx b/client/db/index.jsx
index 4f7d742b4..bd14c2134 100644
--- a/client/db/index.jsx
+++ b/client/db/index.jsx
@@ -371,9 +371,9 @@ function QueryForm () {
             </div>
             <div className='float-end'>
               <b>Download this page:</b>
-              <a className='ms-2 clickable' onClick={() => { downloadQuestionsAsText({ tossups, bonuses }); }}>TXT</a>
-              <a className='ms-2 clickable' onClick={() => { downloadTossupsAsCSV(tossups); downloadBonusesAsCSV(bonuses); }}>CSV</a>
-              <a className='ms-2 clickable' onClick={() => { downloadQuestionsAsJSON(tossups, bonuses); }}>JSON</a>
+              <a className='ms-2 clickable' role='button' tabIndex={0} onClick={() => { downloadQuestionsAsText({ tossups, bonuses }); }} onKeyDown={event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); downloadQuestionsAsText({ tossups, bonuses }); } }}>TXT</a>
+              <a className='ms-2 clickable' role='button' tabIndex={0} onClick={() => { downloadTossupsAsCSV(tossups); downloadBonusesAsCSV(bonuses); }} onKeyDown={event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); downloadTossupsAsCSV(tossups); downloadBonusesAsCSV(bonuses); } }}>CSV</a>
+              <a className='ms-2 clickable' role='button' tabIndex={0} onClick={() => { downloadQuestionsAsJSON(tossups, bonuses); }} onKeyDown={event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); downloadQuestionsAsJSON(tossups, bonuses); } }}>JSON</a>
             </div>
           </div>
         </div>
@@ -388,7 +388,7 @@ function QueryForm () {
           ? <div className='float-row mb-3'>
             <span className='text-muted float-start'>Showing {tossups.length} of {tossupCount} results ({queryTime} seconds)</span>&nbsp;
             <span className='text-muted float-end'>
-              <a className='clickable' onClick={() => window.scrollTo({ top: document.getElementById('bonuses').offsetTop, behavior: 'smooth' })}>
+              <a className='clickable' role='button' tabIndex={0} onClick={() => window.scrollTo({ top: document.getElementById('bonuses').offsetTop, behavior: 'smooth' })} onKeyDown={event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.scrollTo({ top: document.getElementById('bonuses').offsetTop, behavior: 'smooth' }); } }}>
                 Jump to bonuses
               </a>
             </span>
@@ -447,7 +447,7 @@ function QueryForm () {
           ? <div className='float-row mb-3'>
             <span className='text-muted float-start'>Showing {bonuses.length} of {bonusCount} results ({queryTime} seconds)</span>&nbsp;
             <span className='text-muted float-end'>
-              <a className='clickable' onClick={() => window.scrollTo({ top: document.getElementById('tossups').offsetTop, behavior: 'smooth' })}>
+              <a className='clickable' role='button' tabIndex={0} onClick={() => window.scrollTo({ top: document.getElementById('tossups').offsetTop, behavior: 'smooth' })} onKeyDown={event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.scrollTo({ top: document.getElementById('tossups').offsetTop, behavior: 'smooth' }); } }}>
                 Jump to tossups
               </a>
             </span>