Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#655 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
1/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
playwright, react, typescript
Ambito
accessibility, frontend, testing

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
19
Fork
4
Merge medio
20h 9m
PR unite (30g)
156

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di richshaw/OpenSignup

Tutte le issue di richshaw/OpenSignup

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.