Skip to content

Make site usable without any JavaScript #3030

@slorber

Description

@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:

image

image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    proposalThis issue is a proposal, usually non-trivial change

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions