facebook / facebook/docusaurus

Make site usable without any JavaScript

Đang mở
#3,030 33 bình luận 5 reaction 0 người được giao Xem trên GitHub
proposal
Ngôn ngữ chính
TypeScript
Star
66.2k
Fork
10k
Merge trung bình
1 ngày 3 giờ
Pull request đã merge (30 ngày)
52

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.