Keep keyboard focus inside open dialogs

Aperta Adatta ai principianti
  • Qualcosa non va?
#62 2 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@100rabheimer ci sta già lavorando.

Dal 22/10/2026.

Valutazione

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

Direzione di ricerca

Inizia dal componente Modal all’inizio di client/src/pages/Tasks.jsx ed esamina il gestore esistente del tasto Esc e il modo in cui le finestre di dialogo New, Edit e Delete mostrano i controlli. Usa i passaggi da tastiera nell’issue per verificare il focus all’apertura, il ciclo con Tab e Shift+Tab e il ripristino del focus dopo ogni modalità di chiusura. Il lavoro è completato quando tutti i criteri di accettazione sono soddisfatti senza aggiungere dipendenze.

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

Descrizione

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.

Lingua principale
JavaScript
Stelle
3
Fork
2
Merge medio
13h 11m
PR unite (30g)
43

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

Tutte le issue di KEX-03/taskflow

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.