Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン 初心者向け
#509 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
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 の本文から書いたものです。

説明

inbox

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.

主要言語
TypeScript
スター
8
フォーク
2
平均マージ
1時間 34分
マージ済み PR(30日)
6

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

Altinity/altinity-sql-browser のほかの issue

Altinity/altinity-sql-browser の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。