On slow connections it is possible to click the main menu before JS has loaded and be taken to the "Special:MobileMenu" page throwing you out of the mobile experience. We no longer have to do this making sure that clicking the menu always reveals the menu no matter whether the page has fully loaded or not.
The current experience:
If user doesn't have JS enabled, the browser instead of showing menu (as it does with Overflow menu) will load the Special:MobileMenu page.
- If JS is disabled and I tap the hamburger icon - the menu appears on the screen
- the skins.minerva.scripts.menu should be simplified
We can do this using the :target CSS selector and keep the animation.
https://gerrit.wikimedia.org/r/#/c/mediawiki/skins/MinervaNeue/+/539974 demonstrates how this is possible.
This ships an additional 0.4kb of CSS (after gzip) to end users but means we remove the Special:MobileMenu page and associated experience.
Sign off steps
- Measure the impact of our main menu changes with help from performance team
- A card has been made for removing Special:MobileMenu - T241179
- We have reviewed the accessibility of the new menu
- Put it on the release timeline.
Test on production as logged in user, amc user and logged out user. Click the menu click the random button and check the main menu can be accessed via all pages. Test for at about 10 pages for each scenario.