Ticket #34668: 34668.4.patch

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

@@ -31 +31 @@
 
                 topMenuItems = adminBar.querySelectorAll( 'li.menupop' );
                 allMenuItems = adminBar.querySelectorAll( '.ab-item' );
-                adminBarLogout = document.getElementById( 'wp-admin-bar-logout' );
+                adminBarLogout = document.querySelector( '#wp-admin-bar-logout a' );
                 adminBarSearchForm = document.getElementById( 'adminbarsearch' );
                 shortlink = document.getElementById( 'wp-admin-bar-get-shortlink' );
                 skipLink = adminBar.querySelector( '.screen-reader-shortcut' );
@@ -149 +149 @@
         function toggleHoverIfEnter( event ) {
                 var wrapper;
 
-                if ( event.which !== 13 ) {
+                // Follow link if pressing Ctrl and/or Shift with Enter (opening in a new tab or window).
+                if ( event.which !== 13 || event.ctrlKey || event.shiftKey ) {
                         return;
                 }
 
@@ -336 +337 @@
 
                         element.className += className;
                 }
+
+                var menuItemToggle = element.querySelector( 'a' );
+                if ( className === 'hover' && menuItemToggle && menuItemToggle.hasAttribute( 'aria-expanded' ) ) {
+                        menuItemToggle.setAttribute( 'aria-expanded', 'true' );
+                }
         }
 
         /**
@@ -366 +372 @@
 
                         element.className = classes.replace( /^[\s]+|[\s]+$/g, '' );
                 }
+
+                var menuItemToggle = element.querySelector( 'a' );
+                if ( className === 'hover' && menuItemToggle && menuItemToggle.hasAttribute( 'aria-expanded' ) ) {
+                        menuItemToggle.setAttribute( 'aria-expanded', 'false' );
+                }
         }
 
         /**

src/wp-includes/admin-bar.php

@@ -139 +139 @@
                                 __( 'About WordPress' ) .
                         '</span>',
                 'href'  => $about_url,
+                'meta' => array(
+                        'menu_title' => __( 'About WordPress' ),
+                ),
         );
 
         // Set tabindex="0" to make sub menus accessible when no URL is available.
@@ -283 +286 @@
                         'href'   => $profile_url,
                         'meta'   => array(
                                 'class' => $class,
+                                'menu_title' => sprintf( __( 'Howdy, %s' ), $current_user->display_name ),
                         ),
                 )
         );
@@ -325 +329 @@
                 $user_info .= "<span class='username'>{$current_user->user_login}</span>";
         }
 
+        $user_info .= "<span class='edit-profile'>" . __( 'Edit Profile' ) . '</span>';
+
         $wp_admin_bar->add_node(
                 array(
                         'parent' => 'user-actions',
@@ -331 +337 @@
                         'id'     => 'user-info',
                         'title'  => $user_info,
                         'href'   => $profile_url,
-                        'meta'   => array(
-                                'tabindex' => -1,
-                        ),
                 )
         );
 
-        if ( false !== $profile_url ) {
-                $wp_admin_bar->add_node(
-                        array(
-                                'parent' => 'user-actions',
-                                'id'     => 'edit-profile',
-                                'title'  => __( 'Edit Profile' ),
-                                'href'   => $profile_url,
-                        )
-                );
-        }
-
         $wp_admin_bar->add_node(
                 array(
                         'parent' => 'user-actions',
@@ -397 +389 @@
                         'id'    => 'site-name',
                         'title' => $title,
                         'href'  => ( is_admin() || ! current_user_can( 'read' ) ) ? home_url( '/' ) : admin_url(),
+                        'meta' => array(
+                                'menu_title' => $title,
+                        ),
                 )
         );
 
@@ -993 +988 @@
                         'id'    => 'new-content',
                         'title' => $title,
                         'href'  => admin_url( current( array_keys( $actions ) ) ),
+                        'meta' => array(
+                                'menu_title' => _x( 'New', 'admin bar menu group label' ),
+                        ),
                 )
         );
 

src/wp-includes/class-wp-admin-bar.php

@@ -117 +117 @@
          *     @type string $href   Optional. Link for the item.
          *     @type bool   $group  Optional. Whether or not the node is a group. Default false.
          *     @type array  $meta   Meta data including the following keys: 'html', 'class', 'rel', 'lang', 'dir',
-         *                          'onclick', 'target', 'title', 'tabindex'. Default empty.
+         *                          'onclick', 'target', 'title', 'tabindex', 'menu_title. Default empty.
          * }
          */
         public function add_node( $args ) {
@@ -478 +478 @@
                                 }
                                 ?>
                         </div>
-                        <?php if ( is_user_logged_in() ) : ?>
-                        <a class="screen-reader-shortcut" href="<?php echo esc_url( wp_logout_url() ); ?>"><?php _e( 'Log Out' ); ?></a>
-                        <?php endif; ?>
                 </div>
 
                 <?php
@@ -507 +504 @@
          * @since 3.3.0
          *
          * @param object $node
+         * @param string $menu_title
          */
-        final protected function _render_group( $node ) {
+        final protected function _render_group( $node, $menu_title = false ) {
                 if ( 'container' === $node->type ) {
                         $this->_render_container( $node );
                         return;
@@ -523 +521 @@
                         $class = '';
                 }
 
-                echo "<ul id='" . esc_attr( 'wp-admin-bar-' . $node->id ) . "'$class>";
+                if ( empty( $menu_title ) ) {
+                                echo "<ul role='menu' id='" . esc_attr( 'wp-admin-bar-' . $node->id ) . "'$class>";
+                        } else {
+                                echo "<ul role='menu' aria-label='" . esc_attr( $menu_title ) . "' id='" . esc_attr( 'wp-admin-bar-' . $node->id ) . "'$class>";
+                        }
                 foreach ( $node->children as $item ) {
                         $this->_render_item( $item );
                 }
-                echo '</ul>';
+                        echo "</ul>";
         }
 
         /**
@@ -548 +550 @@
                 // Allow only numeric values, then casted to integers, and allow a tabindex value of `0` for a11y.
                 $tabindex        = ( isset( $node->meta['tabindex'] ) && is_numeric( $node->meta['tabindex'] ) ) ? (int) $node->meta['tabindex'] : '';
                 $aria_attributes = ( '' !== $tabindex ) ? ' tabindex="' . $tabindex . '"' : '';
+                $aria_attributes .= ' role="menuitem"';
 
                 $menuclass = '';
                 $arrow     = '';
@@ -554 +557 @@
 
                 if ( $is_parent ) {
                         $menuclass        = 'menupop ';
-                        $aria_attributes .= ' aria-haspopup="true"';
+                        $aria_attributes .= ' aria-expanded="false"';
                 }
 
                 if ( ! empty( $node->meta['class'] ) ) {
@@ -603 +606 @@
                 if ( $is_parent ) {
                         echo '<div class="ab-sub-wrapper">';
                         foreach ( $node->children as $group ) {
-                                $this->_render_group( $group );
+                                if ( empty( $node->meta[ 'menu_title' ] ) ) {
+                                        $this->_render_group( $group, false );
+                                } else {
+                                        $this->_render_group( $group, $node->meta[ 'menu_title' ] );
+                                }
                         }
                         echo '</div>';
                 }

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

@@ -447 +447 @@
         background: none;
 }
 
+#wpadminbar #wp-admin-bar-user-info a {
+        display: grid;
+        row-gap: 12px;
+}
+
 #wp-admin-bar-user-info .avatar {
         position: absolute;
         left: -72px;