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

The signup header's status message stays on the page after it's read out

オープン
  • 何か問題がありますか？
#655 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

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

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

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
1/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
playwright, react, typescript
領域
accessibility, frontend, testing

調査の方向性

This work has already merged as #648, so there is no remaining change to pick up. For context, read src/components/signup/HeaderAnnouncer.tsx and HeaderAnnouncer.test.tsx, then check the e2e references in organizer.spec.ts and help/create-and-publish-a-signup.spec.ts; the stated completion checks are that each message clears after five seconds and the listed checks pass.

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

説明

enhancement pipeline:proposed pipeline:ux

Needs your OK: this changes what screen-reader users meet when they read a signup's page after a status change. Swap pipeline:proposed for pipeline:ready to have it built.

What happens

  • The header has one hidden live region. It's in HeaderAnnouncer (src/components/signup/HeaderAnnouncer.tsx), a <p role="status" className="sr-only">. It says:
    • "Closed. People can’t sign up now." after Close signup on the page;
    • "Reopened. People can sign up again." after Reopen signup;
    • "Published. Anyone with the link can sign up now." from the share panel (ShareScope);
    • "Publish and share when you’re ready." from PublishButton, after a check's fix.
  • Nothing clears it. The last message stays in the region until the next one replaces it.
  • So it's read twice. A screen reader reads the message once as it arrives. Someone then reading the page line by line meets it again. In the UX walkthrough on #606, a keyboard tester reading line by line just after closing heard: "Signup closed. People can't sign up now. Everyone already signed up keeps their spot. … Closed. People can't sign up now." The region sits after the grey box on purpose, so the layout's spacing doesn't change.

Fix, in outline

  • Clear the region a few seconds after each message. After say(), start a timer that empties the region's text. A new message restarts the timer.
  • Keep the counter in the span's key, so the same words said twice are still a new node and are read again.
  • Clear the timer when the component unmounts.

Watch for

  • Tests that read the region:
    • In e2e, organizer.spec.ts checks "Closed. …" and "Reopened. …" with getByRole('status').filter({ hasText }). help/create-and-publish-a-signup.spec.ts checks "Publish and share when you’re ready.". They retry until the text shows, so they pass while it's there.
    • HeaderAnnouncer.test.tsx reads the region straight after the change. The new test needs fake timers.
  • Don't clear it too soon. A screen reader can still be reading the region after the change, so clearing within a second or so can cut a message short.
  • Next's route announcer (role="alert") fired at the same moment as "Reopened. …" once, on the Settings tab, in the walkthrough. Some screen readers may cut the polite message short. That's not part of this fix; note it if you see it again.
  • CHANGELOG: add a line under Unreleased › Changed.

Choices this makes

  • Clear it after 5 seconds. That's long enough for a screen reader to finish a one-line message, and short enough that someone reading on after a pause doesn't meet it again.
  • Clear every message, not only Close's and Reopen's. All four share the one region, and each can be met again in the same way.

Done when

  • After each of the four messages, the region holds it and is empty 5 seconds later. A unit test with fake timers pins this, including that a second message restarts the timer and that the same words said twice are still read twice.
  • The e2e checks above still pass.
  • pnpm lint && pnpm typecheck && pnpm knip && pnpm test pass.

From the UX walkthrough comment on #606 (https://github.com/richshaw/OpenSignup/pull/606#issuecomment-6402400080), the change merged as #648. Checked against HeaderAnnouncer.tsx, ShareScope.tsx and PublishButton.tsx on main at 1d4ff3a. https://claude.ai/code/session_01LrYa57fvbqWjZj89iH975K

主要言語
TypeScript
スター
19
フォーク
4
平均マージ
20時間 9分
マージ済み PR（30日）
156

環境構築

はじめの一歩

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

richshaw/OpenSignup のほかの issue

richshaw/OpenSignup の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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