Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

a11y: shortlist drops focus to body on Clear and last Remove, and adding an item gives no in-view feedback

Đã đóng
  • Có gì không ổn?
#156 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

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

Đánh giá

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

Hướng nghiên cứu

Start with site/public/shortlist.js, especially lines 117 and 124, and inspect renderPanel() plus the existing polite live region and sticky controls. Reproduce Clear and last Remove to check focus, then add an item from a lower visible card to observe feedback and layout movement. Done means focus stays off body, additions announce and show the count in view, and adding causes no layout shift without scroll anchoring.

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

Mô tả

accessibility priority: medium

Why it matters

Keyboard and screen-reader users lose their place twice (focus lands on <body>), and every user who stars a card deep in the list gets no visible confirmation beyond the button label change, because the panel appears above the grid, often screens away. In browsers without scroll anchoring (WebKit) the list also jumps under the thumb.

Evidence (at 69387df, local build)

  • Click "Clear shortlist" -> document.activeElement === document.body. Add one, click "Remove" -> body. site/public/shortlist.js:117 focuses #shortlist, which renderPanel() has just set hidden; line 124 update([]) hides the panel containing the focused button.
  • Adding from the 4th visible card at 375 px: the panel is inserted about 360 px above the card with a height of 310 px; Chrome's scroll anchoring compensated, Safari has none. The only feedback is the button text "On shortlist".

Suggested approach

When the panel hides, focus #search or #result-count; announce "Added to shortlist (N)" / "Removed ..." through the existing polite live region; show a persistent "Shortlist (N)" control in the sticky controls (or on the floating to-top button) that scrolls to and focuses the panel. Rendering the panel as a one-line sticky summary under the controls would also remove the layout jump.

Done when

Focus never lands on <body> after a shortlist action; adding announces and shows a count in view; no layout shift in browsers without scroll anchoring.

Ngôn ngữ chính
JavaScript
Star
58
Fork
15
Merge trung bình
18 giờ 42 phút
Pull request đã merge (30 ngày)
11

Chuẩn bị môi trường

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 TMHSDigital/Free-Game-Dev-Assets

Tất cả issue của TMHSDigital/Free-Game-Dev-Assets

Issue tương tự

Thêm issue về JavaScript

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.