Altinity / Altinity/altinity-sql-browser

a11y: example-dashboard radiogroup lacks roving tabindex + arrow-key navigation

Offen Anfängerfreundlich
#509 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

inbox
Vorherrschende Sprache
TypeScript
Sterne
8
Forks
2
Ø Merge
1 Std. 34 Min.
Gemergte PRs (30 T.)
6

Beschreibung

Where

src/ui/file-menu.tsopenExampleDashboardDialog (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

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Ö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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.