<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[58306] trunk/src: Menus: Accessibility: Improve screen reader text for edit button.</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/58306">58306</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/58306","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>joedolson</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2024-06-03 20:33:03 +0000 (Mon, 03 Jun 2024)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Menus: Accessibility: Improve screen reader text for edit button.

Change the edit menu item toggle to communicate more context about the item to be edited. Make edit text consistent between Customizer menu editor and admin menu editor.

The menu position is conveyed only visually, using indentation, because there are no organizational semantics in either editor. This change helps provide screen reader users with consistent contextual information about the order, position, and parent of the current item.

Props joedolson, rcreators, afercia, mohonchandra.
Fixes <a href="https://core.trac.wordpress.org/ticket/60673">#60673</a>, See <a href="https://core.trac.wordpress.org/ticket/60672">#60672</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcjs_enqueueslibnavmenujs">trunk/src/js/_enqueues/lib/nav-menu.js</a></li>
<li><a href="#trunksrcjs_enqueueswpcustomizenavmenusjs">trunk/src/js/_enqueues/wp/customize/nav-menus.js</a></li>
<li><a href="#trunksrcwpadminnavmenusphp">trunk/src/wp-admin/nav-menus.php</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizenavmenusphp">trunk/src/wp-includes/class-wp-customize-nav-menus.php</a></li>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizenavmenuitemcontrolphp">trunk/src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcjs_enqueueslibnavmenujs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/_enqueues/lib/nav-menu.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/_enqueues/lib/nav-menu.js    2024-06-03 20:25:37 UTC (rev 58305)
+++ trunk/src/js/_enqueues/lib/nav-menu.js      2024-06-03 20:33:03 UTC (rev 58306)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -449,12 +449,13 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        var thisLink, thisLinkText, primaryItems, itemPosition, title,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                parentItem, parentItemId, parentItemName, subItems,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         parentItem, parentItemId, parentItemName, subItems, totalSubItems,
</ins><span class="cx" style="display: block; padding: 0 10px">                                 $this = $( itemToRefresh ),
</span><span class="cx" style="display: block; padding: 0 10px">                                menuItem = $this.closest( 'li.menu-item' ).first(),
</span><span class="cx" style="display: block; padding: 0 10px">                                depth = menuItem.menuItemDepth(),
</span><span class="cx" style="display: block; padding: 0 10px">                                isPrimaryMenuItem = ( 0 === depth ),
</span><span class="cx" style="display: block; padding: 0 10px">                                itemName = $this.closest( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                menuItemType = $this.closest( '.menu-item-handle' ).find( '.item-controls' ).find( '.item-type' ).text(),
</ins><span class="cx" style="display: block; padding: 0 10px">                                 position = parseInt( menuItem.index(), 10 ),
</span><span class="cx" style="display: block; padding: 0 10px">                                prevItemDepth = ( isPrimaryMenuItem ) ? depth : parseInt( depth - 1, 10 ),
</span><span class="cx" style="display: block; padding: 0 10px">                                prevItemNameLeft = menuItem.prevAll('.menu-item-depth-' + prevItemDepth).first().find( '.menu-item-title' ).text(),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -503,18 +504,22 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                primaryItems = $( '.menu-item-depth-0' ),
</span><span class="cx" style="display: block; padding: 0 10px">                                itemPosition = primaryItems.index( menuItem ) + 1,
</span><span class="cx" style="display: block; padding: 0 10px">                                totalMenuItems = primaryItems.length,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px">                                 // String together help text for primary menu items.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$d', totalMenuItems );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalMenuItems );
</ins><span class="cx" style="display: block; padding: 0 10px">                         } else {
</span><span class="cx" style="display: block; padding: 0 10px">                                parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1, 10 ) ).first(),
</span><span class="cx" style="display: block; padding: 0 10px">                                parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(),
</span><span class="cx" style="display: block; padding: 0 10px">                                parentItemName = parentItem.find( '.menu-item-title' ).text(),
</span><span class="cx" style="display: block; padding: 0 10px">                                subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                totalSubItems = subItems.length,
</ins><span class="cx" style="display: block; padding: 0 10px">                                 itemPosition = $( subItems.parents('.menu-item').get().reverse() ).index( menuItem ) + 1;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                                // String together help text for sub menu items.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$d', itemPosition ).replace( '%3$s', parentItemName );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         if ( depth < 2 ) {
+                                       title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalSubItems ).replace( '%5$s', parentItemName );
+                               } else {
+                                       title = menus.subMenuMoreDepthFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalSubItems ).replace( '%5$s', parentItemName ).replace( '%6$d', depth );
+                               }
</ins><span class="cx" style="display: block; padding: 0 10px">                         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        $this.attr( 'aria-label', title );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -732,6 +737,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                                        api.refreshKeyboardAccessibility();
</span><span class="cx" style="display: block; padding: 0 10px">                                        api.refreshAdvancedAccessibility();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                        api.refreshAdvancedAccessibilityOfItem( ui.item.find( 'a.item-edit' ) );
</ins><span class="cx" style="display: block; padding: 0 10px">                                 },
</span><span class="cx" style="display: block; padding: 0 10px">                                change: function(e, ui) {
</span><span class="cx" style="display: block; padding: 0 10px">                                        // Make sure the placeholder is inside the menu.
</span></span></pre></div>
<a id="trunksrcjs_enqueueswpcustomizenavmenusjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/js/_enqueues/wp/customize/nav-menus.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/js/_enqueues/wp/customize/nav-menus.js  2024-06-03 20:25:37 UTC (rev 58305)
+++ trunk/src/js/_enqueues/wp/customize/nav-menus.js    2024-06-03 20:33:03 UTC (rev 58306)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2,7 +2,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">  * @output wp-admin/js/customize-nav-menus.js
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* global _wpCustomizeNavMenusSettings, wpNavMenu, console */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* global menus, _wpCustomizeNavMenusSettings, wpNavMenu, console */
</ins><span class="cx" style="display: block; padding: 0 10px"> ( function( api, wp, $ ) {
</span><span class="cx" style="display: block; padding: 0 10px">        'use strict';
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1132,6 +1132,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                $( '#menu-to-edit' ).removeAttr( 'id' );
</span><span class="cx" style="display: block; padding: 0 10px">                                wpNavMenu.menuList.attr( 'id', 'menu-to-edit' ).addClass( 'menu' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                api.Menus.MenuItemControl.prototype.initAccessibility();
+
</ins><span class="cx" style="display: block; padding: 0 10px">                                 _.each( api.section( section.id ).controls(), function( control ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                        if ( 'nav_menu_item' === control.params.type ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                                control.actuallyEmbed();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1575,6 +1577,80 @@
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 * Set up the initial state of the screen reader accessibility information for menu items.
+                *
+                * @since 6.6.0
+                */
+               initAccessibility: function() {
+                       var control = this,
+                               menu = $( '#menu-to-edit' );
+
+                       // Refresh the accessibility when the user comes close to the item in any way.
+                       menu.on( 'mouseenter.refreshAccessibility focus.refreshAccessibility touchstart.refreshAccessibility', '.menu-item', function(){
+                               control.refreshAdvancedAccessibilityOfItem( $( this ).find( 'button.item-edit' ) );
+                       } );
+
+                       // We have to update on click as well because we might hover first, change the item, and then click.
+                       menu.on( 'click', 'button.item-edit', function() {
+                               control.refreshAdvancedAccessibilityOfItem( $( this ) );
+                       } );
+               },
+
+               /**
+                * refreshAdvancedAccessibilityOfItem( [itemToRefresh] )
+                *
+                * Refreshes advanced accessibility buttons for one menu item.
+                * Shows or hides buttons based on the location of the menu item.
+                *
+                * @param {Object} itemToRefresh The menu item that might need its advanced accessibility buttons refreshed
+                * 
+                * @since 6.6.0
+                */
+               refreshAdvancedAccessibilityOfItem: function( itemToRefresh ) {
+                       // Only refresh accessibility when necessary.
+                       if ( true !== $( itemToRefresh ).data( 'needs_accessibility_refresh' ) ) {
+                               return;
+                       }
+
+                       var primaryItems, itemPosition, title,
+                               parentItem, parentItemId, parentItemName, subItems, totalSubItems,
+                               $this = $( itemToRefresh ),
+                               menuItem = $this.closest( 'li.menu-item' ).first(),
+                               depth = menuItem.menuItemDepth(),
+                               isPrimaryMenuItem = ( 0 === depth ),
+                               itemName = $this.closest( '.menu-item-handle' ).find( '.menu-item-title' ).text(),
+                               menuItemType = $this.closest( '.menu-item-handle' ).find( '.item-type' ).text(),
+                               totalMenuItems = $( '#menu-to-edit li' ).length;
+
+                       if ( isPrimaryMenuItem ) {
+                               primaryItems = $( '.menu-item-depth-0' ),
+                               itemPosition = primaryItems.index( menuItem ) + 1,
+                               totalMenuItems = primaryItems.length,
+                               // String together help text for primary menu items.
+                               title = menus.menuFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalMenuItems );
+                       } else {
+                               parentItem = menuItem.prevAll( '.menu-item-depth-' + parseInt( depth - 1, 10 ) ).first(),
+                               parentItemId = parentItem.find( '.menu-item-data-db-id' ).val(),
+                               parentItemName = parentItem.find( '.menu-item-title' ).text(),
+                               subItems = $( '.menu-item .menu-item-data-parent-id[value="' + parentItemId + '"]' ),
+                               totalSubItems = subItems.length,
+                               itemPosition = $( subItems.parents( '.menu-item' ).get().reverse() ).index( menuItem ) + 1;
+
+                               // String together help text for sub menu items.
+                               if ( depth < 2 ) {
+                                       title = menus.subMenuFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalSubItems ).replace( '%5$s', parentItemName );
+                               } else {
+                                       title = menus.subMenuMoreDepthFocus.replace( '%1$s', itemName ).replace( '%2$s', menuItemType ).replace( '%3$d', itemPosition ).replace( '%4$d', totalSubItems ).replace( '%5$s', parentItemName ).replace( '%6$d', depth );
+                               }
+                       }
+
+                       $this.find( '.screen-reader-text' ).text( title );
+
+                       // Mark this item's accessibility as refreshed.
+                       $this.data( 'needs_accessibility_refresh', false );
+               },
+
+               /**
</ins><span class="cx" style="display: block; padding: 0 10px">                  * Override the embed() method to do nothing,
</span><span class="cx" style="display: block; padding: 0 10px">                 * so that the control isn't embedded on load,
</span><span class="cx" style="display: block; padding: 0 10px">                 * unless the containing section is already expanded.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1607,6 +1683,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><span class="cx" style="display: block; padding: 0 10px">                        control.renderContent();
</span><span class="cx" style="display: block; padding: 0 10px">                        control.deferred.embedded.resolve(); // This triggers control.ready().
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        
+                       // Mark all menu items as unprocessed.
+                       $( 'button.item-edit' ).data( 'needs_accessibility_refresh', true );
</ins><span class="cx" style="display: block; padding: 0 10px">                 },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1679,22 +1758,15 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                        control.moveDown();
</span><span class="cx" style="display: block; padding: 0 10px">                                } else if ( isMoveLeft ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                        control.moveLeft();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        if ( 1 === control.params.depth ) {
-                                               control.container.find( '.is-submenu' ).hide();
-                                       } else {
-                                               control.container.find( '.is-submenu' ).show();
-                                       }
</del><span class="cx" style="display: block; padding: 0 10px">                                 } else if ( isMoveRight ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                        control.moveRight();
</span><span class="cx" style="display: block; padding: 0 10px">                                        control.params.depth += 1;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        if ( 0 === control.params.depth ) {
-                                               control.container.find( '.is-submenu' ).hide();
-                                       } else {
-                                               control.container.find( '.is-submenu' ).show();
-                                       }
</del><span class="cx" style="display: block; padding: 0 10px">                                 }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                
+                               moveBtn.focus(); // Re-focus after the container was moved.
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                moveBtn.focus(); // Re-focus after the container was moved.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         // Mark all menu items as unprocessed.
+                               $( 'button.item-edit' ).data( 'needs_accessibility_refresh', true );
</ins><span class="cx" style="display: block; padding: 0 10px">                         } );
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2726,6 +2798,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                                                menuItemControl.setting.set( setting );
</span><span class="cx" style="display: block; padding: 0 10px">                                        });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                                       // Mark all menu items as unprocessed.
+                                       $( 'button.item-edit' ).data( 'needs_accessibility_refresh', true );
</ins><span class="cx" style="display: block; padding: 0 10px">                                 });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        });
</span></span></pre></div>
<a id="trunksrcwpadminnavmenusphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/nav-menus.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/nav-menus.php  2024-06-03 20:25:37 UTC (rev 58305)
+++ trunk/src/wp-admin/nav-menus.php    2024-06-03 20:33:03 UTC (rev 58306)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -580,10 +580,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">        'under'                   => __( 'Under %s' ),
</span><span class="cx" style="display: block; padding: 0 10px">        /* translators: %s: Previous item name. */
</span><span class="cx" style="display: block; padding: 0 10px">        'outFrom'                 => __( 'Out from under %s' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        /* translators: 1: Item name, 2: Item position, 3: Total number of items. */
-       'menuFocus'               => __( '%1$s. Menu item %2$d of %3$d.' ),
-       /* translators: 1: Item name, 2: Item position, 3: Parent item name. */
-       'subMenuFocus'            => __( '%1$s. Sub item number %2$d under %3$s.' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* translators: 1: Item name, 2: Item type, 3: Item index, 4: Total items. */
+       'menuFocus'               => __( 'Edit %1$s (%2$s, %3$d of %4$d)' ),
+       /* translators: 1: Item name, 2: Item type, 3: Item index, 4: Total items, 5: Item parent. */
+       'subMenuFocus'            => __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s)' ),
+       /* translators: 1: Item name, 2: Item type, 3: Item index, 4: Total items, 5: Item parent, 6: Item depth. */
+       'subMenuMoreDepthFocus'   => __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s, level %6$d)' ),
</ins><span class="cx" style="display: block; padding: 0 10px">         /* translators: %s: Item name. */
</span><span class="cx" style="display: block; padding: 0 10px">        'menuItemDeletion'        => __( 'item %s' ),
</span><span class="cx" style="display: block; padding: 0 10px">        /* translators: %s: Item name. */
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizenavmenusphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-customize-nav-menus.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-nav-menus.php    2024-06-03 20:25:37 UTC (rev 58305)
+++ trunk/src/wp-includes/class-wp-customize-nav-menus.php      2024-06-03 20:33:03 UTC (rev 58306)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -562,10 +562,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        'under'                   => __( 'Under %s' ),
</span><span class="cx" style="display: block; padding: 0 10px">                        /* translators: %s: Previous item name. */
</span><span class="cx" style="display: block; padding: 0 10px">                        'outFrom'                 => __( 'Out from under %s' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        /* translators: 1: Item name, 2: Item position, 3: Total number of items. */
-                       'menuFocus'               => __( '%1$s. Menu item %2$d of %3$d.' ),
-                       /* translators: 1: Item name, 2: Item position, 3: Parent item name. */
-                       'subMenuFocus'            => __( '%1$s. Sub item number %2$d under %3$s.' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 /* translators: 1: Item name, 2: Item type, 3: Item index, 4: Total items. */
+                       'menuFocus'               => __( 'Edit %1$s (%2$s, %3$d of %4$d)' ),
+                       /* translators: 1: Item name, 2: Item type, 3: Item index, 4: Total items, 5: Item parent. */
+                       'subMenuFocus'            => __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s)' ),
+                       /* translators: 1: Item name, 2: Item type, 3: Item index, 4: Total items, 5: Item parent, 6: Item depth. */
+                       'subMenuMoreDepthFocus'   => __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s, level %6$d)' ),
</ins><span class="cx" style="display: block; padding: 0 10px">                 );
</span><span class="cx" style="display: block; padding: 0 10px">                wp_localize_script( 'nav-menu', 'menus', $nav_menus_l10n );
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizenavmenuitemcontrolphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php      2024-06-03 20:25:37 UTC (rev 58305)
+++ trunk/src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php        2024-06-03 20:33:03 UTC (rev 58306)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -77,10 +77,22 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                </span>
</span><span class="cx" style="display: block; padding: 0 10px">                                <span class="item-controls">
</span><span class="cx" style="display: block; padding: 0 10px">                                        <button type="button" class="button-link item-edit" aria-expanded="false"><span class="screen-reader-text">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        <?php
-                                               /* translators: 1: Title of a menu item, 2: Type of a menu item. */
-                                               printf( __( 'Edit menu item: %1$s (%2$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
-                                       ?>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 <# if ( 0 === data.depth ) { #>
+                                               <?php
+                                               /* translators: 1: Title of a menu item, 2: Type of a menu item. 3: Item index, 4: Total items. */
+                                               printf( __( 'Edit %1$s (%2$s, %3$d of %4$d)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '' );
+                                               ?>
+                                       <# } else if ( 1 === data.depth ) { #>
+                                               <?php
+                                                       /* translators: 1: Title of a menu item, 2: Type of a menu item, 3, Item index, 4, Total items, 5: Item parent. */
+                                                       printf( __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '', '' );
+                                               ?>
+                                       <# } else { #>
+                                               <?php
+                                                       /* translators: 1: Title of a menu item, 2: Type of a menu item, 3, Item index, 4, Total items, 5: Item parent, 6: Item depth. */
+                                                       printf( __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s, level %6$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '', '', '{{data.depth}}' );
+                                               ?>
+                                       <# } #>
</ins><span class="cx" style="display: block; padding: 0 10px">                                         </span><span class="toggle-indicator" aria-hidden="true"></span></button>
</span><span class="cx" style="display: block; padding: 0 10px">                                        <button type="button" class="button-link item-delete submitdelete deletion"><span class="screen-reader-text">
</span><span class="cx" style="display: block; padding: 0 10px">                                        <?php
</span></span></pre>
</div>
</div>

</body>
</html>