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

Form labels are not linked to their inputs on the login, signup and join screens

Chiusa Adatta ai principianti
  • Qualcosa non va?
#190 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Una pull request collegata è già stata integrata.

  • #198 di @padurets — integrata

Valutazione

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

Direzione di ricerca

Leggi apps/frontend/src/screens/JoinQuiz.tsx, Login.tsx e Signup.tsx alle righe indicate per etichette e campi di input; l’issue include un esempio dell’associazione richiesta. Usa gli esempi di accessibilità in components/ai/GenerateQuizTab.tsx e screens/LiveQuiz.tsx come riferimento di stile. Il lavoro è completato quando tutti e otto i campi di input hanno nomi accessibili indipendenti dai segnaposto e facendo clic su ciascuna etichetta si porta il focus sul relativo campo di input.

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

Descrizione

good first issue help wanted UI & UX

The auth and join screens render labels as plain siblings of their inputs, with no htmlFor / id pairing:

// apps/frontend/src/screens/JoinQuiz.tsx:104
<label className="block text-md font-bold uppercase ...">Game PIN</label>
<input
    type="text"
    value={code}
    onChange={e => setCode(normalizeJoinCode(e.target.value))}
    placeholder="e.g. XY3F12"
    required
/>

There is no htmlFor anywhere in the codebase — grep -rn "htmlFor" apps/frontend/src returns nothing.

Affected inputs (8 across 3 files):

  • screens/JoinQuiz.tsx — lines 104, 116 (Game PIN, Nickname)
  • screens/Login.tsx — lines 96, 111 (email, password)
  • screens/Signup.tsx — lines 115, 128, 143 (name, email, password)
Why it matters

Two concrete consequences:

  • A screen reader announces only the placeholder, so "Game PIN" is never read as the field's name. Placeholders also vanish once typing starts, so there is nothing left identifying the field.
  • Clicking the label text does not focus the input. That is standard behaviour everywhere else on the web, and its absence is a small constant friction — especially on a phone, where the label is a bigger tap target than the box.

The join screen is the first thing a participant touches, often in a hurry on a phone in a room.

What a fix looks like

Give each input an id and point the label at it:

<label htmlFor="join-code" className="...">Game PIN</label>
<input id="join-code" ... />

Wrapping the input inside the <label> also works and needs no ids — either is fine, but pick one and use it consistently across the three files.

There are good examples already in the repo

This is a gap in the auth screens specifically, not a general problem. components/ai/GenerateQuizTab.tsx and screens/LiveQuiz.tsx already use aria-label, role="status" and aria-pressed carefully — worth reading those first for the house style.

Definition of done
  • Clicking any label focuses its input
  • Each input has an accessible name that does not depend on the placeholder
  • All 8 inputs across the three files are covered

Good first issue: mechanical, easy to check by hand (click each label), and it makes the app usable with a screen reader on the screens everyone passes through.

Lingua principale
TypeScript
Stelle
21
Fork
7
Merge medio
4h 31m
PR unite (30g)
22

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 TheCodeHeist-Coder/Rexial

Tutte le issue di TheCodeHeist-Coder/Rexial

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.