mi6 / mi6/ic-ui-kit

Search bar loses focus when Escape key is pressed while focused on its options

Open
#4,446 0 comments 0 reactions 0 assignees View on GitHub
a11y search-bar component
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.