Search bar loses focus when Escape key is pressed while focused on its options
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
### Summary of the bug
When you focus on a search bar and then focus on its dropdown menu, pressing Escape causes the focus to be lost completely; it should move back to the input box.
### 🪜 How to reproduce
1. Go to the ICDS website and focus on the search bar.
2. Type in some characters and then press the Down arrow key to move the focus to the dropdown menu.
3. Press the Escape key and see that the focus is lost completely; the focus indicator is not visible at all anywhere.
If I use a screen reader, the focus just moves back to the whole tab, i.e. it says "Home - Intelligence Community Design System".
### 📸 Screenshots or code
https://github.com/user-attachments/assets/8ca25fa0-8bbe-4c99-9f18-603f76058951
### 🧐 Expected behaviour
The focus should move back to the input box (just like what happens with the select component).
### 🚨 Urgency (low, medium or high)
Probably high urgency as it's an accessibility issue
Contributor guide
Research direction
Reproduce the issue on the ICDS website by moving from the search input to its dropdown with Down, then pressing Escape; compare this with the select component's focus behavior. Locate the search bar implementation and make the Escape path return focus to the input box, then verify that the focus indicator is visible and screen-reader focus is no longer on the page.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100