Changeset 56810

Timestamp:

10/09/2023 11:00:11 PM (10 months ago)

Author:

joedolson

Message:

Administration: Fix unusable mobile admin menu in Safari.

Replace the focusout event handler added in [55326] with a combination of blur and keyup handler. This change handles Safari not setting focus on clicked elements.

Props afercia, joedolson, travel_girl, oglekler, rajinsharwar, marybaum, rcorrales, binsaifullah, shubhamsedani, ashikur698.
Fixes #58912.

File:

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

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

@@ -1703 +1703 @@
             } );
 
-            // Close sidebar when focus moves outside of toggle and sidebar.
-            $( '#wp-admin-bar-menu-toggle, #adminmenumain' ).on( 'focusout', function() {
-                var focusIsInToggle, focusIsInSidebar;
-
+            // Close sidebar when target moves outside of toggle and sidebar.
+            $( document ).on( 'click', function( event ) {
                 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' );
+
+                var focusIsInToggle  = $.contains( $( '#wp-admin-bar-menu-toggle' )[0], event.target );
+                var focusIsInSidebar = $.contains( $( '#adminmenuwrap' )[0], event.target );
+
+                if ( ! focusIsInToggle && ! focusIsInSidebar ) {
+                    $( '#wp-admin-bar-menu-toggle' ).trigger( 'click.wp-responsive' );
+                }
+            } );
+
+            // Close sidebar when a keypress completes outside of toggle and sidebar.
+            $( document ).on( 'keyup', function( event ) {
+                var toggleButton   = $( '#wp-admin-bar-menu-toggle' )[0];
+                if ( ! $wpwrap.hasClass( 'wp-responsive-open' ) ) {
+                    return;
+                }
+                if ( 27 === event.keyCode ) {
+                    $( toggleButton ).trigger( 'click.wp-responsive' );
+                    $( toggleButton ).find( 'a' ).trigger( 'focus' );
+                } else {
+                    if ( 9 === event.keyCode ) {
+                        var sidebar        = $( '#adminmenuwrap' )[0];
+                        var focusedElement = event.relatedTarget || document.activeElement;
+                        // A brief delay is required to allow focus to switch to another element.
+                        setTimeout( function() {
+                            var focusIsInToggle  = $.contains( toggleButton, focusedElement );
+                            var focusIsInSidebar = $.contains( sidebar, focusedElement );
+                            
+                            if ( ! focusIsInToggle && ! focusIsInSidebar ) {
+                                $( toggleButton ).trigger( 'click.wp-responsive' );
+                            }
+                        }, 10 );
                     }
-                }, 10 );
-            } );
-
+                }
+            });
 
             // Add menu events.