Make the navigation block content available when JavaScript is disabled.

[carolinan]

Description

Description

I am copying this from a Trac ticket that was opened about the menu in Twenty Twenty-Four:
https://core.trac.wordpress.org/ticket/63031

The reporter's clients needs to browse with JavaScript disabled, but the navigation blocks mobile menu does not work without JavaScript.

I understand that the editors require JavaScript and that the workaround for that is to install the classic editor plugin.
I also recommended the user to change to any theme that is specifically built to work without JavaScript.

But perhaps the navigation block can still be improved to have a noscript fallback.

Expected behaviour

I expect the menu content to be available with reduced functionality.

Actual behaviour

The menu does not open.

Step-by-step reproduction instructions

Place a navigation block with the mobile menu option enabled. Save.
Go to the front of the site.
Disable JavaScript -How you do this will depend on the browser.
Try to open the menu.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[maltfield]

Can someone please indicate which file in this repo has the "navigation block" code?

[maltfield]

Note: For additional context, I'm going to post the original ticket contents below

Description

The Twenty Twenty-Four hamburger menu (for site navigation on narrow/mobile displays) does not open when clicked/tapped on browsers with javascript disabled.

Note: I'm creating this ticket here on trac because the GitHub repo said to do so here https://github.com/WordPress/twentytwentyfour/blob/6d45adf1f4ecb688eb79dacb0f4f9eb34d9d6594/README.md#archived-repository

Steps to reproduce

1. Download, Install, Open Tor Browser https://www.torproject.org/download/
2. Enable "Safest" mode https://tb-manual.torproject.org/security-settings/
3. Navigate to some Twenty Twenty-Four website (eg https://wp-themes.com/twentytwentyfour/)
4. Reduce the width of the browser until the hamburger menu in the top-right appears
5. Menu icon doesn't appear
6. Clicking the empty area where the menu should be does nothing

Actual behavior

When javascript is disabled, clicking the hamburger menu does nothing.

Expected behavior

The hamburger menu should always open, even on security-hardened web browsers.

Why?

There are countless at-risk users around the world who must use Tor Browser for all Internet activity to protect themselves and/or their families. Examples of such groups include:

1. Refugees (eg escaping gang, State, or domestic violence)
2. Journalists (eg reporting on gangs, corruption, or oppressive regimes)
3. Whistleblowers (eg providing information to journalists above)
4. Activists (eg pro-abortion-rights or environmental activists)

Unfortunately, every year numerous people are assassinated in the the above at-risk groups ^[1][2][3]. As an Information Security consultant, I've trained such users to use TAILS with Tor Browser -- so that all of their internet traffic is protected with Tor. And I recommend that they use Tor Browser in "Safest" mode, which disables javascript for additional protection.

Using Tor Browser is the best way for at-risk users to stay safe when using the Internet

Unfortunately it appears that Twenty Twenty-Four has a bug where at-risk users following security best-practices cannot navigate Twenty Twenty-Four websites because the menu doesn't work.

Solution

Navigation is neither a bell nor a whistle. Being able to open a menu isn't something that should work only for users with javascript enabled.

For components as critical as basic site navigation, we should provide a fallback that opens the menu with CSS.

• https://en.wikipedia.org/wiki/Progressive_enhancement

Screenshots

Please see the following screenshots taken of the official Twenty Twenty-Four demo site, taken on 2025-02-27 in Tor Browser v14.0.6 (based on Firefox v128.7.0esr) in Debian 12.

In Tor Browser "Standard" Mode (with javascript enabled), the menu works	In Tor Browser "Strict" Mode (with javascript disabled), the menu does not work

[carolinan]

Discussions about how many people are assassinated are really unnecessary and may be triggering,
The repositories need to be family friendly as they are public and also available to all ages.

[carolinan]

@maltfield I believe a noscript element would need to go in here https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/navigation/index.php

[afercia]

To me, a no-JS menu with maybe some reduced functionality would be a great addition.

While not 100% semantically appropriate, maybe a details element could be used within a noscript to reveal a menu with plain links given the details works even with JS disabled. Demo: https://codepen.io/afercia/full/WbNjqBP

[stokesman]

#63917 demonstrates a way the menu can work without JS.

[westonruter]

Yes, I think per #63917 (comment) we have an opportunity to leverage Invoker Commands to declaratively open a nav menu implemented in a dialog element. Browser support is not quite here yet, but assuming it is implemented in Chromium soon-ish it will also be easy to polyfill (with JavaScript). So while it wouldn't work without JavaScript for everyone in the immediate term, in the medium to long term it would work and would be a fully functional implementation that wouldn't depend on JavaScript and it wouldn't offer a degraded experience.

[westonruter]

Related: Core-50182 (Majority of bundled themes have broken mobile nav menus when JS turned off)

[maltfield]

@westonruter do you know if hardened browsers in strict mode (eg Tor Browser) will disable Invoker Commands, just as they disable javascript -- for security? I don't understand why we'd consider implementing this simple feature in some new technology.

Why not use CSS menus as a fallback (or just replace the JS entirely)? There's tons of CSS menus available online that we can just copy & paste. It works in almost all browsers today, and it's very future-proof to work in all browsers decades from now. And I don't know of any security-hardened browsers that have disabled CSS..

[maltfield]

Here's an example of a CSS menu:

• https://codepen.io/kirstenhumphreys/pen/vgaKmG

[westonruter]

@maltfield Good questions. As I understand, Invoker Commands are not scripting so they would still work when scripting is disabled. That's really the whole point of them. Invoker Commands are declarative and are not "Turing complete" so there aren't the security concerns like with running arbitrary JavaScript. That said, Invoker Commands are currently in the process of being implemented, so we'll need to look out for this. I see that Tor Browser is based on Firefox, and Firefox currently has Invoker Commands implemented in a Nightly build if you have the dom.element.invokers.enabled flag enabled. I hope to test that this week.

I don't think a pure CSS mobile nav menu will be suitable for accessibility reasons. In that Codepen, there's no setting of the required ARIA attributes which should be handled automatically by Invoker Commands connecting a button with a dialog/popover. I don't think the current UI for the nav menu would be feasible to implement in pure CSS nav menu and it wouldn't be able to do things like focus trapping or light dismiss (e.g. hit ESC to close the nav menu).