WordPress.org

Make WordPress Core

Ticket #48894: 48894.patch

File 48894.patch, 6.0 KB (added by mukesh27, 12 months ago)

Updated patch.

  • src/js/_enqueues/lib/admin-bar.js

     
    1616        document.addEventListener( 'DOMContentLoaded', function() {
    1717                var adminBar = document.getElementById( 'wpadminbar' ),
    1818                        topMenuItems,
     19                        toggleMenuItems,
    1920                        allMenuItems,
    2021                        adminBarLogout,
    2122                        adminBarSearchForm,
     
    3031                }
    3132
    3233                topMenuItems = adminBar.querySelectorAll( 'li.menupop' );
     34                toggleMenuItems = adminBar.querySelectorAll( 'li.menupop > .ab-item' );
    3335                allMenuItems = adminBar.querySelectorAll( '.ab-item' );
    3436                adminBarLogout = document.getElementById( 'wp-admin-bar-logout' );
    3537                adminBarSearchForm = document.getElementById( 'adminbarsearch' );
     
    5658                                }
    5759
    5860                                adminBar.removeEventListener( 'touchstart', bindMobileEvents );
     61
     62                                for ( i = 0; i < toggleMenuItems.length; i++ ) {
     63                                        // Remove click and keyboard event handlers that interfere with mobile behaviour.
     64                                        toggleMenuItems[i].removeEventListener( 'keydown', handleKeyDown );
     65                                        toggleMenuItems[i].removeEventListener( 'keyup', handleKeyUp );
     66                                        toggleMenuItems[i].removeEventListener( 'click', handleClick );
     67                                }
    5968                        } );
    6069                }
    6170
     71                document.addEventListener( 'click', closeOpenMenus );
     72                document.addEventListener( 'keyup', closeOpenMenus );
     73
    6274                // Scroll page to top when clicking on the admin bar.
    6375                adminBar.addEventListener( 'click', scrollToTop );
    6476
    65                 for ( i = 0; i < topMenuItems.length; i++ ) {
    66                         // Adds or removes the hover class based on the hover intent.
    67                         window.hoverintent(
    68                                 topMenuItems[i],
    69                                 addClass.bind( null, topMenuItems[i], 'hover' ),
    70                                 removeClass.bind( null, topMenuItems[i], 'hover' )
    71                         ).options( {
    72                                 timeout: 180
    73                         } );
    74 
    75                         // Toggle hover class if the enter key is pressed.
    76                         topMenuItems[i].addEventListener( 'keydown', toggleHoverIfEnter );
    77                 }
    78 
    7977                // Remove hover class if the escape key is pressed.
    8078                for ( i = 0; i < allMenuItems.length; i++ ) {
    8179                        allMenuItems[i].addEventListener( 'keydown', removeHoverIfEscape );
    8280                }
    8381
     82                for ( i = 0; i < toggleMenuItems.length; i++ ) {
     83                        // Make the menu dropdown toggles be perceived and behave as buttons.
     84                        toggleMenuItems[i].setAttribute( 'role', 'button' );
     85                        toggleMenuItems[i].setAttribute( 'aria-expanded', 'false' );
     86
     87                        // Prevent default for Space.
     88                        toggleMenuItems[i].addEventListener( 'keydown', handleKeyDown );
     89                        // Handle opening/closing menus with Space.
     90                        toggleMenuItems[i].addEventListener( 'keyup', handleKeyUp );
     91                        // Handle opening/closing menus with click.
     92                        toggleMenuItems[i].addEventListener( 'click', handleClick );
     93                }
     94
    8495                if ( adminBarSearchForm ) {
    8596                        adminBarSearchInput = document.getElementById( 'adminbar-search' );
    8697
     
    114125                        adminBarLogout.addEventListener( 'click', emptySessionStorage );
    115126                }
    116127        } );
     128       
     129        /**
     130         * Closes all open menus.
     131         *
     132         * @since 5.6.0
     133         *
     134         * @param {Event} event The captured event.
     135         */
     136        function closeOpenMenus( event ) {
     137                for ( i = 0; i < toggleMenuItems.length; i++ ) {
     138                        var wrapper = getClosest( toggleMenuItems[i], '.menupop' );
     139                        if ( wrapper.contains( event.target )  ) {
     140                                continue;
     141                        }
     142                        if ( wrapper.classList.contains( 'hover' ) ) {
     143                                wrapper.classList.remove( 'hover' );
     144                        }
     145                        if ( toggleMenuItems[i].getAttribute('aria-expanded') === 'true' ) {
     146                                toggleMenuItems[i].setAttribute( 'aria-expanded', 'false' );
     147                        }
     148                }
     149        }
    117150
    118151        /**
     152         * Updates the My Account menu aria-expanded attribute.
     153         *
     154         * @since 5.6.0
     155         *
     156         * @param {HTMLElement} element The element to toggle aria-expanded on.
     157         */
     158        function toggleAriaExpanded( element ) {
     159                if ( element.getAttribute('aria-expanded') === 'true' ) {
     160                        element.setAttribute( 'aria-expanded', 'false' );
     161                } else {
     162                        element.setAttribute( 'aria-expanded', 'true' );
     163                }
     164        }
     165
     166        /**
    119167         * Remove hover class for top level menu item when escape is pressed.
    120168         *
    121169         * @since 5.3.1
     
    123171         * @param {Event} event The keydown event.
    124172         */
    125173        function removeHoverIfEscape( event ) {
    126                 var wrapper;
     174                var wrapper,
     175                        toggle;
    127176
    128177                if ( event.which !== 27 ) {
    129178                        return;
     
    131180
    132181                wrapper = getClosest( event.target, '.menupop' );
    133182
     183                toggle = wrapper.querySelector( '.menupop > .ab-item' );
     184
    134185                if ( ! wrapper ) {
    135186                        return;
    136187                }
    137188
    138                 wrapper.querySelector( '.menupop > .ab-item' ).focus();
     189                toggle.focus();
     190                toggleAriaExpanded( toggle );
    139191                removeClass( wrapper, 'hover' );
    140192        }
    141193
    142194        /**
    143          * Toggle hover class for top level menu item when enter is pressed.
     195         * Handles the click event on dropdown toggles.
    144196         *
    145          * @since 5.3.1
     197         * @since 5.6.0
    146198         *
     199         * @param {Event} event The click event.
     200         */
     201        function handleClick( event ) {
     202                event.preventDefault();
     203                var wrapper = getClosest( event.target, '.menupop' );
     204                wrapper.classList.toggle( 'hover' );
     205                toggleAriaExpanded( getClosest( event.target, '.ab-item' ) );
     206        }
     207
     208        /**
     209         * Handles the keydown event on dropdown toggles.
     210         *
     211         * @since 5.6.0
     212         *
    147213         * @param {Event} event The keydown event.
    148214         */
    149         function toggleHoverIfEnter( event ) {
    150                 var wrapper;
    151 
    152                 if ( event.which !== 13 ) {
    153                         return;
     215        function handleKeyDown( event ) {
     216                if ( event.which === 32 ) {
     217                        event.preventDefault();
    154218                }
     219        }
    155220
    156                 if ( !! getClosest( event.target, '.ab-sub-wrapper' ) ) {
     221        /**
     222         * Handles the keyup event on dropdown toggles.
     223         *
     224         * @since 5.6.0
     225         *
     226         * @param {Event} event The keyup event.
     227         */
     228        function handleKeyUp( event ) {
     229                if ( event.which !== 32 ) {
    157230                        return;
    158231                }
    159232
    160                 wrapper = getClosest( event.target, '.menupop' );
     233                var wrapper = getClosest( event.target, '.menupop' );
    161234
    162                 if ( ! wrapper ) {
     235                if (
     236                        ! wrapper ||
     237                        !! getClosest( event.target, '.ab-sub-wrapper' )
     238                ) {
    163239                        return;
    164240                }
    165241
    166242                event.preventDefault();
    167243
    168                 if ( hasClass( wrapper, 'hover' ) ) {
    169                         removeClass( wrapper, 'hover' );
    170                 } else {
    171                         addClass( wrapper, 'hover' );
    172                 }
     244                wrapper.classList.toggle( 'hover' );
     245                toggleAriaExpanded( event.target );
    173246        }
    174247
    175248        /**