Consider MenuButton keyboard navigation behavior.

• Tab key focuses on the button, not the items inside the expandable container
• When the expandable container is visible, focus remains on the button
• Up/down arrows to navigate next/previous item
• Use aria-expanded and aria-controls. This way the screen reader announces:
  • Closed: "Contents, toggle button, collapsed"
  • Open: "Contents, toggle button, expanded"

"Contents" button can be reached and activated by keyboard

I'm late moving this to the QA column

@JScherer-WMF - a few design questions/unknowns:

• How does the sticky header TOC appear on wider screens?
• Can you provide a rough mockup or explain the intended behavior for the truncated header? (I'm currently shrinking the header text when it suspects the text is wrapping. This way it shows as much of the header text as possible and then truncates at 2 lines.)

Nice to have for link sharing: TOC open/close is also triggered by url hash (#toc) changes, and opening/closing TOC programmatically triggers those

Thanks @Etonkovidova! Regarding T415794, I've addressed some issues in a separate task that focused on the sticky header TOC (T413402). I can open up patches for the remaining ones and link them to T415794.

Addressed bug #3 center floating button TOC on wider screens in this patch from T413402. Here's the patchdemo using #toc URL hash: https://cbf2720cb4.catalyst.wmcloud.org/w/index.php?title=Alfalfa&mpo=minerva-toc-button:treatment#toc

At wider viewport sizes, the ToC window should be centre aligned, not left aligned.

@matthiasmullie thanks for picking up bug #1! The design intent wasn't clear to me either when I added the bold styles to the top link.

In T416244#11576460, @Aklapper wrote:

What is "FAB"?

Remaining tasks: truncation and design alignment for the sticky header/TOC. If @bvibber or anyone wants to jump in, feel free to create a follow-up patch. Otherwise, I'll resume work on these next week. I'm out of the office for the rest of today!

@JScherer-WMF Please disregard my previous request T413401#11563957. I'll wait for a formal design review next week. The toggle button is better suited for this use case because it handles the toc open/closed states. In the meantime, let's proceed with the code review for the toggle button implementation (cc: @matthiasmullie). I can address any design adjustments in a follow-up patch next week.

Updating the status of this ticket. The patch closed 3 tickets

Updating the status of this ticket. The commit closed 3 tickets (I missed this one)

Re-adding the Reader Growth tag for sprint tracking purposes. Reader Growth and Reader Experience teams are currently handling these Codex tasks as part of our active sprint.

Consider addressing issues from a previous QA T415794: [QA Task] testing TOC - minerva-toc-sticky

Update about the floating button conflicting with other page overlays:

Thanks for your help @JScherer-WMF @nayoub @KStoller-WMF ! I'm able to test in edit mode 😄

Hey @JScherer-WMF - I'm sharing two patchdemo links for you to review. Hoping to get clarity on the button's "active" state.

1. Codex Button with hover and active states. Patchdemo: https://fc4fd601e6.catalyst.wmcloud.org/w/index.php?title=Berlin&mpo=minerva-toc-button%3Atreatment
2. Codex ToggleButton with toggled on (TOC is open), toggled off (TOC is closed), and hover states. The main difference is that the "active" state is applied when the toggle button is toggled on (instead of when actively pressed). Patchdemo: https://856fdaa909.catalyst.wmcloud.org/w/index.php?title=Berlin&mpo=minerva-toc-button%3Atreatment

Regarding the editor help button: I logged in and enabled the newcomer homepage

Editors can toggle this feature at Special:Preferences → User profile → Newcomer editor features → Display newcomer homepage.

@JScherer-WMF

• How should the new Table of Contents (TOC) behave on wider viewports? Do you have a specific design in mind, or should I follow the Minerva and Vector TOC patterns for inspiration? Currently, the TOC occupies the majority of the screen across all sizes. Should I address this responsiveness now or track it for a future iteration?
• There are two versions of the floating action button: one with a label and an icon, and an icon-only variant. Is the icon-only version intended for layouts where space is limited or where a label might obstruct other UI elements?

The button does not interfere with other elements (such as Minerva toast, help button, or other overlays like MMV or ImageBrowsing)

Noting that this "nice to have" was not completed.

Nice to have for instrumentation outside of repo: TOC open/close emits readerExperiments.toc.open & readerExperiments.toc.close, while initialization of the TOC emits readerExperiments.toc.init

Notes for QA:

• Navigate to a Wikipedia article page (eg. Hedy Lemarr) and ensure the Minerva mobile view and experiment is enabled. URL example: https://en.wikipedia.org/wiki/Hedy_Lamarr?mpo=minerva-toc-sticky:treatment
• Enable Minerva mobile site via footer link that toggles desktop and mobile.
• Enable the experiment using URL params. There are two versions (sticky header and floating button):
  • Sticky header version: ?mpo=minerva-toc-sticky:treatment
  • Floating button version: ?mpo=minerva-toc-button:treatment

@mfossati - This task T407815 in the current sprint is related because it handles the collapsible section behavior using the $wgMFNamespacesWithoutCollapsibleSections global in MobileFrontend. The bug exists when Parsiod is enabled. Parsoid doesn't respect the global, and my patch should fix that.

Thanks @Jdlrobson-WMF ! My viewport was too small to see the bug in production. Now, I notice the bug when sections are initially expanded (640px and larger) and collapsed (639px and smaller). The map is broken between 481-1119px on Minerva mobile view with Parsoid enabled (Parsoid appears to be the default for Wikivoyage in production)

Does the bug still exist in production? If so, what are the steps to replicate the bug? I ask because I'm not able to replicate the bug on mobile view (locally or production wiki) using the example page, https://en.wikivoyage.org/wiki/San_Carlos_de_Bariloche
For local setup, I configured LocalSettings to retrieve content from the Wikivoyage API ($wgMFMwApiContentProviderBaseUri = "https://en.wikivoyage.org/w/api.php").

1. QA Test Plan

No visual regressions were introduced https://pixel-reports.wmcloud.org/codex/2025-12-20T02-19-08Z/. (Filter search "menu_button")

There was a post-merge build failure (details). I reached out to #developer-experience and Tyler C. re-ran the checks in the Jenkins UI, and it was successful 🎉

There was a hiccup with CI checks. Phan test failed because of an undeclared method in SpecialMobileEditWatchlist (SpecialMobileEditWatchlist::getWatchlistInfo). This patch restored the method and now CI checks pass.

My mistake! I should have put this in design review for @DTorsani-WMF. The code was merged. When you return from the end-of-year break, please let me know any feedback on this. Do you plan on completing the design requirement?

Update the component in the Figma library

This patch is ready for code review and addresses bugs about selection and toggling the menu with keyboard navigation (T379075 and T399905)