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

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

クローズ
#156 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

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

評価

難易度
4/5
見積もり時間
1〜2日
初心者へのやさしさ
57/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
javascript

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
JavaScript
スター
58
フォーク
15
平均マージ
16時間 53分
マージ済み PR(30日)
14

環境構築

はじめの一歩

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

TMHSDigital/Free-Game-Dev-Assets のほかの issue

TMHSDigital/Free-Game-Dev-Assets の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

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

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