-
-
Notifications
You must be signed in to change notification settings - Fork 8.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make site usable without any JavaScript #3030
Comments
I am working on this. |
@slorber Navbar dropdown work without js. |
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 |
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 ;) |
@slorber The current classic template for version |
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 Let's assume that if a component absolutely need JS to run (search, theme toggle...) we'll just hide such element in noJS mode. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
It's not useful anymore to allow uncollapsing categories of the sidebar with CSS/HTML only. We now have "lazy/partial sidebars", and reduce the HTML markup rendered on the server by not rendering collapsed categories subitems: #5136 Instead, we'll solve the no-JS category uncollapsing by making the category a link targeting a page (category index page, or first doc of that category...), and the target page will have the category uncollapsed by default. Also may apply the suggestion of @m-allanson here, using the first doc of a category as a SSR link fallback: facebookincubator/infima#36 (comment) |
Has the possibility to use HTML5 |
@waldyrious I was considering it but since now sidebar categories are lazy, the summary content is not always server-rendered so it wouldn't work in this way. I think it's fine if we implement the "category index" page, and also users with JS disabled are more likely to expect a navigation on category click rather than a client-side expansion (even if it's technically possible to make it) |
I see, thanks for the quick response. I've been hoping to see more usage of |
The hidden checkbox idea is great, but a "quick and easy" alternative would be to render expandable items as links. For example, if you click on "Getting Started >" and there's no javascript, we could take the user to a page that has a list of all the catagories underneath "Getting Started". It's not as fancy, but it at least makes it so the page can be used. |
@jwalton as part of #5830 we are adding the ability to link to a doc or an automatically generated index page (https://deploy-preview-5830--docusaurus-2.netlify.app/docs/next/category/getting-started/) This is however optional. For categories not linking to any URL, I'll link them to the first child until React is able to hydrate, so that you'd be able to click on the category if the JS fails to load (suggested in facebookincubator/infima#36 (comment)) The only case where we you wouldn't be able to "open" the category without JS is:
|
I implemented the fallback described above as part of #5830 Now the sidebar is partially rendered on the server and we can still navigate it entirely with JS disabled. Test URL: https://deploy-preview-5830--docusaurus-2.netlify.app/docs/next/category/guides/ |
😅 I don't see this happening for me on the docusaurus website Yes, we render the dropdown on purpose: it should work without JS using |
Is there any way to specify that the site shouldn't deliver JS to the browser please? I'm looking to build a site with as small a carbon weight as possible and would rather do without JS if possible |
@gordonbazeley we don't have such an option atm, there's only this draft PR: #3237 |
@slorber Is this good to close now? I haven't observed any significant problem with using the site without JS. |
I'd like to keep this issue open and alive forever, as a central issue to discuss and report everything related to progressive enhancements We still have a few things we could work on:
|
Ah, makes sense. |
Notes to myself: Interesting suggestions on how to support a no-js version of the mobile drawer using recent CSS features: https://twitter.com/sebastienlorber/status/1582788081668616192 No-js search can likely be implemented with a simple GET form fallback redirecting to google site search URL: |
Note to self: The mobile drawer menu doesn't work well without JS When the time comes to refactor it, make sure to also take into consideration the comments from @timveld regarding keyboard/accessibility in #8207 (comment) |
Related: when JS is disabled it should be possible to keep theme respect OS color scheme (initially reported in #9579) |
I've been working on this, and have a proof of concept ready. Dark mode will look the same with JavaScript disabled, except for code blocks due to Prism's inline styles. The proposed approach using PostCSS to retroactively replace selectors from I'll hold off on opening a PR for now so I can investigate the Prism issue further, and see how to approach tests for this. You can find the WIP branch here: This does not conditionally omit The following screenshots are taken with JavaScript disabled: Alternatively, here is our plugin for Docusaurus: This plugin is currently in use on svgo.dev. |
Apparently we can implement tabs without JS thanks to the new Source: https://twitter.com/naman34/status/1734367676536078755 This feature is normally meant to create accordions. Preview without tab styling: Tab 11. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam explicabo, dolore voluptatibus corrupti quia vitae iure exercitationem, incidunt eius magnam voluptates, voluptatum sit dicta cupiditate ducimus molestiae repellendus in perferendis!Tab 22. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam explicabo, dolore voluptatibus corrupti quia vitae iure exercitationem, incidunt eius magnam voluptates, voluptatum sit dicta cupiditate ducimus molestiae repellendus in perferendis!Tab 33. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam explicabo, dolore voluptatibus corrupti quia vitae iure exercitationem, incidunt eius magnam voluptates, voluptatum sit dicta cupiditate ducimus molestiae repellendus in perferendis!Tab 44. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam explicabo, dolore voluptatibus corrupti quia vitae iure exercitationem, incidunt eius magnam voluptates, voluptatum sit dicta cupiditate ducimus molestiae repellendus in perferendis!Tab 55. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam explicabo, dolore voluptatibus corrupti quia vitae iure exercitationem, incidunt eius magnam voluptates, voluptatum sit dicta cupiditate ducimus molestiae repellendus in perferendis! |
🐛 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: #3237
The text was updated successfully, but these errors were encountered: