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

Timestamp:

02/26/2024 12:50:22 AM (3 years 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>';