From 059878b96d762dc8d4d01054b9be634784fa9247 Mon Sep 17 00:00:00 2001 From: joedolson Date: Mon, 26 Feb 2024 00:52:10 +0000 Subject: [PATCH] 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. Built from https://develop.svn.wordpress.org/trunk@57708 git-svn-id: http://core.svn.wordpress.org/trunk@57209 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/admin-bar.php | 28 ++++++++++++-------------- wp-includes/class-wp-admin-bar.php | 29 ++++++++++++++++++--------- wp-includes/css/admin-bar-rtl.css | 5 +++++ wp-includes/css/admin-bar-rtl.min.css | 2 +- wp-includes/css/admin-bar.css | 5 +++++ wp-includes/css/admin-bar.min.css | 2 +- wp-includes/js/admin-bar.js | 15 ++++++++++++-- wp-includes/js/admin-bar.min.js | 2 +- wp-includes/version.php | 2 +- 9 files changed, 59 insertions(+), 31 deletions(-) diff --git a/wp-includes/admin-bar.php b/wp-includes/admin-bar.php index 4f5f2ff70d..975672ece7 100644 --- a/wp-includes/admin-bar.php +++ b/wp-includes/admin-bar.php @@ -139,6 +139,9 @@ function wp_admin_bar_wp_menu( $wp_admin_bar ) { __( 'About WordPress' ) . '', 'href' => $about_url, + 'meta' => array( + 'menu_title' => __( 'About WordPress' ), + ), ); // Set tabindex="0" to make sub menus accessible when no URL is available. @@ -282,7 +285,8 @@ function wp_admin_bar_my_account_item( $wp_admin_bar ) { 'title' => $howdy . $avatar, 'href' => $profile_url, 'meta' => array( - 'class' => $class, + 'class' => $class, + 'menu_title' => sprintf( __( 'Howdy, %s' ), $current_user->display_name ), ), ) ); @@ -325,29 +329,17 @@ function wp_admin_bar_my_account_menu( $wp_admin_bar ) { $user_info .= "{$current_user->user_login}"; } + $user_info .= "" . __( 'Edit Profile' ) . ''; + $wp_admin_bar->add_node( array( 'parent' => 'user-actions', '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,6 +389,9 @@ function wp_admin_bar_site_menu( $wp_admin_bar ) { 'id' => 'site-name', 'title' => $title, 'href' => ( is_admin() || ! current_user_can( 'read' ) ) ? home_url( '/' ) : admin_url(), + 'meta' => array( + 'menu_title' => $title, + ), ) ); @@ -994,6 +989,9 @@ function wp_admin_bar_new_content_menu( $wp_admin_bar ) { 'id' => 'new-content', 'title' => $title, 'href' => admin_url( current( array_keys( $actions ) ) ), + 'meta' => array( + 'menu_title' => _x( 'New', 'admin bar menu group label' ), + ), ) ); diff --git a/wp-includes/class-wp-admin-bar.php b/wp-includes/class-wp-admin-bar.php index ee3888edbb..12ffc8fc32 100644 --- a/wp-includes/class-wp-admin-bar.php +++ b/wp-includes/class-wp-admin-bar.php @@ -107,6 +107,7 @@ class WP_Admin_Bar { * * @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 { * Arguments for adding a node. @@ -117,7 +118,7 @@ class WP_Admin_Bar { * @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,9 +479,6 @@ class WP_Admin_Bar { } ?> - - - type ) { $this->_render_container( $node ); return; @@ -523,7 +523,11 @@ class WP_Admin_Bar { $class = ''; } - echo "