Administration: A11y: Use aria-haspopup only if item has popup behavior.

Update behavior of admin menu so that the `aria-haspopup` attribute is only applied in responsive mode, when there is a popup behavior present. Add `aria-expanded` attributes to report current popup state.

Props afercia, khokansardar, ryokuhi, joedolson.
Fixes #43095.
Built from https://develop.svn.wordpress.org/trunk@58449


git-svn-id: http://core.svn.wordpress.org/trunk@57898 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/common.js

@@ -902,27 +902,6 @@ $( function() {
 		$document.trigger( 'wp-collapse-menu', { state: menuState } );
 	});
 
-	/**
-	 * Handles the `aria-haspopup` attribute on the current menu item when it has a submenu.
-	 *
-	 * @since 4.4.0
-	 *
-	 * @return {void}
-	 */
-	function currentMenuItemHasPopup() {
-		var $current = $( 'a.wp-has-current-submenu' );
-
-		if ( 'folded' === menuState ) {
-			// When folded or auto-folded and not responsive view, the current menu item does have a fly-out sub-menu.
-			$current.attr( 'aria-haspopup', 'true' );
-		} else {
-			// When expanded or in responsive view, reset aria-haspopup.
-			$current.attr( 'aria-haspopup', 'false' );
-		}
-	}
-
-	$document.on( 'wp-menu-state-set wp-collapse-menu wp-responsive-activate wp-responsive-deactivate', currentMenuItemHasPopup );
-
 	/**
 	 * Ensures an admin submenu is within the visual viewport.
 	 *
@@ -1695,8 +1674,10 @@ $( function() {
 			// Modify functionality based on custom activate/deactivate event.
 			$document.on( 'wp-responsive-activate.wp-responsive', function() {
 				self.activate();
+				self.toggleAriaHasPopup( 'add' );
 			}).on( 'wp-responsive-deactivate.wp-responsive', function() {
 				self.deactivate();
+				self.toggleAriaHasPopup( 'remove' );
 			});
 
 			$( '#wp-admin-bar-menu-toggle a' ).attr( 'aria-expanded', 'false' );
@@ -1762,8 +1743,9 @@ $( function() {
 				if ( ! $adminmenu.data('wp-responsive') ) {
 					return;
 				}
-
+				let state = ( 'false' === $( this ).attr( 'aria-expanded' ) ) ? 'true' : 'false';
 				$( this ).parent( 'li' ).toggleClass( 'selected' );
+				$( this ).attr( 'aria-expanded', state );
 				$( this ).trigger( 'focus' );
 				event.preventDefault();
 			});
@@ -1837,6 +1819,34 @@ $( function() {
 			this.maybeDisableSortables();
 		},
 
+		/**
+		 * Toggles the aria-haspopup attribute for the responsive admin menu.
+		 *
+		 * The aria-haspopup attribute is only necessary for the responsive menu.
+		 * See ticket https://core.trac.wordpress.org/ticket/43095
+		 *
+		 * @since 6.6.0
+		 *
+		 * @param {string} action Whether to add or remove the aria-haspopup attribute.
+		 *
+		 * @return {void}
+		 */
+		toggleAriaHasPopup: function( action ) {
+			var elements = $adminmenu.find( '[data-ariahaspopup]' );
+
+			if ( action === 'add' ) {
+				elements.each( function() {
+					$( this ).attr( 'aria-haspopup', 'menu' ).attr( 'aria-expanded', 'false' );
+				} );
+
+				return;
+			}
+
+			elements.each( function() {
+				$( this ).removeAttr( 'aria-haspopup' ).removeAttr( 'aria-expanded' );
+			} );
+		},
+
 		/**
 		 * Sets the responsiveness and enables the overlay based on the viewport width.
 		 *
@@ -2034,7 +2044,6 @@ $( function() {
 	window.wpResponsive.init();
 	setPinMenu();
 	setMenuState();
-	currentMenuItemHasPopup();
 	makeNoticesDismissible();
 	aria_button_if_js();
 

wp-admin/menu-header.php

@@ -98,7 +98,7 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
 		} else {
 			$class[] = 'wp-not-current-submenu';
 			if ( ! empty( $submenu_items ) ) {
-				$aria_attributes .= 'aria-haspopup="true"';
+				$aria_attributes .= 'data-ariahaspopup';
 			}
 		}
 

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.6-beta3-58447';
+$wp_version = '6.6-beta3-58449';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.