Automattic / Automattic/jetpack

Instant Search: make overlay/modal more accessible

Open
#17,554 0 comments 0 reactions 0 assignees View on GitHub
[Feature] Search Enhancement
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

#### Is your feature request related to a problem? Please describe.

We've done some good work already to make the overlay accessible - we move focus correctly, and return it to the initiating element when closing the overlay; and ESC closes the overlay.

We should go further and verify the overlay markup, and also prevent focus from leaving the overlay when it is open:

https://bitsofco.de/accessible-modal-dialog/

#### Describe the solution you'd like

Using the overlay should be easy using keyboard navigation or a screen reader.

Contributor guide

Open the contributing guide

Research direction

No file or test is named in the issue. Locate the Instant Search overlay entry point, then inspect its markup and existing focus behavior against the linked accessible modal guidance. Done means keyboard and screen-reader users can use the overlay, focus cannot leave it while open, and focus still returns correctly when it closes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
accessibility, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.