summaryrefslogtreecommitdiffstats
path: root/wp-admin/js/customize-nav-menus.js
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-09-19 04:51:18 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-09-19 04:51:18 +0000
commit0e41b5d52fdc6af6442816b5f465c9db9f84e126 (patch)
treee139a90049b158d4eed892d1662ee7f5c358fa31 /wp-admin/js/customize-nav-menus.js
parentAdding upstream version 6.5.5+dfsg1. (diff)
downloadwordpress-upstream.tar.xz
wordpress-upstream.zip
Adding upstream version 6.6.1+dfsg1.upstream/6.6.1+dfsg1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'wp-admin/js/customize-nav-menus.js')
-rw-r--r--wp-admin/js/customize-nav-menus.js99
1 files changed, 87 insertions, 12 deletions
diff --git a/wp-admin/js/customize-nav-menus.js b/wp-admin/js/customize-nav-menus.js
index 9dad3e1..2b5cea3 100644
--- a/wp-admin/js/customize-nav-menus.js
+++ b/wp-admin/js/customize-nav-menus.js
@@ -2,7 +2,7 @@
* @output wp-admin/js/customize-nav-menus.js
*/
-/* global _wpCustomizeNavMenusSettings, wpNavMenu, console */
+/* global menus, _wpCustomizeNavMenusSettings, wpNavMenu, console */
( function( api, wp, $ ) {
'use strict';
@@ -1132,6 +1132,8 @@
$( '#menu-to-edit' ).removeAttr( 'id' );
wpNavMenu.menuList.attr( 'id', 'menu-to-edit' ).addClass( 'menu' );
+ api.Menus.MenuItemControl.prototype.initAccessibility();
+
_.each( api.section( section.id ).controls(), function( control ) {
if ( 'nav_menu_item' === control.params.type ) {
control.actuallyEmbed();
@@ -1575,6 +1577,80 @@
},
/**
+ * 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 );
+ },
+
+ /**
* Override the embed() method to do nothing,
* so that the control isn't embedded on load,
* unless the containing section is already expanded.
@@ -1607,6 +1683,9 @@
}
control.renderContent();
control.deferred.embedded.resolve(); // This triggers control.ready().
+
+ // Mark all menu items as unprocessed.
+ $( 'button.item-edit' ).data( 'needs_accessibility_refresh', true );
},
/**
@@ -1679,22 +1758,15 @@
control.moveDown();
} else if ( isMoveLeft ) {
control.moveLeft();
- if ( 1 === control.params.depth ) {
- control.container.find( '.is-submenu' ).hide();
- } else {
- control.container.find( '.is-submenu' ).show();
- }
} else if ( isMoveRight ) {
control.moveRight();
control.params.depth += 1;
- if ( 0 === control.params.depth ) {
- control.container.find( '.is-submenu' ).hide();
- } else {
- control.container.find( '.is-submenu' ).show();
- }
}
-
+
moveBtn.focus(); // Re-focus after the container was moved.
+
+ // Mark all menu items as unprocessed.
+ $( 'button.item-edit' ).data( 'needs_accessibility_refresh', true );
} );
},
@@ -2726,6 +2798,9 @@
menuItemControl.setting.set( setting );
});
+
+ // Mark all menu items as unprocessed.
+ $( 'button.item-edit' ).data( 'needs_accessibility_refresh', true );
});
});