Change code to be more declarative and simple

packages/block-library/src/navigation-submenu/index.php

@@ -125,7 +125,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	);
 
 	if ( $is_interactivity_api_enabled ) {
-		$html = '<li data-wp-context=\' { "isSubmenuOpen": false } \'' . $wrapper_attributes . '>';
+		$html = '<li data-wp-context=\' { "isMenuOpen": false, "trapFocus": false } \'' . $wrapper_attributes . '>';
 	} else {
 		$html = '<li ' . $wrapper_attributes . '>';
 	}
@@ -176,15 +176,40 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			// The submenu icon is rendered in a button here
 			// so that there's a clickable element to open the submenu.
 			if ( $is_interactivity_api_enabled ) {
-				$html .= '<button data-wp-on.click="actions.core.navigation.openSubmenu" aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false" data-wp-bind.aria-expanded="context.isSubmenuOpen">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
+				// Once directives priorities are supported,
+				// we should be able to move the `wp-on.keydown`
+				// and `wp-on.focusout` to the parent <li> and
+				// remove it from here and the <ul>
+				$html .= '<button
+							data-wp-on.click="actions.core.navigation.openMenu"
+							data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+							data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+							aria-label="' . esc_attr( $aria_label ) . '"
+							class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle"
+							aria-expanded="false"
+							data-wp-bind.aria-expanded="context.isMenuOpen"
+						>'
+					. block_core_navigation_submenu_render_submenu_icon() .
+					'</button>';
 			} else {
 				$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
 			}
 		}
 	} else {
 		// If menus open on click, we render the parent as a button.
 		if ( $is_interactivity_api_enabled ) {
-			$html .= '<button data-wp-on.click="actions.core.navigation.openSubmenu" aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false" data-wp-bind.aria-expanded="context.isSubmenuOpen">';
+			// Once directives priorities are supported,
+			// we should be able to move the `wp-on.keydown`
+			// and `wp-on.focusout` to the parent <li> and
+			// remove it from here and the <ul>
+			$html .= '<button
+						data-wp-on.click="actions.core.navigation.openMenu"
+						data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+						aria-label="' . esc_attr( $aria_label ) . '"
+						class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
+						aria-expanded="false"
+						data-wp-bind.aria-expanded="context.isMenuOpen"
+					>';
 		} else {
 			$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
 		}
@@ -253,8 +278,9 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		if ( $is_interactivity_api_enabled ) {
 			$html .= sprintf(
 				'<ul
-					data-wp-effect="effects.core.navigation.handleSubmenu" 
-					data-wp-context=\'{ "submenuButton": null }\'
+					data-wp-effect="effects.core.navigation.initModal"
+					data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+					data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
 					%s
 				>
 					%s

packages/block-library/src/navigation/index.php

@@ -819,8 +819,14 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	if ( $is_interactivity_api_enabled ) {
 		$responsive_container_markup = sprintf(
+			// Once directives priorities are supported,
+			// we should be able to move the `wp-on.keydown`
+			// and `wp-on.focusout` to the parent <nav> and
+			// remove it from here and the <div>
 			'<button 
 				data-wp-on.click="actions.core.navigation.openMenu"
+				data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+				data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
 				aria-haspopup="true"
 				%3$s
 				class="%6$s""
@@ -832,8 +838,9 @@ class="%5$s"
 				data-wp-class.has-modal-open="context.isMenuOpen"
 				data-wp-class.is-menu-open="context.isMenuOpen"
 				data-wp-bind.aria-hidden="!context.isMenuOpen"
-				data-wp-effect="effects.core.navigation.focusElement"
-				data-wp-on.keydown="effects.core.navigation.focusElement"
+				data-wp-effect="effects.core.navigation.initModal"
+				data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+				data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
 				style="%7$s"
 				id="%1$s"
 			>
@@ -843,6 +850,7 @@ class="wp-block-navigation__responsive-dialog"
 						aria-label="%8$s"
 						data-wp-bind.aria-modal="context.isMenuOpen"
 						data-wp-bind.role="context.roleAttribute"
+						data-wp-effect="effects.core.navigation.focusFirstElement"
 					>
 						<button
 							%4$s
@@ -898,7 +906,7 @@ class="wp-block-navigation__responsive-container-close"
 		return sprintf(
 			'<nav
 				data-wp-island
-				data-wp-context=\'{ "isMenuOpen": false, "focusedElement": null, "menuButton": null, "roleAttribute": "" }\'
+				data-wp-context=\'{ "isMenuOpen": false, "trapFocus": true, "roleAttribute": "" }\'
 				%2$s
 			>
 				%3$s

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

@@ -9,126 +9,94 @@ store( {
 			navigation: {
 				openMenu: ( { context, ref } ) => {
 					context.isMenuOpen = true;
+					context.previousFocus = ref;
 					// Review how to move this to a selector or something similar
 					context.roleAttribute = 'dialog';
-					context.menuButton = ref;
 					// It adds a `has-modal-open` class to the <html> root
 					document.documentElement.classList.add( 'has-modal-open' );
 				},
 				closeMenu: ( { context } ) => {
 					context.isMenuOpen = false;
 					// Review how to move this to a selector or something similar
 					context.roleAttribute = '';
-					context.focusedElement = null;
-					context.menuButton.focus();
+					context.modal = null;
+					context.previousFocus = null;
 					// It removes the `has-modal-open` class to the <html> root
 					document.documentElement.classList.remove(
 						'has-modal-open'
 					);
 				},
-				openSubmenu: ( { context, ref } ) => {
-					context.isSubmenuOpen = true;
-					context.submenuButton = ref;
-				},
-				closeSubmenu: ( { context } ) => {
-					context.isSubmenuOpen = false;
-				},
-			},
-		},
-	},
-	effects: {
-		core: {
-			navigation: {
-				focusElement: async ( {
-					actions,
-					context,
-					tick,
-					ref,
-					event,
-				} ) => {
+				handleMenuKeydown: ( { actions, context, event } ) => {
 					if ( context.isMenuOpen ) {
+						// If Escape close the menu
 						if (
-							event?.key &&
-							event.key !== 'Escape' &&
-							event.key !== 'Tab'
+							event?.key === 'Escape' ||
+							event?.keyCode === 27
 						) {
-							return;
-						}
-
-						// On ESC, close the menu and focus the hamburger button
-						if ( event?.key === 'Escape' ) {
+							context.previousFocus.focus();
 							actions.core.navigation.closeMenu( { context } );
 							return;
 						}
 
-						// Until useSignalEffects is fixed: https://github.com/preactjs/signals/issues/228
-						await tick();
-
-						// Focus the first element when menu is open
-						if ( ! context.focusedElement ) {
-							ref.querySelector(
-								'.wp-block-navigation-item > *:first-child'
-							).focus();
-						}
-
-						// Focus the close button when it gets out of the modal
-						if ( event?.key === 'Tab' ) {
+						// Trap focus if set to true
+						if (
+							context.trapFocus &&
+							( event.key === 'Tab' || event.keyCode === 9 )
+						) {
+							// If shift + tab it change the direction
 							if (
-								window.document.activeElement.closest(
-									'.is-menu-open'
-								) !== ref
+								event.shiftKey &&
+								window.document.activeElement ===
+									context.firstFocusableElement
 							) {
-								ref.querySelector(
-									'button.wp-block-navigation__responsive-container-close'
-								).focus();
+								event.preventDefault();
+								context.lastFocusableElement.focus();
+							} else if (
+								! event.shiftKey &&
+								window.document.activeElement ===
+									context.lastFocusableElement
+							) {
+								event.preventDefault();
+								context.firstFocusableElement.focus();
 							}
 						}
-
-						context.focusedElement = window.document.activeElement;
 					}
 				},
-				handleSubmenu: async ( { actions, context, ref, tick } ) => {
-					if ( context.isSubmenuOpen ) {
-						async function closeSubmenu( e ) {
-							// Until useSignalEffects is fixed: https://github.com/preactjs/signals/issues/228
-							await tick();
-							// Only close submenu if it gets outside of it while tabbing
-							if (
-								e.key &&
-								e.key !== 'Escape' &&
-								ref.contains( window.document.activeElement )
-							) {
-								return;
-							}
-
-							if (
-								e.key === 'Escape' ||
-								! ref.contains( window.document.activeElement )
-							) {
-								document.removeEventListener(
-									'click',
-									closeSubmenu
-								);
-								document.removeEventListener(
-									'keydown',
-									closeSubmenu
-								);
-
-								actions.core.navigation.closeSubmenu( {
-									context,
-								} );
-							}
-
-							// Return focus to the button when closing with "Escape"
-							if ( e.key === 'Escape' ) {
-								context.submenuButton.focus();
-							}
+				handleMenuFocusout: ( { actions, context, event } ) => {
+					if ( context.isMenuOpen ) {
+						// If focus is outside modal (and in the document), close menu
+						if (
+							! context.modal.contains( event.relatedTarget ) &&
+							document.contains( event.relatedTarget )
+						) {
+							actions.core.navigation.closeMenu( { context } );
 						}
-
+					}
+				},
+			},
+		},
+	},
+	effects: {
+		core: {
+			navigation: {
+				initModal: async ( { context, ref } ) => {
+					if ( context.isMenuOpen ) {
+						const focusableElements = ref.querySelectorAll(
+							'a[href], button:not([disabled]), textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
+						);
+						context.modal = ref;
+						context.firstFocusableElement = focusableElements[ 0 ];
+						context.lastFocusableElement =
+							focusableElements[ focusableElements.length - 1 ];
+					}
+				},
+				focusFirstElement: async ( { context, tick, ref } ) => {
+					if ( context.isMenuOpen ) {
 						// Until useSignalEffects is fixed: https://github.com/preactjs/signals/issues/228
 						await tick();
-						document.addEventListener( 'click', closeSubmenu );
-						document.addEventListener( 'keydown', closeSubmenu );
+						ref.querySelector(
+							'.wp-block-navigation-item > *:first-child'
+						).focus();
 					}
 				},
 			},

packages/block-library/src/page-list/index.php

@@ -201,24 +201,42 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 		);
 
 		if ( $is_interactivity_api_enabled ) {
-			$markup .= '<li data-wp-context=\' { "isSubmenuOpen": false } \' class="wp-block-pages-list__item' . esc_attr( $css_class ) . '"' . $style_attribute . '>';
+			$markup .= '<li data-wp-context=\' { "isMenuOpen": false, "trapFocus": false } \' class="wp-block-pages-list__item' . esc_attr( $css_class ) . '"' . $style_attribute . '>';
 
 			if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
-				$markup .= '<button data-wp-on.click="actions.core.navigation.openSubmenu" data-wp-bind.aria-expanded="context.isSubmenuOpen" aria-label="' . esc_attr( $aria_label ) . '" class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . esc_html( $title ) .
-					'</button><span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
+				$markup .= '<button
+								data-wp-on.click="actions.core.navigation.openMenu"
+								data-wp-bind.aria-expanded="context.isMenuOpen"
+								data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+								data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+								aria-label="' . esc_attr( $aria_label ) . '"
+								class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle"
+								aria-expanded="false"
+							>' . esc_html( $title ) .
+					'</button>
+							<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
 			} else {
 				$markup .= '<a class="wp-block-pages-list__item__link' . esc_attr( $navigation_child_content_class ) . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . $title . '</a>';
 			}
 
 			if ( isset( $page['children'] ) ) {
 				if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) {
-					$markup .= '<button data-wp-on.click="actions.core.navigation.openSubmenu" data-wp-bind.aria-expanded="context.isSubmenuOpen" aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
+					$markup .= '<button
+									data-wp-on.click="actions.core.navigation.openMenu"
+									data-wp-bind.aria-expanded="context.isMenuOpen"
+									data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
+									data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+									aria-label="' . esc_attr( $aria_label ) . '"
+									class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle"
+									aria-expanded="false"
+								>';
 					$markup .= '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 					$markup .= '</button>';
 				}
 				$markup .= '<ul 
-								data-wp-effect="effects.core.navigation.handleSubmenu" 
-								data-wp-context=\'{ "submenuButton": null }\'
+								data-wp-effect="effects.core.navigation.initModal"
+								data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
+								data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
 								class="wp-block-navigation__submenu-container"
 							>';
 				$markup .= block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $is_nested, $active_page_ancestor_ids, $colors, $depth + 1 );