The accessibility of keyboard navigation of the search bar can be improved

[bick-jp]

(Not sure if I should report this as a bug. If not, I'll repost this with the more appropriate type of issue.) The accessibility of keyboard navigation of the search bar can be improved.

1. Currently, the auto-suggested list in the search bar is navigated with the tab key. But it should be navigated via arrow keys. And when the tab key is pressed, the focus should move to the next navigation bar item instead of going into the auto-suggested list.

2. Currently, the auto-suggested list keeps appearing on the screen even after the focus moves out from the search bar. It should disappear when the focus is not on the search bar or on the items of the auto-suggested list.

Evidence / Screenshot (if possible)

When I input the search word, "design" in this case, it automatically shows suggestions.

When I press the tab key, the focus moves to the search icon.

Pressing the tab key again, the focus moves to the barcode-ish icon.

Then, the problem is that pressing the tab key again moves the focus to the suggested list.

After focusing on all the items in the suggested list, the focus finally moves to the next focusable nev bar item, which is the user icon and hamburger menu in this case.

Also, another problem is that the suggested list keeps appearing, even after the focus is off from the search bar (in this case, the focus is on "Books").

Relevant url?

https://openlibrary.org/search?q=design&mode=printdisabled&has_fulltext=true&subject_facet=Protected+DAISY

Steps to Reproduce

1. Go to https://openlibrary.org/search?q=design&mode=printdisabled&has_fulltext=true&subject_facet=Protected+DAISY
2. Input any words in the search bar, and navigate the page with the tab key.

• Actual: Explained as above.
• Expected: Auto-suggested list should be navigated using arrow keys. Pressing the tab key should navigate the focus through the nav bar elements instead of the inside of the auto-suggested list. The list should disappear when the focus moves out from the suggested list. When the focus is on the list, users should be able to escape fromit by pressing the Esc key, which I think is a suggested accessible behavior.

Details

• Logged in (Y/N)? Y
• Browser type/version? Chrome Version 113.0.5672.126 (Official Build) (arm64)
• Operating system? macOS Monterey Version 12.3.1
• Environment (prod/dev/local)? prod

Proposal & Constraints

Search bar keyboard navigation in Google Scholar and GitHub might be good examples.

Related files

Stakeholders

[karlitto01]

Hi @cdrini. I would like to work on this issue, if possible. Thanks.

[RayBB]

@karlitto01 are you still interested in working on this one?

[schu96]

@RayBB Can you assign me to this issue?

[RayBB]

@schu96 you're assigned. Good luck!