a11y: example-dashboard radiogroup lacks roving tabindex + arrow-key navigation
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Aptitud para principiantes
- 78/100
- Tipo de issue
- Error
- Claridad
- Bien especificado
- Estado de actividad
- Tranquilo
- Stack tecnológico
- typescript
- Área
- accessibility, frontend
Línea de trabajo
Empieza en src/ui/file-menu.ts, en openExampleDashboardDialog, y compara el comportamiento del radiogroup con el ejemplo de radiogroup de WAI-ARIA Authoring Practices. Haz que solo la fila marcada o la primera pueda recibir el foco mediante Tab, mantén las demás filas en tabindex="-1" y asegúrate de que la navegación con las teclas de flecha mueva tanto el foco como la selección entre las filas.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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.
- Lenguaje dominante
- TypeScript
- Estrellas
- 8
- Forks
- 2
- Merge medio
- 1 h 34 min
- PR fusionados (30 d)
- 6
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de Altinity/altinity-sql-browser
-
inbox
Dificultad 2/5 1-3 horas Aptitud para principiantes 76/100
Altinity/altinity-sql-browser#605 ·
-
inbox
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Altinity/altinity-sql-browser#489 ·
-
flamegraph Abiertoenhancement
Dificultad 5/5 Más de una semana Aptitud para principiantes 25/100
Altinity/altinity-sql-browser#684 ·
-
bug
Dificultad 4/5 3-5 días Aptitud para principiantes 68/100
Altinity/altinity-sql-browser#680 · 2 comentarios ·
-
inbox
Dificultad 5/5 Más de una semana Aptitud para principiantes 35/100
Altinity/altinity-sql-browser#673 ·
Todos los issues de Altinity/altinity-sql-browser
Issues similares
-
VerificationGate: ATTRIBUTION quote guard never matches a normal quotation (\b around the quote) Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
danielmiessler/LifeOS#2234 ·
-
T: Bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
-
Dificultad 1/5 Menos de una hora Aptitud para principiantes 85/100
-
Mend: dependency security vulnerability untriaged
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100