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

[iacore]

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 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 Tab, and try to use link "Skip to main content" with Enter

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.

[iacore]

Discovered in tauri-apps/tauri-docs#307

[Josh-Cena]

Default link color too bright. Poor contrast with white background.

Will be fixed by #5822

The others are valid issues. Thanks for reporting.

[iacore]

Only the linked color contrast is fixed by #5822 (Used the link preview https://deploy-preview-5822--docusaurus-2.netlify.app/docs/styling-layout/)

[Josh-Cena]

Indeed, my message says that only the quoted problem will be fixed😆 Maybe I didn't make it clear enough...

[Josh-Cena]

The outline is moved to JS logic in #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.

[slorber]

We fixed the focus outline normally @locriacyber , please let us know if it doesn't work

We'll keep this issue open for the remaining fixes.

[iacore]

why would someone needing accessibility aid use a website without JavaScript?

It's a separate issue. The browser default is to underline links when focused. This feature only needs CSS.

The outline is visible now.

[Josh-Cena]

@lex111 Wonder what's your idea on this issue? Should we use programmatic focus, or should we simply use a link to an element ID? Other sites I researched (like NYT and GitHub) seem to use an anchor link. GitHub would instantly erase the hash from the location if JS is enabled.

[lex111]

Initially I didn't add explicit identifiers to try to make the STC button as workable as possible on any page. You could try to add identifiers that are resolves this issue, but why would anyone use a site with disabled JS, I still don't get it?

[Josh-Cena]

Me neither 😅 Apparently there would always be a11y features that are only available with JS, but this one seems solvable without JS, and other sites seem to handle it without JS. About "workable on any page", we currently focus to .main-wrapper, so if we simply add id="main" to the same div, it should work just the same, right?

[lex111]

Not so sure about that, but most likely yes.

[iacore]

id="main-45678987654345" is better

[Josh-Cena]

React 18 has a useId hook, I think we can use that.

[mturoci]

@Josh-Cena @slorber I would like to pick up this issue, but have a few clarifying questions:

• Shall the existing JS focus be dumped entirely in favor of a simple anchor? (IMHO using native href is always preferred compared to JS so this is a good direction).
• useId hook cannot be used because the root docusaurus package (main package.json) depends on React 17 and theme-classic has also peer dep only 16.8 or 17. UseId is however only available since 18.
• I am not sure why the dynamic useId hook is necessary anyway. When looking at the documentation, it seems like the id shall be added to Layout > mainWrapper div and since I assume every page will always have at most 1 Layout, then static ID shall be enough. Please correct me if I am missing something.

[slorber]

Something to consider:

• our current skipToContent behavior focuses in priority an existing <main> tag over an explicit id/className
• we are keeping this behavior (for now)
• we are introducing an explicit "id" (instead of a className) that is used more as a "fallback" in case no <main> tag exists. In this case, focusing on the <Layout> children container is reasonable behavior.
• when JS is disabled, it's not possible to replicate the same behavior (<main> used in priority). Afaik it's not possible to have a link target a <main> element that may not have an id

For some pages, like the docs, it leads to slightly different behaviors with/without JS.

Test page: https://deploy-preview-8204--docusaurus-2.netlify.app/docs/

With JS: the document markdown content gets focused on first tab (<main>):

Without JS: the docs sidebar get focused on first tab (layout children, fallback behavior)

---

That is likely not a big deal.

For now, I'd rather avoid changing the historical JS behavior ("focus main in priority") for retro compatibility. The noJS behavior we are introducing in #8204 is probably a good enough improvement already.