diff --git a/src/js/_enqueues/admin/common.js b/src/js/_enqueues/admin/common.js index c3d49310e8897..68fd58690e42e 100644 --- a/src/js/_enqueues/admin/common.js +++ b/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(); }, diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index aa6a8bc1414aa..9b92855a9f994 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -101,14 +101,14 @@ } #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; @@ -167,7 +167,7 @@ /* 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; @@ -175,7 +175,7 @@ .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; } @@ -647,7 +647,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; } diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 91d6a4b66bc8c..c025ffa3ce373 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/wp-admin/css/colors/_admin.scss @@ -268,7 +268,7 @@ input[type="radio"]:focus { #adminmenu a:hover, #adminmenu li.menu-top:hover, #adminmenu li.opensub > a.menu-top, -#adminmenu li > a.menu-top:focus { +#adminmenu li > a.menu-top:focus-visible { color: variables.$menu-highlight-text; background-color: variables.$menu-highlight-background; } diff --git a/src/wp-admin/css/view-transitions.css b/src/wp-admin/css/view-transitions.css index 538a90b502f9e..d67055ba12336 100644 --- a/src/wp-admin/css/view-transitions.css +++ b/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(), none); } } diff --git a/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php b/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php index 0e977e69606f9..e02926ce9b29e 100644 --- a/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php +++ b/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 ); }