A11y: Elements lose visible focus when using a screenreader and hitting Enter to activate

[ericenns]

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 navigating a docusaurus site via keyboard while using a screen reader (e.g. NVDA), tabbing to a button and hitting enter causes visible focus to be lost. This is due to https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-common/src/hooks/useKeyboardNavigation.ts, which removes navigation-with-keyboard class when clicking, this works for keyboard navigation while not using a screen reader but when using a screen reader hitting enter instead activates mousedown events.

Adding the following css appears to fix the issue:

body:not(.navigation-with-keyboard) *:not(input):focus-visible {
  outline: auto !important;
}

Which as you can see uses the :focus-visible selector which keeps the outline even if the element sees a mousedown event it will maintain focus if the element was already focused by tabbing to it. If a user clicks on a button not focused it will not have a visible focus ring.

Reproducible demo

The live docusaurus site exhibits this behaviour so it can be used.

Steps to reproduce

1. On windows activate NVDA
2. Open your browser to https://docusaurus.io/docs
3. Tab to the collapse button beside Getting Started in the sidebar
4. Hit the enter key

Expected behavior

Visible focus should be retained

Actual behavior

Visible focus is lost

Your environment

• Public source code: N/A
• Public site URL: https://docusaurus.io/docs
• Docusaurus version used: 3.8.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4): N/A
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): N/A

Self-service

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

[Ishu813]

/assign

[Huzaif-nabi]

I can reproduce this and would like to submit a pull request with the suggested fix.

[slorber]

Can this be reproduced only on Windows with NVDA?

On macOS with VoiceOver I still see the focus ring on the sidebar item collapse buttons.

Is it related to using the screen reader, or can you reproduce in Windows by simply tab/enter without the screen reader being enabled?

Can you tell us which browser you are using and which version?