Navigation Overlay Testing Response

[jhmonroe]

Description

In re: #38275 and call for testing here: https://make.wordpress.org/test/2026/01/27/call-for-testing-customizable-navigation-mobile-overlays/

Congrats and thank you @getdave and everyone!

In Playground testing, the overlay builder is very intuitive for anyone who works in block themes/gutenberg exclusively.

Accessibility: In testing a dev site with a blind client recently, this is the most important thing. Nav is so essential for people using screen readers. They are accustomed to lists inside nav blocks as the easiest thing to navigate in their software. Hopefully the NAV nesting was incorporated according to the comments on #74583 #74764
I do think we should test more about how the other items below the traditional NAV in the overlay are output. ie: if screen reader users expect things in a list for easy tabbing, those extra items could presumably be some kind of inner block nested in the UL. (and yes I understand this is a bigger conversation about the NAV block itself!)

My current hack for this if I want "buttons" in the nav is to use CSS to style the UL/LI items to look like buttons, but they are still simple UL/LI items inside a list block inside the nav. Example: https://nesfl.org/home-2025/?theme=nesfl

Once the Overlay feature is out in 7.0 I can ask my clients to test and will circle back with any feedback.

Template Examples: Only thing missing is a right-aligned example—could perhaps be added as a 6th? Right-aligned example would be widely used in countries/languages that use RTL writing instead of LTR like English (good to align this project with the internationalization efforts). This could also make good sense for sites using one-word nav titles that all line up (like in the examples) since the close button is always on the right and a majority of the population will be using their right thumb.

Submenu Children Indents: I can see this being something clients would ask me to change since it looks like a mistake. Could not figure out easy way to remove this indent in the overlay builder. Presumably it's inheriting the indents from the theme global styles for UL/LI but since the overlay builder is bespoke, it would be great to be able to remove the indents here without needing to write CSS.

In orange example, allow wrap to multiple lines on the Nav block is novel and works great!

Parent/Children Visual Hierarchy: For instance, many clients would prefer a hierarchy like: parents are bold, children are light/regular. It's very easy to set Appearance to Bold on the parent and then click-shift-select all the chillden to change their appearance to light. So this works well.

Step-by-step reproduction instructions

See above

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

[getdave]

Thank you for testing this and for the feedback.

[getdave]

Thank you for taking the time to test this and for such thoughtful, detailed feedback — it's genuinely useful to hear from someone working with real-world clients, including users who rely on screen readers.

Accessibility — screen reader nav nesting

Good news here: we did carry out an accessibility review specifically covering nav nesting in overlays. The outcome is tracked in #74583 (now closed) and was implemented in #74764 — nested Navigation blocks inside overlays no longer use a <nav> element, which was the key recommendation from the accessibility team. Regarding your point about structuring additional overlay content (buttons, links, etc.) as lists — that wasn't identified as a requirement during our accessibility review, so it's not something we're planning to address. If you're able to point to specific accessibility guidance that supports this approach, we'd be happy to take a look.

Template examples — right-aligned overlay pattern

That's good feedback. A right-aligned variant makes particular sense for RTL languages and could serve other use cases too. We'll ping @MaggieCabrera , who created much of the current pattern set, to see if she'd like to open a follow-up issue to track this idea.

Submenu children indents

This is helpful to hear. We're very conscious of the need to improve how submenus display within navigation overlays — it's an area that covers several related concerns, including indentation, visual hierarchy, and toggle behaviour. There are a number of issues already tracking various aspects of this: #44346, #75702, #75977, and #76276. Unfortunately we're not in a position to address this comprehensively as part of the WordPress 7.0 cycle, but it is very much in consideration for 7.1.

Parent/children visual hierarchy

This relates directly to the submenu improvements mentioned above. We're aware that parent/child styling in overlays needs work, and we'll be looking to address this in a future release.

Thanks again for the detailed report — feedback like this, particularly from someone working directly with end users, is exactly what helps us prioritise the right things.

We'll be closing this issue out now as the points raised have been addressed or are tracked elsewhere. If you have further feedback or run into anything else, please do feel free to reopen and add more detail.