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

Keep keyboard focus inside open dialogs

Abierto Apto para principiantes
  • ¿Algo no está bien?
#62 2 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@100rabheimer ya está trabajando en esto.

Desde el 22/10/2026.

Evaluación

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

Línea de trabajo

Empieza por el componente Modal al principio de client/src/pages/Tasks.jsx e inspecciona su controlador existente para la tecla Esc y cómo los diálogos New, Edit y Delete muestran sus controles. Usa los pasos de teclado del issue para comprobar el foco al abrir, el recorrido con Tab y Shift+Tab y la devolución del foco después de cada forma de cierre. Se considera terminado cuando se cumplen todos los criterios de aceptación sin añadir dependencias.

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

Descripción

difficulty: easy enhancement frontend good first issue hacktoberfest
Context

The New Task, Edit Task and Delete Task dialogs close with Esc (#45), but keyboard focus doesn't follow them. When a dialog opens, focus stays on the button behind it. Pressing Tab moves through the page behind the dialog. When it closes, focus is lost instead of going back to the button that opened it.

All three dialogs use the same Modal component, so the fix only needs to happen in one place.

Files likely involved
  • client/src/pages/Tasks.jsx (the Modal component at the top)
Acceptance criteria
  • When a dialog opens, focus moves into it: the first field for New/Edit, the Cancel button for Delete.
  • Tab and Shift+Tab cycle through the dialog's buttons and fields only, and never reach the page behind it.
  • When the dialog closes (×, Cancel, Esc, backdrop or saving), focus goes back to the element that opened it.
  • No new dependencies. A useRef and a keydown handler next to the existing Esc handler are enough.
How to test
  1. Using only the keyboard, Tab to New Task and press Enter: the cursor is in the Title field.
  2. Keep pressing Tab: focus cycles inside the dialog. Shift+Tab goes backwards.
  3. Press Esc: focus is back on New Task.
  4. Repeat with a task's Edit and Delete buttons.

New here? 👋 Good first issues are reserved for people making their first few open-source contributions. Comment below to ask to work on this issue, and wait to be assigned. Then follow CONTRIBUTING.md for setup and how to open a pull request. Questions are welcome in the comments or in Discussions.

Lenguaje dominante
JavaScript
Estrellas
3
Forks
2
Merge medio
10 h 33 min
PR fusionados (30 d)
41

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 KEX-03/taskflow

Todos los issues de KEX-03/taskflow

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.