From a9fc43e79c7ea513b54bad96e03cfc55ca4b2bd5 Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Tue, 14 Feb 2023 00:36:32 +0000
Subject: Administration: Close admin menu when focus moves to body.

User should not have to reach the admin menu toggle in order to close the menu. This can be a problem for one-handed mobile use, users with small hands, and numerous other situational usages.

Close the admin menu when focus moves anywhere other than the menu or the menu toggle and the current document is active.

Props kaneva, sabernhardt, costdev, ryokuhi, hellofromtonya, dhusakovic, thelovekesh, joedolson.
Fixes #53587.

git-svn-id: https://develop.svn.wordpress.org/trunk@55326 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/js/_enqueues/admin/common.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

(limited to 'src/js/_enqueues/admin/common.js')

diff --git a/src/js/_enqueues/admin/common.js b/src/js/_enqueues/admin/common.js
index 41a53eb9a2..6da70c7147 100644
--- a/src/js/_enqueues/admin/common.js
+++ b/src/js/_enqueues/admin/common.js
@@ -1702,6 +1702,25 @@ $( function() {
 				}
 			} );
 
+			// Close sidebar when focus moves outside of toggle and sidebar.
+			$( '#wp-admin-bar-menu-toggle, #adminmenumain' ).on( 'focusout', function( e ) {
+				var focusIsInToggle, focusIsInSidebar;
+
+				if ( ! $wpwrap.hasClass( 'wp-responsive-open' ) || ! document.hasFocus() ) {
+					return;
+				}
+				// A brief delay is required to allow focus to switch to another element.
+				setTimeout( function() {
+					focusIsInToggle  = $.contains( $( '#wp-admin-bar-menu-toggle' )[0], $( ':focus' )[0] );
+					focusIsInSidebar = $.contains( $( '#adminmenumain' )[0], $( ':focus' )[0] );
+
+					if ( ! focusIsInToggle && ! focusIsInSidebar ) {
+						$( '#wp-admin-bar-menu-toggle' ).trigger( 'click.wp-responsive' );
+					}
+				}, 10 );
+			} );
+
+
 			// Add menu events.
 			$adminmenu.on( 'click.wp-responsive', 'li.wp-has-submenu > a', function( event ) {
 				if ( ! $adminmenu.data('wp-responsive') ) {
@@ -1709,6 +1728,7 @@ $( function() {
 				}
 
 				$( this ).parent( 'li' ).toggleClass( 'selected' );
+				$( this ).trigger( 'focus' );
 				event.preventDefault();
 			});
 
-- 
cgit v1.2.3