[Accessibility]: Page looses focus after Search modal gets closed - Githubissues

facebook / docusaurus

Easy to maintain open source documentation websites.

https://docusaurus.io

MIT License

56.14k stars 8.43k forks source link

[Accessibility]: Page looses focus after Search modal gets closed #9917

Closed mxschmitt closed 7 months ago

mxschmitt commented 7 months ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[X] I have tried the npm run clear or yarn clear command.
[X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[X] I have tried creating a repro with https://new.docusaurus.io.
[X] I have read the console error message carefully (if applicable).

Description

When entering the Search dialog of docusaurus and leaving it afterwards via ESC, the page looses focus and does not re-focus the search input box from before.

Relates https://github.com/microsoft/playwright.dev/issues/1269.

Reproducible demo

No response

Steps to reproduce

Navigate to https://docusaurus.io/
Press Tab around 14 times, until the focus reaches the Search input box
Press Enter
Press ESC key

Expected behavior

Focus stays at the search input box.

Actual behavior

Focus gets lost.

Your environment

Public source code: N/A
Public site URL: N/A
Docusaurus version used: main
Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 122
Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 14.3

Self-service

[X] I'd be willing to fix this bug myself.

mxschmitt commented 7 months ago

Proposed fix: Doing searchButtonRef.current?.focus() here:

https://github.com/facebook/docusaurus/blob/7650829e913ec4bb1263d855719779f6b97066b6/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.tsx#L153

Alternatively we could focus the element here, which seems also reasonable:

https://github.com/algolia/docsearch/blob/df60b8ebe89c80ce3d00b80d94e95b6fd86edd19/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts#L51

Any thoughts would be appreciated, happy to create a PR for it once clarified. The solution above seems to work.

Sounds related to https://github.com/algolia/docsearch/issues/1370 but seems easily solvable in docusaurus land.