[wp-trac] [WordPress Trac] #63031: Hamburger Menu doesn't open without javascript (missing css noscript, progressive enhancement)

[WordPress Trac]

#63031: Hamburger Menu doesn't open without javascript (missing css noscript,
progressive enhancement)
-------------------------------------------------+-------------------------
 Reporter:  maltfield                            |      Owner:  (none)
     Type:  defect (bug)                         |     Status:  new
 Priority:  normal                               |  Milestone:  Awaiting
                                                 |  Review
Component:  Bundled Theme                        |    Version:
 Severity:  normal                               |   Keywords:
  Focuses:  accessibility, javascript, css,      |
  privacy, coding-standards                      |
-------------------------------------------------+-------------------------
 ### 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](https://community.torproject.org/user-
 research/personas/) 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)
 1. Journalists (eg reporting on gangs, corruption, or oppressive regimes)
 1. Whistleblowers (eg providing information to journalists above)
 1. Activists (eg pro-abortion-rights or environmental activists)

 Unfortunately, every year numerous people are assassinated in the the
 above at-risk groups
 <sup>[[1](https://cpj.org/data/killed/2023/?status=Killed&motiveConfirmed%5B%5D=Confirmed&motiveUnconfirmed%5B%5D=Unconfirmed&type%5B%5D=Journalist&type%5B%5D=Media%20Worker&start_year=2023&end_year=2023&group_by=location)][[2](https://rsf.org/en/rsf-s-2023-round-45
 -journalists-killed-line-duty-worldwide-drop-despite-tragedy-
 gaza)][[3](https://unesdoc.unesco.org/ark:/48223/pf0000379589.locale=en)]</sup>.
 As an Information Security consultant, I've trained such users to use
 [TAILS](https://tails.net/) with Tor Browser -- so that all of their
 internet traffic is protected with [Tor](https://community.torproject.org
 /user-research/personas/). 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
 `<noscript>` 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](https://wp-themes.com/twentytwentyfour/), taken on
 2025-02-27 in Tor Browser v14.0.6 (based on Firefox v128.7.0esr) in Debian
 12.

 TODO

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63031>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform