docusaurus: a11y: jump to main content doesn't work without JS
Have you read the Contributing Guidelines on issues?
- I have read the Contributing Guidelines on issues.
Prerequisites
- I’m using the latest version of Docusaurus.
- I have tried the
npm run clear
oryarn clear
command. - I have tried
rm -rf node_modules yarn.lock package-lock.json
and re-installing packages. - I have tried creating a repro with https://new.docusaurus.io.
- I have read the console error message carefully (if applicable).
Description
- “Jump to main content” has href of
#
, which isn’t doing anything when Javascript isn’t available. - Default link color too bright. Poor contrast with white background.
- Links don’t change appearance when focused. No idea which link is focused because of this. I don’t need a screen reader.
Steps to reproduce
- Go to https://docusaurus.io/docs in Firefox Desktop
- Disable Javascript & refresh
- Press <kbd>Tab</kbd>, and try to use link “Skip to main content” with <kbd>Enter</kbd>
Expected behavior
Implied in Description
Actual behavior
Implied in Description
Your environment
No response
Reproducible demo
Self-service
- I’d be willing to fix this bug myself.
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 15 (3 by maintainers)
Commits related to this issue
- fix(theme-classic): Use native href for skip to content #6411. — committed to mturoci/docusaurus by mturoci 2 years ago
React 18 has a
useId
hook, I think we can use that.The outline is moved to JS logic in https://github.com/facebook/docusaurus/pull/3626. Apparently, the fix here would be to use
:focus-visible
, but until this point, it’s not supported in Safari. (Although Safari has terrible support of tabbing anyways)@locriacyber was wondering, why would someone needing accessibility aid use a website without JavaScript? I was discussing this with some other front-end developers, and seems the consensus is that JavaScript is necessary for a lot of a11y features, unless you rely on experimental WCAG features. a11y and browser compatibility—we have to make a compromise.