Ticket #48894: 48894.8.diff

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

@@ -16 +16 @@
         document.addEventListener( 'DOMContentLoaded', function() {
                 var adminBar = document.getElementById( 'wpadminbar' ),
                         topMenuItems,
+                        toggleMenuItems,
                         allMenuItems,
                         adminBarLogout,
                         adminBarSearchForm,
@@ -30 +31 @@
                 }
 
                 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' );
@@ -56 +58 @@
                                 }
 
                                 adminBar.removeEventListener( 'touchstart', bindMobileEvents );
+                                for ( i = 0; i < toggleMenuItems.length; i++ ) {
+                                        // Remove click and keyboard event handlers that interfere with mobile behaviour.
+                                        toggleMenuItems[i].removeEventListener( 'keydown', handleKeyDown );
+                                        toggleMenuItems[i].removeEventListener( 'keyup', handleKeyUp );
+                                        toggleMenuItems[i].removeEventListener( 'click', handleClick );
+                                }
+
                         } );
                 }
 
+                document.addEventListener('click', closeOpenMenus);
+                document.addEventListener('keyup', closeOpenMenus);
+
                 // 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' );
+
+                        // Prevent default for Space.
+                        toggleMenuItems[i].addEventListener( 'keydown', handleKeyDown );
+                        // Handle opening/closing menus with Space.
+                        toggleMenuItems[i].addEventListener( 'keyup', handleKeyUp );
+                        // Handle opening/closing menus with click.
+                        toggleMenuItems[i].addEventListener( 'click', handleClick );
+                }
 
                 if ( adminBarSearchForm ) {
                         adminBarSearchInput = document.getElementById( 'adminbar-search' );
@@ -113 +124 @@
                 if ( adminBarLogout ) {
                         adminBarLogout.addEventListener( 'click', emptySessionStorage );
                 }
+
+        /**
+         * Closes all open menus.
+         *
+         * @since 5.5.0
+         * 
+         * @param {Event} event The captured event.
+         */
+        function closeOpenMenus( event ) {
+                for ( i = 0; i < toggleMenuItems.length; i++ ) {
+                        var wrapper = getClosest( toggleMenuItems[i], '.menupop' );
+                        if ( wrapper.contains( event.target )  ) {
+                                continue;
+                        }
+                        if ( wrapper.classList.contains( 'hover' ) ) {
+                                wrapper.classList.remove( 'hover' );
+                        }
+                        if ( toggleMenuItems[i].getAttribute('aria-expanded') === 'true' ) {
+                                toggleMenuItems[i].setAttribute( 'aria-expanded', 'false' );
+                        }
+                }
+        }
+
         } );
 
+        /**
+         * Updates the My Account menu aria-expanded attribute.
+         *
+         * @since 5.5.0
+         * 
+         * @param {HTMLElement} element The element to toggle aria-expanded on.
+         */
+        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 +172 @@
          * @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.3.1
+         * @since 5.5.0
          *
-         * @param {Event} event The keydown event.
+         * @param {Event} event The click event.
          */
-        function toggleHoverIfEnter( event ) {
-                var wrapper;
+        function handleClick( event ) {
+                event.preventDefault();
+                var wrapper = getClosest( event.target, '.menupop' );
+                wrapper.classList.toggle( 'hover' );
+                toggleAriaExpanded( getClosest( event.target, '.ab-item' ) );
+        }
 
-                if ( event.which !== 13 ) {
-                        return;
+        /**
+         * Handles the keydown event on dropdown toggles.
+         *
+         * @since 5.5
+         *
+         * @param {Event} event The keydown event.
+         */
+        function handleKeyDown( event ) {
+                if ( event.which === 32 ) {
+                        event.preventDefault();
                 }
+        }
 
-                if ( !! getClosest( event.target, '.ab-sub-wrapper' ) ) {
+        /**
+         * Handles the keyup event on dropdown toggles.
+         *
+         * @since 5.5
+         *
+         * @param {Event} event The keyup event.
+         */
+        function handleKeyUp( event ) {
+                if ( event.which !== 32 ) {
                         return;
                 }
+                
+                var wrapper = getClosest( event.target, '.menupop' );
 
-                wrapper = getClosest( event.target, '.menupop' );
-
-                if ( ! wrapper ) {
+                if ( 
+                        ! wrapper || 
+                        !! getClosest( event.target, '.ab-sub-wrapper' )
+                ) {
                         return;
                 }
 
                 event.preventDefault();
 
-                if ( hasClass( wrapper, 'hover' ) ) {
-                        removeClass( wrapper, 'hover' );
-                } else {
-                        addClass( wrapper, 'hover' );
-                }
+                wrapper.classList.toggle( 'hover' );
+                toggleAriaExpanded( event.target );
         }
 
         /**