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 index 189e5a695c23a..ea94128e1dde2 100644 --- 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,11 +428,11 @@ 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" @@ -440,15 +440,17 @@ private static function get_responsive_container_markup( $attributes, $inner_blo 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
-
+
%2$s
@@ -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 index ba8e6d1a6683a..fb3919168a267 100644 --- 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 index ac6094c3d3eac..1d54f25b1a7cc 100644 --- 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();