WordPress.org

Make WordPress Core

Ticket #48894: 48894.5.diff

File 48894.5.diff, 5.5 KB (added by isabel_brison, 15 months ago)

Addressed feedback on previous patch.

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

    diff --git a/src/js/_enqueues/lib/admin-bar.js b/src/js/_enqueues/lib/admin-bar.js
    index ea69ae7efe..bc8e9e1b6a 100644
    a b  
    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                                for ( i = 0; i < toggleMenuItems.length; i++ ) {
     62                                        // Remove click and keyboard event handlers that interfere with mobile behaviour.
     63                                        toggleMenuItems[i].removeEventListener( 'keydown', handleKeyDown );
     64                                        toggleMenuItems[i].removeEventListener( 'keyup', handleKeyUp );
     65                                        toggleMenuItems[i].removeEventListener( 'click', handleClick );
     66                                }
     67
    5968                        } );
    6069                }
    6170
    6271                // Scroll page to top when clicking on the admin bar.
    6372                adminBar.addEventListener( 'click', scrollToTop );
    6473
    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 
    7974                // Remove hover class if the escape key is pressed.
    8075                for ( i = 0; i < allMenuItems.length; i++ ) {
    8176                        allMenuItems[i].addEventListener( 'keydown', removeHoverIfEscape );
    8277                }
     78               
     79                for ( i = 0; i < toggleMenuItems.length; i++ ) {
     80                        // Make the menu dropdown toggles be perceived and behave as buttons.
     81                        toggleMenuItems[i].setAttribute( 'role', 'button' );
     82                        toggleMenuItems[i].setAttribute( 'aria-expanded', 'false' );
     83
     84                        // Handle opening/closing menus with Enter.
     85                        toggleMenuItems[i].addEventListener( 'keydown', handleKeyDown );
     86                        // Handle opening/closing menus with Space.
     87                        toggleMenuItems[i].addEventListener( 'keyup', handleKeyUp );
     88                        // Handle opening/closing menus with click.
     89                        toggleMenuItems[i].addEventListener( 'click', handleClick );
     90                }
    8391
    8492                if ( adminBarSearchForm ) {
    8593                        adminBarSearchInput = document.getElementById( 'adminbar-search' );
     
    115123                }
    116124        } );
    117125
     126        /**
     127         * Updates the My Account menu aria-expanded attribute.
     128         *
     129         * @since 5.5.0
     130         *
     131         * @param {HTMLElement} element The element to toggle aria-expanded on.
     132         */
     133        function toggleAriaExpanded( element ) {
     134                if ( element.getAttribute('aria-expanded') === 'true' ) {
     135                        element.setAttribute( 'aria-expanded', 'false' );
     136                } else {
     137                        element.setAttribute( 'aria-expanded', 'true' );
     138                }
     139        }
     140
    118141        /**
    119142         * Remove hover class for top level menu item when escape is pressed.
    120143         *
     
    123146         * @param {Event} event The keydown event.
    124147         */
    125148        function removeHoverIfEscape( event ) {
    126                 var wrapper;
     149                var wrapper,
     150                toggle;
    127151
    128152                if ( event.which !== 27 ) {
    129153                        return;
    130154                }
    131155
    132156                wrapper = getClosest( event.target, '.menupop' );
    133 
     157                toggle = wrapper.querySelector( '.menupop > .ab-item' );
    134158                if ( ! wrapper ) {
    135159                        return;
    136160                }
    137161
    138                 wrapper.querySelector( '.menupop > .ab-item' ).focus();
     162                toggle.focus();
     163                toggleAriaExpanded( toggle );
    139164                removeClass( wrapper, 'hover' );
    140165        }
    141166
    142167        /**
    143          * Toggle hover class for top level menu item when enter is pressed.
     168         * Handles the click event on dropdown toggles.
    144169         *
    145          * @since 5.3.1
     170         * @since 5.5.0
    146171         *
    147          * @param {Event} event The keydown event.
     172         * @param {Event} event The click event.
    148173         */
    149         function toggleHoverIfEnter( event ) {
    150                 var wrapper;
     174        function handleClick( event ) {
     175                event.preventDefault();
     176                var wrapper = getClosest( event.target, '.menupop' );
     177                wrapper.classList.toggle( 'hover' );
     178                toggleAriaExpanded( getClosest( event.target, '.ab-item' ) );
     179        }
    151180
    152                 if ( event.which !== 13 ) {
    153                         return;
    154                 }
     181        /**
     182         * Handles keyboard events on dropdown toggles.
     183         *
     184         * @since 5.5
     185         *
     186         * @param {Event} event The keyboard event.
     187         */
     188        function keyboardEventHandler( event ) {
     189                var wrapper = getClosest( event.target, '.menupop' );
    155190
    156                 if ( !! getClosest( event.target, '.ab-sub-wrapper' ) ) {
     191                if (
     192                        ! wrapper ||
     193                        !! getClosest( event.target, '.ab-sub-wrapper' )
     194                ) {
    157195                        return;
    158196                }
    159197
    160                 wrapper = getClosest( event.target, '.menupop' );
     198                event.preventDefault();
    161199
    162                 if ( ! wrapper ) {
     200                wrapper.classList.toggle( 'hover' );
     201                toggleAriaExpanded( event.target );
     202        }
     203
     204        /**
     205         * Handles the keydown event on dropdown toggles.
     206         *
     207         * @since 5.5
     208         *
     209         * @param {Event} event The keydown event.
     210         */
     211        function handleKeyDown( event ) {
     212                if ( event.which !== 13 ) {
    163213                        return;
    164214                }
     215                keyboardEventHandler( event );
     216        }
    165217
    166                 event.preventDefault();
    167 
    168                 if ( hasClass( wrapper, 'hover' ) ) {
    169                         removeClass( wrapper, 'hover' );
    170                 } else {
    171                         addClass( wrapper, 'hover' );
     218        /**
     219         * Handles the keyup event on dropdown toggles.
     220         *
     221         * @since 5.5
     222         *
     223         * @param {Event} event The keyup event.
     224         */
     225        function handleKeyUp( event ) {
     226                if ( event.which !== 32 ) {
     227                        return;
    172228                }
     229                keyboardEventHandler( event );
    173230        }
    174231
    175232        /**