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

[Newcomers] Role options on step 2 can't be used from the keyboard; radio groups reference a missing label id

Aperta Adatta ai principianti
  • Qualcosa non va?
#8,228 6 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

@ayushgade06 ci sta già lavorando.

Dal 26/10/2026.

  • #8244 di @ayushgade06 — aperta

Valutazione

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

Direzione di ricerca

L’issue indica il modulo per i membri della community su layer5.io/newcomers, compresi il gruppo delle taglie delle T-shirt al passaggio 1, le opzioni di ruolo al passaggio 2 e il gruppo relativo all’interesse a contribuire al passaggio 3. Inizia individuando il componente del modulo e le righe indicate 163 e 526. Verifica che ogni ruolo sia raggiungibile e selezionabile tramite tastiera e che le domande dei gruppi di pulsanti radio vengano annunciate; il lavoro è completato quando tutti e tre i problemi di accessibilità segnalati sono risolti.

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

Descrizione

framework/gatsby help wanted kind/bug
Description

On layer5.io/newcomers, parts of the community member form can't be used from the keyboard, and screen readers don't announce them properly.

1. The role choice on step 2 only works with a mouse
"Which describes your main focus as a community member?" has four options: Contributor, User, User and Contributor, and Bystander. Each one is a plain <div onClick>:

  • You can't Tab to them or pick one with Enter or Space, so keyboard-only users can't get past this step.
  • Screen readers announce them as plain text, without saying they're options or which one is selected (selection is shown only by the active CSS class).

2. The radio groups point at a label id that doesn't exist (lines 163 and 526)
The T-shirt size group (step 1) and the "would you like to speak or write about your works" group (step 3) both use aria-labelledby="my-radio-group", but no element has id="my-radio-group" (it was copied from Formik's example code). Screen readers read the options ("XS, S, M…", "Yes, Eventually…") without the question.
The question labels also use htmlFor="tshirtSize" and htmlFor="interestToShareContribution", and no element has those ids, so the labels aren't connected to anything.

Expected Behavior
  • You can Tab to every role option and pick it with Enter or Space. Screen readers announce each option as a button and say whether it's selected.
  • Screen readers read each radio group's question when you move into the group.
Screenshots
Image Image Image
Environment:
  • Host OS: Windows 11
  • Browser: Brave
Lingua principale
JavaScript
Stelle
1.1k
Fork
1.7k
Merge medio
6g 23h
PR unite (30g)
21

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 layer5io/layer5

Tutte le issue di layer5io/layer5

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.