Docusaurus: Make site usable without any JavaScript

[slorber]

🐛 Bug Report

The site is able to work mostly fine without JS.
In such case, navigation is not SPA/history push based, but is a regular html nav (like Docusaurus v1)

But, docs have collapsible menus, and these menus won't expand without JS:

I think we should find a html/css only solution to enable the user to expand those collapsible menus. It should be possible using :focus / :focus-within, here's a random example: https://codepen.io/josy-star/pen/KymaJw

If this is done correctly, users may even be able to enter submenus by using keyboard focus navigation (using tab).

Yes, users don't disable JS anymore in 2020, yet I think this is important to support. Main reason is that users on a bad connexion may experience slow JS hydration time, and for a few seconds, the JS is not loaded. I think we should ensure the nav still work during that time.

Other important reasons here: https://kryogenix.org/code/browser/everyonehasjs.html

(useful extension: https://github.com/maximelebreton/quick-javascript-switcher)

---

This is a non-exhaustive list of what can be easily fixed to support a no-js mode. If you find other issues that can have a significant impact and are easy to fix, that can be nice. The purpose if probably not to make everything work without JS, but if we can have at least major features like the navigation, it's a nice win that all our users will benefit.

Note: maybe some parts of the fix would require being backported to Infima?

---

Related draft PR: https://github.com/facebook/docusaurus/pull/3237

[anshulrgoyal]

I am working on this.

[anshulrgoyal]

@slorber Navbar dropdown work without js.

[slorber]

ah yes it's :hover

so it's probably only the collapsible doc sections that don't expand without js (here, :hover is not enough, we need to support multi-level nesting)

[anshulrgoyal]

ah yes it's :hover

so it's probably only the collapsible doc sections that don't expand without js (here, :hover is not enough, we need to support multi-level nesting)

I am trying to use the hidden checkbox. This is a good example https://codepen.io/jboeijenga/pen/eqzal

[slorber]

hmmm, that could do the trick. Wonder what's the advantage of using something like tabindex and :focus-within ?

Will this work if I use tab navigation to give the focus to an item for example?

Here I used tab navigation, we can see it with the collapsible outline. In such case that should be nice to expand it automatically:

I can see how using checkboxes would be nice to give some state and keep the collapsible expanded when they lose focus, but still think it may be useful to make it work without the checkboxes ;)

[sarthakkundra]

@slorber The current classic template for version 2.0.0-alpha.65 doesn't seem to have a dropdown menu for the docs. The generated site does seem to have some JS but that's only to store the theme preference. Please correct me if I'm wrong in understanding the issue or if any other changes are required.

[slorber]

Hi @sarthakkundra

The generated site is not versioned so it does not have a versions dropdown.

The best is to make sure that our own website (that you can run with yarn start:v2) mostly works with JS disabled, as the dropdown is already there for you.

Let's assume that if a component absolutely need JS to run (search, theme toggle...) we'll just hide such element in noJS mode.
I don't expect everything to work without JS, but what can work without JS should rather work without JS. And the dropdown can work without js.

[sarthakkundra]

Hey @slorber
Thanks for the clarification. I'll try to make the dropdown work just with HTML and CSS

[slorber]

My mistake @sarthakkundra I think this dropdown already works without much js (worth checking if this can be improved though, particularly keyboard-based navigation)

The critical part that is not working without JS is the docs sidebar, that we can't expand.

[sarthakkundra]

@slorber I will look into it. Thanks!

[mkcode]

Goal is to have this on all of the themes. But start with the classic theme.