Ticket #48894: 48894.4.diff

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

@@ -30 +30 @@
                 }
 
                 topMenuItems = adminBar.querySelectorAll( 'li.menupop' );
+                toggleMenuItems = adminBar.querySelectorAll( 'li.menupop > .ab-item' )
                 allMenuItems = adminBar.querySelectorAll( '.ab-item' );
                 adminBarLogout = document.getElementById( 'wp-admin-bar-logout' );
                 adminBarSearchForm = document.getElementById( 'adminbarsearch' );
@@ -62 +63 @@
                 // Scroll page to top when clicking on the admin bar.
                 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
-                        } );
-
-                        // Toggle hover class if the enter key is pressed.
-                        topMenuItems[i].addEventListener( 'keydown', toggleHoverIfEnter );
-                }
-
                 // Remove hover class if the escape key is pressed.
                 for ( i = 0; i < allMenuItems.length; i++ ) {
                         allMenuItems[i].addEventListener( 'keydown', removeHoverIfEscape );
                 }
+                
+                for ( i = 0; i < toggleMenuItems.length; i++ ) {
+                        // Make the menu dropdown toggles be perceived and behave as buttons.
+                        toggleMenuItems[i].setAttribute( 'role', 'button' );
+                        toggleMenuItems[i].setAttribute( 'aria-expanded', 'false' );
+
+                        // Handle opening/closing menus with Enter and Space.
+                        toggleMenuItems[i].addEventListener( 'keydown', handleKeyDown );
+                        // Handle opening/closing menus with click.
+                        toggleMenuItems[i].addEventListener( 'click', handleClick );
+                }
 
                 if ( adminBarSearchForm ) {
                         adminBarSearchInput = document.getElementById( 'adminbar-search' );
@@ -115 +113 @@
                 }
         } );
 
+        /**
+         * Updates the My Account menu aria-expanded attribute.
+         *
+         * @since 5.5.0
+         */
+        function toggleAriaExpanded( element ) {
+                if ( element.getAttribute('aria-expanded') === 'true' ) {
+                        element.setAttribute( 'aria-expanded', 'false' );
+                } else {
+                        element.setAttribute( 'aria-expanded', 'true' );
+                }
+        }
+
         /**
          * Remove hover class for top level menu item when escape is pressed.
          *
@@ -123 +134 @@
          * @param {Event} event The keydown event.
          */
         function removeHoverIfEscape( event ) {
-                var wrapper;
+                var wrapper,
+                toggle;
 
                 if ( event.which !== 27 ) {
                         return;
                 }
 
                 wrapper = getClosest( event.target, '.menupop' );
-
+                toggle = wrapper.querySelector( '.menupop > .ab-item' );
                 if ( ! wrapper ) {
                         return;
                 }
 
-                wrapper.querySelector( '.menupop > .ab-item' ).focus();
+                toggle.focus();
+                toggleAriaExpanded( toggle );
                 removeClass( wrapper, 'hover' );
         }
 
         /**
-         * Toggle hover class for top level menu item when enter is pressed.
+         * Handles the click event on dropdown toggles.
+         *
+         * @since 5.5.0
+         *
+         * @param {Event} event The click event.
+         */
+        function handleClick( event ) {
+                event.preventDefault();
+                var wrapper = getClosest( event.target, '.menupop' );
+                wrapper.classList.toggle( 'hover' );
+                toggleAriaExpanded( event.target );
+        }
+
+        /**
+         * Handles the keydown event on dropdown toggles.
          *
          * @since 5.3.1
          *
          * @param {Event} event The keydown event.
          */
-        function toggleHoverIfEnter( event ) {
-                var wrapper;
-
-                if ( event.which !== 13 ) {
-                        return;
-                }
-
-                if ( !! getClosest( event.target, '.ab-sub-wrapper' ) ) {
-                        return;
-                }
-
-                wrapper = getClosest( event.target, '.menupop' );
+        function handleKeyDown( event ) {
+                var wrapper = getClosest( event.target, '.menupop' );
 
-                if ( ! wrapper ) {
+                if ( 
+                        ! wrapper || 
+                        !! getClosest( event.target, '.ab-sub-wrapper' ) ||
+                        ( event.which !== 32 && event.which !== 13 )
+                ) {
                         return;
                 }
 
+                // Prevent scrolling the page when activating the links via the Spacebar key.
                 event.preventDefault();
 
-                if ( hasClass( wrapper, 'hover' ) ) {
-                        removeClass( wrapper, 'hover' );
-                } else {
-                        addClass( wrapper, 'hover' );
-                }
+                wrapper.classList.toggle( 'hover' );
+                toggleAriaExpanded( event.target );
         }
 
         /**