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

Đang mở Phù hợp với người mới
#509 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu trong src/ui/file-menu.ts tại openExampleDashboardDialog và so sánh hành vi của radiogroup với ví dụ radiogroup trong WAI-ARIA Authoring Practices. Chỉ cho phép dòng đã được chọn hoặc dòng đầu tiên nhận tiêu điểm bằng Tab, giữ các dòng khác ở tabindex="-1" và đảm bảo thao tác điều hướng bằng phím mũi tên di chuyển cả tiêu điểm lẫn lựa chọn giữa các dòng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

inbox

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.

Ngôn ngữ chính
TypeScript
Star
8
Fork
2
Merge trung bình
1 giờ 34 phút
Pull request đã merge (30 ngày)
6

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của Altinity/altinity-sql-browser

Tất cả issue của Altinity/altinity-sql-browser

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.