Navigation Block: Use dom.focus for focus control (#57362)

* Navigation Block: Use dom.focus for focus control * Try adding a focus trap test for Safari * Don't use dom package
WordPress · Dec 28, 2023 · 3f6c738 · 3f6c738
1 parent 9c8001a
commit 3f6c738
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php b/lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php
@@ -428,27 +428,29 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 		$responsive_dialog_directives    = '';
 		$close_button_directives         = '';
 		if ( $should_load_view_script ) {
-			$open_button_directives          = '
+			$open_button_directives                  = '
 				data-wp-on--click="actions.openMenuOnClick"
 				data-wp-on--keydown="actions.handleMenuKeydown"
 			';
-			$responsive_container_directives = '
+			$responsive_container_directives         = '
 				data-wp-class--has-modal-open="state.isMenuOpen"
 				data-wp-class--is-menu-open="state.isMenuOpen"
 				data-wp-watch="callbacks.initMenu"
 				data-wp-on--keydown="actions.handleMenuKeydown"
 				data-wp-on--focusout="actions.handleMenuFocusout"
 				tabindex="-1"
 			';
-			$responsive_dialog_directives    = '
+			$responsive_dialog_directives            = '
 				data-wp-bind--aria-modal="state.ariaModal"
 				data-wp-bind--aria-label="state.ariaLabel"
 				data-wp-bind--role="state.roleAttribute"
-				data-wp-watch="callbacks.focusFirstElement"
 			';
-			$close_button_directives         = '
+			$close_button_directives                 = '
 				data-wp-on--click="actions.closeMenuOnClick"
 			';
+			$responsive_container_content_directives = '
+				data-wp-watch="callbacks.focusFirstElement"
+			';
 		}
 
 		return sprintf(
@@ -457,7 +459,7 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 					<div class="wp-block-navigation__responsive-close" tabindex="-1">
 						<div class="wp-block-navigation__responsive-dialog" %12$s>
 							<button %4$s class="wp-block-navigation__responsive-container-close" %13$s>%9$s</button>
-							<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
+							<div class="wp-block-navigation__responsive-container-content" %14$s id="%1$s-content">
 								%2$s
 							</div>
 						</div>
@@ -475,7 +477,8 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 			$open_button_directives,
 			$responsive_container_directives,
 			$responsive_dialog_directives,
-			$close_button_directives
+			$close_button_directives,
+			$responsive_container_content_directives
 		);
 	}
 

diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
@@ -180,9 +180,9 @@ const { state, actions } = store( 'core/navigation', {
 		focusFirstElement() {
 			const { ref } = getElement();
 			if ( state.isMenuOpen ) {
-				ref.querySelector(
-					'.wp-block-navigation-item > *:first-child'
-				).focus();
+				const focusableElements =
+					ref.querySelectorAll( focusableSelectors );
+				focusableElements?.[ 0 ]?.focus();
 			}
 		},
 	},

diff --git a/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js b/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js
@@ -112,7 +112,11 @@ test.describe( 'Navigation block - Frontend interactivity', () => {
 			// Test: overlay menu focuses on first element after opening
 			await expect( overlayMenuFirstElement ).toBeFocused();
 
-			// Not Tested: overlay menu traps focus
+			// Test: overlay menu traps focus
+			await pageUtils.pressKeys( 'Tab', { times: 2, delay: 50 } );
+			await expect( closeMenuButton ).toBeFocused();
+			await pageUtils.pressKeys( 'Shift+Tab', { times: 2, delay: 50 } );
+			await expect( overlayMenuFirstElement ).toBeFocused();
 
 			// Test: overlay menu closes on click on close menu button
 			await closeMenuButton.click();