Changeset 57708 for trunk/src/wp-includes/class-wp-admin-bar.php

Timestamp:

02/26/2024 12:50:22 AM (16 months ago)

Author:

joedolson

Message:

Toolbar: Accessibility: Keyboard navigation for screen readers.

Change the admin toolbar to have role="menu" and support opening for screen readers. Remove screen reader only log out link and collapse duplicate profile links into one link. This is an imperfect solution to a complex problem in the adminbar, but the lack of screen reader access to submenus is a major accessibility problem, and this fix provides access, even if the mechanism is imperfect.

Screen reader log out added in [21452].

Props abletec, Cheffheid, sabernhardt, alexstine, joedolson, afercia, sparklingrobots, danieltj, swissspidy, netweb, dionysous.
Fixes #34668, #43633.

File:

• trunk/src/wp-includes/class-wp-admin-bar.php (modified) (8 diffs)

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

@@ -108 +108 @@
      * @since 3.1.0
      * @since 4.5.0 Added the ability to pass 'lang' and 'dir' meta data.
+     * @since 6.5.0 Added the ability to pass 'menu_title' for an ARIA menu name.
      *
      * @param array $args {
@@ -118 +119 @@
      *     @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.
      * }
      */
@@ -479 +480 @@
                 ?>
             </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>
 
@@ -506 +504 @@
     /**
      * @since 3.3.0
+     * @since 6.5.0 Added `$menu_title` parameter to allow an ARIA menu name.
      *
      * @param object $node
-     */
-    final protected function _render_group( $node ) {
+     * @param string|bool $menu_title The accessible name of this aria menu or false if not provided.
+     */
+    final protected function _render_group( $node, $menu_title = false ) {
         if ( 'container' === $node->type ) {
             $this->_render_container( $node );
@@ -524 +524 @@
         }
 
-        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 );
@@ -547 +551 @@
 
         // 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 . '"' : '';
+        $tabindex         = ( isset( $node->meta['tabindex'] ) && is_numeric( $node->meta['tabindex'] ) ) ? (int) $node->meta['tabindex'] : '';
+        $aria_attributes  = ( '' !== $tabindex ) ? ' tabindex="' . $tabindex . '"' : '';
+        $aria_attributes .= ' role="menuitem"';
 
         $menuclass = '';
@@ -555 +560 @@
         if ( $is_parent ) {
             $menuclass        = 'menupop ';
-            $aria_attributes .= ' aria-haspopup="true"';
+            $aria_attributes .= ' aria-expanded="false"';
         }
 
@@ -604 +609 @@
             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>';