Make WordPress Core

Changeset 55326


Ignore:
Timestamp:
02/14/2023 12:36:32 AM (13 months ago)
Author:
joedolson
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/admin/common.js

    r54392 r55326  
    17031703            } );
    17041704
     1705            // Close sidebar when focus moves outside of toggle and sidebar.
     1706            $( '#wp-admin-bar-menu-toggle, #adminmenumain' ).on( 'focusout', function( e ) {
     1707                var focusIsInToggle, focusIsInSidebar;
     1708
     1709                if ( ! $wpwrap.hasClass( 'wp-responsive-open' ) || ! document.hasFocus() ) {
     1710                    return;
     1711                }
     1712                // A brief delay is required to allow focus to switch to another element.
     1713                setTimeout( function() {
     1714                    focusIsInToggle  = $.contains( $( '#wp-admin-bar-menu-toggle' )[0], $( ':focus' )[0] );
     1715                    focusIsInSidebar = $.contains( $( '#adminmenumain' )[0], $( ':focus' )[0] );
     1716
     1717                    if ( ! focusIsInToggle && ! focusIsInSidebar ) {
     1718                        $( '#wp-admin-bar-menu-toggle' ).trigger( 'click.wp-responsive' );
     1719                    }
     1720                }, 10 );
     1721            } );
     1722
     1723
    17051724            // Add menu events.
    17061725            $adminmenu.on( 'click.wp-responsive', 'li.wp-has-submenu > a', function( event ) {
     
    17101729
    17111730                $( this ).parent( 'li' ).toggleClass( 'selected' );
     1731                $( this ).trigger( 'focus' );
    17121732                event.preventDefault();
    17131733            });
Note: See TracChangeset for help on using the changeset viewer.