WordPress.org

Make WordPress Core

Ticket #48894: 48894.3.diff

File 48894.3.diff, 6.9 KB (added by afercia, 15 months ago)
  • src/js/_enqueues/lib/admin-bar.js

     
    1313 * @return {void}
    1414 */
    1515( function( document, window, navigator ) {
     16        var adminBarMyAccount,
     17                adminBarMyAccountLink;
     18
    1619        document.addEventListener( 'DOMContentLoaded', function() {
    1720                var adminBar = document.getElementById( 'wpadminbar' ),
    1821                        topMenuItems,
     
    3336                allMenuItems = adminBar.querySelectorAll( '.ab-item' );
    3437                adminBarLogout = document.getElementById( 'wp-admin-bar-logout' );
    3538                adminBarSearchForm = document.getElementById( 'adminbarsearch' );
     39                adminBarMyAccount = document.getElementById( 'wp-admin-bar-my-account' );
     40                adminBarMyAccountLink = document.querySelector( '#wp-admin-bar-my-account > .ab-item');
    3641                shortlink = document.getElementById( 'wp-admin-bar-get-shortlink' );
    3742                skipLink = adminBar.querySelector( '.screen-reader-shortcut' );
    3843                mobileEvent = /Mobile\/.+Safari/.test( navigator.userAgent ) ? 'touchstart' : 'click';
     
    5661                                }
    5762
    5863                                adminBar.removeEventListener( 'touchstart', bindMobileEvents );
     64                                adminBarMyAccountLink.removeEventListener( 'click', toggleMyAccount );
     65                                adminBarMyAccountLink.removeEventListener( 'keyup', toggleMyAccountViaKeyboard );
    5966                        } );
    6067                }
    6168
     
    6370                adminBar.addEventListener( 'click', scrollToTop );
    6471
    6572                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                         } );
     73                        if ( topMenuItems[i].id !== 'wp-admin-bar-my-account' ) {
     74                                // Adds or removes the hover class based on the hover intent, except for My Account menu.
     75                                window.hoverintent(
     76                                        topMenuItems[i],
     77                                        addClass.bind( null, topMenuItems[i], 'hover' ),
     78                                        removeClass.bind( null, topMenuItems[i], 'hover' )
     79                                ).options( {
     80                                        timeout: 180
     81                                } );
    7482
    75                         // Toggle hover class if the enter key is pressed.
    76                         topMenuItems[i].addEventListener( 'keydown', toggleHoverIfEnter );
     83                                // Toggle hover class if the enter key is pressed.
     84                                topMenuItems[i].addEventListener( 'keydown', toggleHoverIfEnter );
     85                        }
    7786                }
    7887
     88                // Toggle the My Account menu on click.
     89                adminBarMyAccountLink.addEventListener( 'click', toggleMyAccount );
     90
     91                // Make the My Account menu link be perceived and behave as a button.
     92                adminBarMyAccountLink.addEventListener( 'keyup', toggleMyAccountViaKeyboard );
     93                adminBarMyAccountLink.setAttribute( 'role', 'button' );
     94                adminBarMyAccountLink.setAttribute( 'aria-expanded', 'false' );
     95
    7996                // Remove hover class if the escape key is pressed.
    8097                for ( i = 0; i < allMenuItems.length; i++ ) {
    81                         allMenuItems[i].addEventListener( 'keydown', removeHoverIfEscape );
     98                        allMenuItems[i].addEventListener( 'keydown', handleKeyDown );
    8299                }
    83100
    84101                if ( adminBarSearchForm ) {
     
    113130                if ( adminBarLogout ) {
    114131                        adminBarLogout.addEventListener( 'click', emptySessionStorage );
    115132                }
     133
     134                /**
     135                 * Toggles the My Account menu on the click event.
     136                 *
     137                 * @since 5.5.0
     138                 *
     139                 * @param {Event} event The click event.
     140                 */
     141                function toggleMyAccount( event ) {
     142                        event.preventDefault();
     143                        adminBarMyAccount.classList.toggle( 'hover' );
     144                        updateMyAccountAriaExpanded();
     145                }
     146
     147                /**
     148                 * Toggles the My Account menu when pressing the Spacebar key.
     149                 *
     150                 * @since 5.5.0
     151                 *
     152                 * @param {Event} event The keyup event.
     153                 */
     154                function toggleMyAccountViaKeyboard( event ) {
     155                        if ( event.which !== 32 ) {
     156                                return;
     157                        }
     158
     159                        adminBarMyAccount.classList.toggle( 'hover' );
     160                        updateMyAccountAriaExpanded();
     161                }
    116162        } );
    117163
    118164        /**
    119          * Remove hover class for top level menu item when escape is pressed.
     165         * Updates the My Account menu aria-expanded attribute.
    120166         *
     167         * @since 5.5.0
     168         */
     169        function updateMyAccountAriaExpanded() {
     170                if ( hasClass( adminBarMyAccount, 'hover' ) ) {
     171                        adminBarMyAccountLink.setAttribute( 'aria-expanded', 'true' );
     172                        return;
     173                }
     174
     175                adminBarMyAccountLink.setAttribute( 'aria-expanded', 'false' );
     176        }
     177
     178        /**
     179         * Handles the keydown event on the menu items.
     180         *
    121181         * @since 5.3.1
    122182         *
    123183         * @param {Event} event The keydown event.
    124184         */
    125         function removeHoverIfEscape( event ) {
    126                 var wrapper;
     185        function handleKeyDown( event ) {
     186                var wrapper = getClosest( event.target, '.menupop' );
    127187
    128                 if ( event.which !== 27 ) {
     188                if ( ! wrapper ) {
    129189                        return;
    130190                }
    131191
    132                 wrapper = getClosest( event.target, '.menupop' );
     192                // Prevent scrolling the page when activating the My Account link via the Spacebar key.
     193                if ( event.which === 32 && wrapper.id === 'wp-admin-bar-my-account' ) {
     194                        event.preventDefault();
     195                }
    133196
    134                 if ( ! wrapper ) {
     197                if ( event.which !== 27 ) {
    135198                        return;
    136199                }
    137200
     201                // Close a menu when the Escape key is pressed.
     202                removeClass( wrapper, 'hover' );
     203                // Move focus to the menu top item link.
    138204                wrapper.querySelector( '.menupop > .ab-item' ).focus();
    139                 removeClass( wrapper, 'hover' );
     205
     206                // Update the My Account link aria-expanded attribute.
     207                if ( wrapper.id === 'wp-admin-bar-my-account' ) {
     208                        updateMyAccountAriaExpanded();
     209                }
    140210        }
    141211
    142212        /**
  • src/wp-includes/admin-bar.php

     
    245245        /* translators: %s: Current user's display name. */
    246246        $howdy = sprintf( __( 'Howdy, %s' ), '<span class="display-name">' . $current_user->display_name . '</span>' );
    247247        $class = empty( $avatar ) ? '' : 'with-avatar';
     248        $icon  = '<span class="my-account-toggle-indicator hide-if-no-js" aria-hidden="true"></span>';
    248249
    249250        $wp_admin_bar->add_node(
    250251                array(
    251252                        'id'     => 'my-account',
    252253                        'parent' => 'top-secondary',
    253                         'title'  => $howdy . $avatar,
     254                        'title'  => $icon . $howdy . $avatar,
    254255                        'href'   => $profile_url,
    255256                        'meta'   => array(
    256257                                'class' => $class,
  • src/wp-includes/css/admin-bar.css

     
    399399        min-width: 198px;
    400400}
    401401
     402#wp-admin-bar-my-account .my-account-toggle-indicator {
     403        display: inline-flex;
     404        align-items: center;
     405        height: 32px;
     406        margin-right: 5px;
     407        vertical-align: top;
     408}
     409
     410#wp-admin-bar-my-account .my-account-toggle-indicator:before {
     411        content: "\f347";
     412        font: normal 20px/1 dashicons;
     413        speak: none;
     414        display: inline-block;
     415        -webkit-font-smoothing: antialiased;
     416        -moz-osx-font-smoothing: grayscale;
     417        text-decoration: none !important;
     418        color: currentColor;
     419}
     420
     421#wp-admin-bar-my-account.hover .my-account-toggle-indicator:before {
     422        content: "\f343";
     423}
     424
    402425#wp-admin-bar-my-account > .ab-item:before {
    403426        content: "\f110";
    404427        top: 2px;