[A11y] Add Keyboard Escape Key Listener to Task Form Modal
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 7
- Avg merge
- 39m
- Merged PRs (30d)
- 39
Description
Target File
src/features/tasks/components/task-form-modal.tsx
Estimated Time
10-15 minutes
Difficulty
Level 2 (Beginner)
Why This Matters
Accessible modal dialogs must allow keyboard users to dismiss active overlays using the Escape key.
Current Behavior
task-form-modal.tsx can be closed via mouse click on backdrop or close button, but lacks a keydown listener for Escape.
Requested Change
Add a useEffect hook with a keydown listener checking for Escape key press.
Acceptance Criteria
- Pressing Esc key closes the modal overlay when active.
- Code passes TypeScript typecheck.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/features/tasks/components/task-form-modal.tsx and inspect how the modal currently closes from the backdrop and close button. Add the Escape-key listener described in the issue, then run the TypeScript typecheck. Done means pressing Escape closes the active modal overlay without type errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- Under an hour
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 92/100