Administration: Add the `aria-hidden` attribute to admin menu icons.

The admin menu icons are included as a visual element to support the text links. Without the `aria-hidden=“true”` attribute, they are also exposed to assistive technologies (which can process icon fonts in unpredictable ways).

This change improves the experience for multiple types of assistive technologies, including screen reading and voice control software. With `aria-hidden=“true”` added, the icons will not be read, and a user can now trigger a click of a top level admin menu item with commands such as “click posts”, or “click plugins”.

Props joedolson, afercia, audrasjb, adriantirusli.
Fixes #51012.
Built from https://develop.svn.wordpress.org/trunk@48963


git-svn-id: http://core.svn.wordpress.org/trunk@48725 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
desrosj 2020-09-09 16:15:06 +00:00
parent 5be5b975c3
commit 04c8217724
2 changed files with 5 additions and 5 deletions

View File

@ -165,9 +165,9 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
&& ! file_exists( ABSPATH . "/wp-admin/$menu_file" ) ) && ! file_exists( ABSPATH . "/wp-admin/$menu_file" ) )
) { ) {
$admin_is_parent = true; $admin_is_parent = true;
echo "<a href='admin.php?page={$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>$title</div></a>"; echo "<a href='admin.php?page={$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style aria-hidden='true'>$img</div><div class='wp-menu-name'>$title</div></a>";
} else { } else {
echo "\n\t<a href='{$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>$title</div></a>"; echo "\n\t<a href='{$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style aria-hidden='true'>$img</div><div class='wp-menu-name'>$title</div></a>";
} }
} elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) { } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) {
$menu_hook = get_plugin_page_hook( $item[2], 'admin.php' ); $menu_hook = get_plugin_page_hook( $item[2], 'admin.php' );
@ -184,9 +184,9 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
&& ! file_exists( ABSPATH . "/wp-admin/$menu_file" ) ) && ! file_exists( ABSPATH . "/wp-admin/$menu_file" ) )
) { ) {
$admin_is_parent = true; $admin_is_parent = true;
echo "\n\t<a href='admin.php?page={$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>"; echo "\n\t<a href='admin.php?page={$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style aria-hidden='true'>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
} else { } else {
echo "\n\t<a href='{$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>"; echo "\n\t<a href='{$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style aria-hidden='true'>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
} }
} }

View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.6-alpha-48962'; $wp_version = '5.6-alpha-48963';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.