Changeset 51946

Timestamp:

10/28/2021 05:27:04 PM (3 years ago)

Author:

joedolson

Message:

Administration: Hide mobile menu on focusout.

Closes the admin menu on mobile devices when keyboard focus moves outside of the menu or menu toggle elements. Improves the usability of the menu on mobile by allowing closure anywhere outside the menu rather than only on the toggle.

Props kaneva, costdev, sabernhardt
Fixes #53587.

File:

• trunk/src/js/_enqueues/admin/common.js (modified) (1 diff)

trunk/src/js/_enqueues/admin/common.js

@@ -1696 +1696 @@
             } );
 
+            // Close sidebar when focus moves outside of toggle and sidebar.
+            $( '#wp-admin-bar-menu-toggle, #adminmenumain' ).on( 'focusout', function() {
+                var focusIsInToggle, focusIsInSidebar;
+
+                if ( ! $wpwrap.hasClass( 'wp-responsive-open' ) ) {
+                    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 ) {