Altinity / Altinity/altinity-sql-browser
a11y: example-dashboard radiogroup lacks roving tabindex + arrow-key navigation
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 8
- Forks
- 2
- Ø Merge
- 1 Std. 34 Min.
- Gemergte PRs (30 T.)
- 6
Beschreibung
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.
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne in src/ui/file-menu.ts bei openExampleDashboardDialog und vergleiche das Verhalten der radiogroup mit dem radiogroup-Beispiel der WAI-ARIA Authoring Practices. Mache nur die ausgewählte oder die erste Zeile per Tab fokussierbar, lasse die anderen Zeilen bei tabindex="-1", und stelle sicher, dass die Navigation mit den Pfeiltasten sowohl den Fokus als auch die Auswahl zwischen den Zeilen verschiebt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- typescript
- Bereich
- accessibility, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Ruhig
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 78/100