Admin Menu: Fix multiple active menu highlights on mobile.

src/js/_enqueues/admin/common.js

@@ -1827,16 +1827,34 @@ $( function() {
 
 			// Add menu events.
 			$adminmenu.on( 'click.wp-responsive', 'li.wp-has-submenu > a', function( event ) {
+				var $link, $menuItem, state;
+
 				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' );
+
+				$link      = $( this );
+				$menuItem  = $link.parent( 'li' );
+				state      = ( 'false' === $link.attr( 'aria-expanded' ) ) ? 'true' : 'false';
+
+				$adminmenu.find( 'li.selected' ).not( $menuItem ).removeClass( 'selected' )
+					.children( 'a' ).attr( 'aria-expanded', 'false' );
+
+				$menuItem.toggleClass( 'selected' );
+				$link.attr( 'aria-expanded', state );
+				$link.trigger( 'focus' );
 				event.preventDefault();
 			});
 
+			$adminmenu.on( 'click.wp-responsive', '.wp-submenu a', function() {
+				if ( ! $adminmenu.data( 'wp-responsive' ) ) {
+					return;
+				}
+
+				$adminmenu.find( 'li.selected' ).removeClass( 'selected' )
+					.children( 'a' ).attr( 'aria-expanded', 'false' );
+			});
+
 			self.trigger();
 			$document.on( 'wp-window-resized.wp-responsive', this.trigger.bind( this ) );
 
@@ -1886,6 +1904,8 @@ $( function() {
 			}
 
 			$adminmenu.data( 'wp-responsive', 1 );
+			$adminmenu.find( 'li.selected' ).not( '.wp-has-current-submenu' ).removeClass( 'selected' )
+				.children( 'a' ).attr( 'aria-expanded', 'false' );
 			this.disableSortables();
 		},
 

src/wp-admin/css/admin-menu.css

@@ -101,20 +101,24 @@
 }
 
 #adminmenu a:hover,
-#adminmenu li.menu-top > a:focus,
+#adminmenu li.menu-top > a:focus-visible,
 #adminmenu .wp-submenu a:hover,
-#adminmenu .wp-submenu a:focus {
+#adminmenu .wp-submenu a:focus-visible {
 	color: #72aee6;
 }
 
 #adminmenu a:hover,
-#adminmenu a:focus,
+#adminmenu a:focus-visible,
 .folded #adminmenu .wp-submenu-head:hover {
 	box-shadow: inset 4px 0 0 0 currentColor;
 	transition: box-shadow .1s linear;
 	border-radius: 0;
 }
 
+#adminmenu li.wp-not-current-submenu > a.menu-top:focus:not(:focus-visible) {
+	box-shadow: none;
+}
+
 #adminmenu li.menu-top {
 	border: none;
 	min-height: 34px;
@@ -167,15 +171,20 @@
 /* ensure that wp-submenu's box shadow doesn't appear on top of the focused menu item's background. */
 #adminmenu li.menu-top:hover,
 #adminmenu li.opensub > a.menu-top,
-#adminmenu li > a.menu-top:focus {
+#adminmenu li > a.menu-top:focus-visible {
 	position: relative;
 	background-color: #1d2327;
 	color: #72aee6;
 }
 
+#adminmenu li.wp-not-current-submenu > a.menu-top:focus:not(:focus-visible) {
+	background-color: transparent;
+	color: #f0f0f1;
+}
+
 .folded #adminmenu li.menu-top:hover,
 .folded #adminmenu li.opensub > a.menu-top,
-.folded #adminmenu li > a.menu-top:focus {
+.folded #adminmenu li > a.menu-top:focus-visible {
 	z-index: 10000;
 }
 
@@ -641,7 +650,7 @@ li#wp-admin-bar-menu-toggle {
 
 	.auto-fold #adminmenu li.menu-top:hover,
 	.auto-fold #adminmenu li.opensub > a.menu-top,
-	.auto-fold #adminmenu li > a.menu-top:focus {
+	.auto-fold #adminmenu li > a.menu-top:focus-visible {
 		z-index: 10000;
 	}
 

src/wp-admin/css/view-transitions.css

@@ -3,7 +3,8 @@
 		navigation: auto;
 	}
 
-	#adminmenu > .menu-top {
+	#adminmenu > .menu-top.wp-has-current-submenu,
+	#adminmenu > .menu-top.current {
 		view-transition-name: attr(id type(<custom-ident>), none);
 	}
 }

tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php

@@ -49,6 +49,7 @@ public function test_inline_css_included() {
 		$this->assertIsArray( $after_data, 'Expected `after` data to be an array.' );
 		$css = wp_get_view_transitions_admin_css();
 		$this->assertStringContainsString( '@view-transition', $css );
+		$this->assertStringContainsString( '.menu-top.wp-has-current-submenu', $css );
 		$this->assertContains( $css, $after_data );
 	}