Have you read the Contributing Guidelines on issues?
Prerequisites
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
- On windows activate NVDA
- Open your browser to https://docusaurus.io/docs
- Tab to the
collapse button beside Getting Started in the sidebar
- Hit the enter key
Expected behavior
Visible focus should be retained
Actual behavior
Visible focus is lost
Your environment
Self-service
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clearoryarn clearcommand.rm -rf node_modules yarn.lock package-lock.jsonand re-installing packages.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-keyboardclass 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:
Which as you can see uses the
:focus-visibleselector 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
collapsebutton besideGetting Startedin the sidebarExpected behavior
Visible focus should be retained
Actual behavior
Visible focus is lost
Your environment
Self-service