Altinity / Altinity/altinity-sql-browser
a11y: example-dashboard radiogroup lacks roving tabindex + arrow-key navigation
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 8
- Fork
- 2
- Merge medio
- 1h 34m
- PR unite (30g)
- 6
Descrizione
Where
src/ui/file-menu.ts — openExampleDashboardDialog (the "Import example dashboard…" picker added in #506).
What
The example-dashboard picker uses role="radio" rows inside a role="radiogroup" — the first use of that ARIA pattern in this codebase. Per the WAI-ARIA Authoring Practices, a radiogroup is expected to support:
- roving tabindex — only the checked (or first) radio is a Tab stop; the rest are
tabindex="-1" - arrow-key navigation (Up/Down or Left/Right) that both moves focus AND changes the selection between radios
Currently every row is a plain <button>, each independently Tab-stoppable, with no arrow-key handling. Functionally it still works today — Tab reaches each row in DOM order, Enter/Space activates it — so this isn't broken, just a deviation from the interaction model a screen-reader user would expect from the radio/radiogroup roles it advertises.
Why deferred
Out of scope for #506, which only requires "a single-select list… Import disabled until selected" — not full ARIA-pattern conformance. Flagged by an independent review pass during #506's implementation (PR TBD) as non-blocking.
Suggested fix
Add roving tabindex (tabindex="0" on the checked/first row, "-1" elsewhere) and an ArrowUp/ArrowDown (or Left/Right) handler on the radiogroup container that moves focus + selection together, matching the standard APG radiogroup example.
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia in src/ui/file-menu.ts, all’interno di openExampleDashboardDialog, e confronta il comportamento del radiogroup con l’esempio di radiogroup delle WAI-ARIA Authoring Practices. Rendi raggiungibile tramite Tab solo la riga selezionata o la prima, mantieni le altre righe con tabindex="-1" e assicurati che la navigazione con i tasti freccia sposti sia il focus sia la selezione tra le righe.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- typescript
- Ambito
- accessibility, frontend
- Tipo di issue
- Bug
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Stato di attività
- Tranquilla
- Chiarezza
- Specificata chiaramente
- Idoneità per principianti
- 78/100