docusaurus: a11y: jump to main content doesn't work without JS

Have you read the Contributing Guidelines on issues?

Prerequisites

  • I’m using the latest version of Docusaurus.
  • I have tried the npm run clear or yarn 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

  1. “Jump to main content” has href of #, which isn’t doing anything when Javascript isn’t available.
  2. Default link color too bright. Poor contrast with white background.
  3. 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

  1. Go to https://docusaurus.io/docs in Firefox Desktop
  2. Disable Javascript & refresh
  3. 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

https://docusaurus.io/docs

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

Most upvoted comments

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.