Keep keyboard focus inside open dialogs

Open Beginner friendly
  • Is something wrong?
#62 2 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@100rabheimer is already working on this.

Since Oct 22, 2026.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, react
Domain
accessibility, frontend

Research direction

Start with the Modal component at the top of client/src/pages/Tasks.jsx and inspect its existing Esc key handler and how the New, Edit, and Delete dialogs render their controls. Use the keyboard steps in the issue to check focus on open, Tab and Shift+Tab cycling, and focus return after each close path. Done means all acceptance criteria pass without adding dependencies.

Written by the indexing model from the issue text.

Description

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.

Dominant language
JavaScript
Stars
3
Forks
2
Avg merge
13h 11m
Merged PRs (30d)
43

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from KEX-03/taskflow

All issues in KEX-03/taskflow

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.