a11y: example-dashboard radiogroup lacks roving tabindex + arrow-key navigation
まだ誰も着手していません。
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 78/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 静か
- 技術スタック
- typescript
調査の方向性
src/ui/file-menu.ts の openExampleDashboardDialog から始め、radiogroup の動作を WAI-ARIA Authoring Practices の radiogroup の例と比較してください。Tab で移動可能にする行は checked の行または最初の行だけにし、他の行は tabindex="-1" のままにして、矢印キーによるナビゲーションで行間のフォーカスと選択の両方が移動することを確認してください。
索引モデルが issue の本文から書いたものです。
説明
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.
- 主要言語
- TypeScript
- スター
- 8
- フォーク
- 2
- 平均マージ
- 1時間 34分
- マージ済み PR(30日)
- 6
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
Altinity/altinity-sql-browser のほかの issue
-
inbox
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
Altinity/altinity-sql-browser#605 ·
-
inbox
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
Altinity/altinity-sql-browser#489 ·
-
flamegraph オープンenhancement
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
Altinity/altinity-sql-browser#684 ·
-
bug
難易度 4/5 3〜5日 初心者へのやさしさ 68/100
Altinity/altinity-sql-browser#680 · コメント 2 件 ·
-
inbox
難易度 5/5 1週間以上 初心者へのやさしさ 35/100
Altinity/altinity-sql-browser#673 ·
Altinity/altinity-sql-browser の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
-
bug v2
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
modelcontextprotocol/inspector#2458 · コメント 1 件 ·
-
難易度 1/5 1時間未満 初心者へのやさしさ 75/100
railmapgen/rmp-gallery#4068 ·
-
Mend: dependency security vulnerability status: needs triage 🕵️♀️
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
carbon-design-system/ibm-products#9907 ·