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.

git-svn-id: https://develop.svn.wordpress.org/trunk@48963 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jonathan Desrosiers 2020-09-09 16:13:17 +00:00
parent 506c46593b
commit 2c6df53917

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>";
} }
} }