Navigation block: Only focus submenu trigger on escape key press (#41986

)

* Only focus submenu trigger on escape key press.

* Optional focus.

packages/block-library/src/navigation-submenu/view.js

@@ -3,8 +3,6 @@ const closeSubmenus = ( element ) => {
 		.querySelectorAll( '[aria-expanded="true"]' )
 		.forEach( ( toggle ) => {
 			toggle.setAttribute( 'aria-expanded', 'false' );
-			// Always focus the trigger, this becomes especially useful in closing submenus with escape key to ensure focus doesn't get trapped.
-			toggle.focus();
 		} );
 };
 
@@ -57,11 +55,13 @@ document.addEventListener( 'keyup', function ( event ) {
 		'.wp-block-navigation-submenu'
 	);
 	submenuBlocks.forEach( ( block ) => {
-		if (
-			! block.contains( event.target ) ||
-			( block.contains( event.target ) && event.key === 'Escape' )
-		) {
+		if ( ! block.contains( event.target ) ) {
+			closeSubmenus( block );
+		} else if ( event.key === 'Escape' ) {
+			const toggle = block.querySelector( '[aria-expanded="true"]' );
 			closeSubmenus( block );
+			// Focus the submenu trigger so focus does not get trapped in the closed submenu.
+			toggle?.focus();
 		}
 	} );
 } );

packages/block-library/src/navigation/view.js

@@ -4,8 +4,6 @@ function closeSubmenus( element ) {
 		.querySelectorAll( '[aria-expanded="true"]' )
 		.forEach( function ( toggle ) {
 			toggle.setAttribute( 'aria-expanded', 'false' );
-			// Always focus the trigger, this becomes especially useful in closing submenus with escape key to ensure focus doesn't get trapped.
-			toggle.focus();
 		} );
 }
 
@@ -63,11 +61,13 @@ window.addEventListener( 'load', () => {
 			'.wp-block-navigation-item.has-child'
 		);
 		submenuBlocks.forEach( function ( block ) {
-			if (
-				! block.contains( event.target ) ||
-				( block.contains( event.target ) && event.key === 'Escape' )
-			) {
+			if ( ! block.contains( event.target ) ) {
+				closeSubmenus( block );
+			} else if ( event.key === 'Escape' ) {
+				const toggle = block.querySelector( '[aria-expanded="true"]' );
 				closeSubmenus( block );
+				// Focus the submenu trigger so focus does not get trapped in the closed submenu.
+				toggle?.focus();
 			}
 		} );
 	} );