Navigation: Support customizable overlay toggle button label for menu differentiation

[himanshupathak95]

What?

Closes #81935

Adds an optional overlayButtonLabel attribute and a settings field to the Navigation block so editors can customize the text and accessible label of the mobile overlay toggle button.

Why?

When a page contains more than one Navigation block that collapses on mobile (such as a header menu and a footer/utility menu), all overlay buttons display the default text "Menu" and announce aria-label="Open menu".

Visitors and screen-reader users have no way to tell which button opens which menu. Allowing a custom label lets editors distinguish between multiple menus (e.g., "Primary Menu" vs. "Footer Menu").

How?

• Added overlayButtonLabel (string) to block.json. It defaults to an empty string and falls back to "Menu" for 100% backward compatibility.
• Added a "Button label" input field in the Overlay settings panel (overlay-menu-preview-controls.js) when "Show icon button" is disabled.
• Updated overlay-menu-preview-button.js and responsive-wrapper.js to reflect the custom label in the inspector preview, the canvas toggle button, and the modal dialog landmark.
• Updated index.php so the server renders the custom label for text buttons, generates aria-label="Open <Label>" for icon buttons, and binds the custom label.

Testing Instructions

1. Open a post or page in the editor.
2. Add two Navigation blocks with different links (e.g., one with main site links and one with footer links).
3. Select each Navigation block and open the Overlay panel in the inspector sidebar.
4. Set Overlay Visibility to Mobile (or Always), click the preview box to expand the controls, and turn off Show icon button.
5. In the Button label field, give each menu a unique name (e.g., "Main Menu" and "Footer Menu").
6. Verify that the inspector preview, editor canvas, and frontend mobile view show the respective custom labels instead of the default "Menu".
7. Verify that leaving the field blank continues to display and announce "Menu".

Screenshots or screencast

Screen.Recording.2026-08-24.at.14.02.54.mov

Use of AI Tools

Used Gemini Flash 3.5 for drafting and review

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: [Package] Block library.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @kazerniel.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: kazerniel.

Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.