facebook / facebook/docusaurus

Make site usable without any JavaScript

Open
#3,030 33 comments 5 reactions 0 assignees View on GitHub
proposal
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
52

Description

## 🐛 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:

![image](https://user-images.githubusercontent.com/749374/86902386-299bca00-c10e-11ea-9f66-f34311ac8546.png)

![image](https://user-images.githubusercontent.com/749374/86901397-d7a67480-c10c-11ea-86d7-2aa7713d3457.png)

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.