Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#8,228 6 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 3 días

@ayushgade06 ya está trabajando en esto.

Desde el 26/10/2026.

  • #8244 de @ayushgade06 — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
82/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
javascript, react
Área
accessibility, frontend

Línea de trabajo

El issue señala el formulario para miembros de la comunidad en layer5.io/newcomers, incluidos el grupo de tallas de camiseta en el paso 1, las opciones de rol en el paso 2 y el grupo de interés en contribuir en el paso 3. Empieza por localizar el componente del formulario y las líneas indicadas 163 y 526. Comprueba que se pueda acceder a cada rol y seleccionarlo con el teclado, y que se anuncien las preguntas de los grupos de botones de opción; el trabajo estará terminado cuando se hayan resuelto los tres problemas de accesibilidad reportados.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
JavaScript
Estrellas
1.1k
Forks
1.7k
Merge medio
6 d 22 h
PR fusionados (30 d)
22

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de layer5io/layer5

Todos los issues de layer5io/layer5

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.