a11y: example-dashboard radiogroup lacks roving tabindex + arrow-key navigation
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 78/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Quiet
- Tech stack
- typescript
- Domain
- accessibility, frontend
Research direction
Start in src/ui/file-menu.ts at openExampleDashboardDialog and compare the radiogroup behavior with the WAI-ARIA Authoring Practices radiogroup example. Make only the checked or first row tabbable, keep other rows at tabindex="-1", and ensure arrow-key navigation moves both focus and selection between rows.
Written by the indexing model from the issue text.
Description
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.
- Dominant language
- TypeScript
- Stars
- 8
- Forks
- 2
- Avg merge
- 1h 34m
- Merged PRs (30d)
- 6
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from Altinity/altinity-sql-browser
-
inbox
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
Altinity/altinity-sql-browser#605 ·
-
inbox
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Altinity/altinity-sql-browser#489 ·
-
flamegraph Openenhancement
Difficulty 5/5 Over a week Newbie friendliness 25/100
Altinity/altinity-sql-browser#684 ·
-
bug
Difficulty 4/5 3-5 days Newbie friendliness 68/100
Altinity/altinity-sql-browser#680 · 2 comments ·
-
inbox
Difficulty 5/5 Over a week Newbie friendliness 35/100
Altinity/altinity-sql-browser#673 ·
All issues in Altinity/altinity-sql-browser
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
bug v2
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
modelcontextprotocol/inspector#2458 · 1 comment ·
-
Difficulty 1/5 Under an hour Newbie friendliness 75/100
railmapgen/rmp-gallery#4068 ·
-
Mend: dependency security vulnerability status: needs triage 🕵️♀️
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
carbon-design-system/ibm-products#9907 ·