Ticket #48894: 48894.3.diff

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

@@ -13 +13 @@
  * @return {void}
  */
 ( function( document, window, navigator ) {
+        var adminBarMyAccount,
+                adminBarMyAccountLink;
+
         document.addEventListener( 'DOMContentLoaded', function() {
                 var adminBar = document.getElementById( 'wpadminbar' ),
                         topMenuItems,
@@ -33 +36 @@
                 allMenuItems = adminBar.querySelectorAll( '.ab-item' );
                 adminBarLogout = document.getElementById( 'wp-admin-bar-logout' );
                 adminBarSearchForm = document.getElementById( 'adminbarsearch' );
+                adminBarMyAccount = document.getElementById( 'wp-admin-bar-my-account' );
+                adminBarMyAccountLink = document.querySelector( '#wp-admin-bar-my-account > .ab-item');
                 shortlink = document.getElementById( 'wp-admin-bar-get-shortlink' );
                 skipLink = adminBar.querySelector( '.screen-reader-shortcut' );
                 mobileEvent = /Mobile\/.+Safari/.test( navigator.userAgent ) ? 'touchstart' : 'click';
@@ -56 +61 @@
                                 }
 
                                 adminBar.removeEventListener( 'touchstart', bindMobileEvents );
+                                adminBarMyAccountLink.removeEventListener( 'click', toggleMyAccount );
+                                adminBarMyAccountLink.removeEventListener( 'keyup', toggleMyAccountViaKeyboard );
                         } );
                 }
 
@@ -63 +70 @@
                 adminBar.addEventListener( 'click', scrollToTop );
 
                 for ( i = 0; i < topMenuItems.length; i++ ) {
-                        // Adds or removes the hover class based on the hover intent.
-                        window.hoverintent(
-                                topMenuItems[i],
-                                addClass.bind( null, topMenuItems[i], 'hover' ),
-                                removeClass.bind( null, topMenuItems[i], 'hover' )
-                        ).options( {
-                                timeout: 180
-                        } );
+                        if ( topMenuItems[i].id !== 'wp-admin-bar-my-account' ) {
+                                // Adds or removes the hover class based on the hover intent, except for My Account menu.
+                                window.hoverintent(
+                                        topMenuItems[i],
+                                        addClass.bind( null, topMenuItems[i], 'hover' ),
+                                        removeClass.bind( null, topMenuItems[i], 'hover' )
+                                ).options( {
+                                        timeout: 180
+                                } );
 
-                        // Toggle hover class if the enter key is pressed.
-                        topMenuItems[i].addEventListener( 'keydown', toggleHoverIfEnter );
+                                // Toggle hover class if the enter key is pressed.
+                                topMenuItems[i].addEventListener( 'keydown', toggleHoverIfEnter );
+                        }
                 }
 
+                // Toggle the My Account menu on click.
+                adminBarMyAccountLink.addEventListener( 'click', toggleMyAccount );
+
+                // Make the My Account menu link be perceived and behave as a button.
+                adminBarMyAccountLink.addEventListener( 'keyup', toggleMyAccountViaKeyboard );
+                adminBarMyAccountLink.setAttribute( 'role', 'button' );
+                adminBarMyAccountLink.setAttribute( 'aria-expanded', 'false' );
+
                 // Remove hover class if the escape key is pressed.
                 for ( i = 0; i < allMenuItems.length; i++ ) {
-                        allMenuItems[i].addEventListener( 'keydown', removeHoverIfEscape );
+                        allMenuItems[i].addEventListener( 'keydown', handleKeyDown );
                 }
 
                 if ( adminBarSearchForm ) {
@@ -113 +130 @@
                 if ( adminBarLogout ) {
                         adminBarLogout.addEventListener( 'click', emptySessionStorage );
                 }
+
+                /**
+                 * Toggles the My Account menu on the click event.
+                 *
+                 * @since 5.5.0
+                 *
+                 * @param {Event} event The click event.
+                 */
+                function toggleMyAccount( event ) {
+                        event.preventDefault();
+                        adminBarMyAccount.classList.toggle( 'hover' );
+                        updateMyAccountAriaExpanded();
+                }
+
+                /**
+                 * Toggles the My Account menu when pressing the Spacebar key.
+                 *
+                 * @since 5.5.0
+                 *
+                 * @param {Event} event The keyup event.
+                 */
+                function toggleMyAccountViaKeyboard( event ) {
+                        if ( event.which !== 32 ) {
+                                return;
+                        }
+
+                        adminBarMyAccount.classList.toggle( 'hover' );
+                        updateMyAccountAriaExpanded();
+                }
         } );
 
         /**
-         * Remove hover class for top level menu item when escape is pressed.
+         * Updates the My Account menu aria-expanded attribute.
          *
+         * @since 5.5.0
+         */
+        function updateMyAccountAriaExpanded() {
+                if ( hasClass( adminBarMyAccount, 'hover' ) ) {
+                        adminBarMyAccountLink.setAttribute( 'aria-expanded', 'true' );
+                        return;
+                }
+
+                adminBarMyAccountLink.setAttribute( 'aria-expanded', 'false' );
+        }
+
+        /**
+         * Handles the keydown event on the menu items.
+         *
          * @since 5.3.1
          *
          * @param {Event} event The keydown event.
          */
-        function removeHoverIfEscape( event ) {
-                var wrapper;
+        function handleKeyDown( event ) {
+                var wrapper = getClosest( event.target, '.menupop' );
 
-                if ( event.which !== 27 ) {
+                if ( ! wrapper ) {
                         return;
                 }
 
-                wrapper = getClosest( event.target, '.menupop' );
+                // Prevent scrolling the page when activating the My Account link via the Spacebar key.
+                if ( event.which === 32 && wrapper.id === 'wp-admin-bar-my-account' ) {
+                        event.preventDefault();
+                }
 
-                if ( ! wrapper ) {
+                if ( event.which !== 27 ) {
                         return;
                 }
 
+                // Close a menu when the Escape key is pressed.
+                removeClass( wrapper, 'hover' );
+                // Move focus to the menu top item link.
                 wrapper.querySelector( '.menupop > .ab-item' ).focus();
-                removeClass( wrapper, 'hover' );
+
+                // Update the My Account link aria-expanded attribute.
+                if ( wrapper.id === 'wp-admin-bar-my-account' ) {
+                        updateMyAccountAriaExpanded();
+                }
         }
 
         /**

src/wp-includes/admin-bar.php

@@ -245 +245 @@
         /* translators: %s: Current user's display name. */
         $howdy = sprintf( __( 'Howdy, %s' ), '<span class="display-name">' . $current_user->display_name . '</span>' );
         $class = empty( $avatar ) ? '' : 'with-avatar';
+        $icon  = '<span class="my-account-toggle-indicator hide-if-no-js" aria-hidden="true"></span>';
 
         $wp_admin_bar->add_node(
                 array(
                         'id'     => 'my-account',
                         'parent' => 'top-secondary',
-                        'title'  => $howdy . $avatar,
+                        'title'  => $icon . $howdy . $avatar,
                         'href'   => $profile_url,
                         'meta'   => array(
                                 'class' => $class,

src/wp-includes/css/admin-bar.css

@@ -399 +399 @@
         min-width: 198px;
 }
 
+#wp-admin-bar-my-account .my-account-toggle-indicator {
+        display: inline-flex;
+        align-items: center;
+        height: 32px;
+        margin-right: 5px;
+        vertical-align: top;
+}
+
+#wp-admin-bar-my-account .my-account-toggle-indicator:before {
+        content: "\f347";
+        font: normal 20px/1 dashicons;
+        speak: none;
+        display: inline-block;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-decoration: none !important;
+        color: currentColor;
+}
+
+#wp-admin-bar-my-account.hover .my-account-toggle-indicator:before {
+        content: "\f343";
+}
+
 #wp-admin-bar-my-account > .ab-item:before {
         content: "\f110";
         top: 2px;