sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Accessibility: Hide the Toolbar sub-menu CSS generated icons from assistive technologies.

Browse Source 
CSS generated content is rendered for speech output. When it's not meant to be announced by assistive technologies, for example with font icons, special care should be used to hide it. At the moment, the only reliable way to do this is making use of a wrapper element and set `aria-hidden="true"` on it.

Fixes #37513.


git-svn-id: https://develop.svn.wordpress.org/trunk@44793 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2019-03-04 22:45:24 +00:00
parent 4a09766cb0
commit e8fa2d66d0
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/wp-includes/class-wp-admin-bar.php
View File

@ -501,14 +501,17 @@ class WP_Admin_Bar {
return;
}
$is_parent = ! empty( $node->children );
$has_link = ! empty( $node->href );
$is_parent = ! empty( $node->children );
$has_link = ! empty( $node->href );
$is_root_top_item = 'root-default' === $node->parent;
$is_top_secondary_item = 'top-secondary' === $node->parent;
// 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 . '"' : '';
$menuclass = '';
$arrow = '';
if ( $is_parent ) {
$menuclass = 'menupop ';
@ -519,6 +522,11 @@ class WP_Admin_Bar {
$menuclass .= $node->meta['class'];
}
// Print the arrow icon for the menu children with children.
if ( ! $is_root_top_item && ! $is_top_secondary_item && $is_parent ) {
$arrow = '<span class="wp-admin-bar-arrow" aria-hidden="true"></span>';
}
if ( $menuclass ) {
$menuclass = ' class="' . esc_attr( trim( $menuclass ) ) . '"';
}
@ -542,7 +550,7 @@ class WP_Admin_Bar {
}
}
echo ">{$node->title}";
echo ">{$arrow}{$node->title}";
if ( $has_link ) {
echo '</a>';

12
src/wp-includes/css/admin-bar.css
View File

@ -231,7 +231,8 @@ html:lang(he-il) .rtl #wpadminbar * {
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon,
#wpadminbar .ab-icon,
#wpadminbar .ab-item:before {
#wpadminbar .ab-item:before,
.wp-admin-bar-arrow {
position: relative;
float: left;
font: normal 20px/1 dashicons;
@ -308,7 +309,7 @@ html:lang(he-il) .rtl #wpadminbar * {
color: #00b9eb;
}
#wpadminbar .menupop .menupop > .ab-item:before,
#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before,
#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item:before {
position: absolute;
font: normal 17px/1 dashicons;
@ -322,9 +323,10 @@ html:lang(he-il) .rtl #wpadminbar * {
padding-right: 2em;
}
#wpadminbar .menupop .menupop > .ab-item:before {
#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before {
top: 1px;
right: 4px;
right: 10px;
padding: 4px 0;
content: "\f139";
color: inherit;
}
@ -334,7 +336,7 @@ html:lang(he-il) .rtl #wpadminbar * {
padding-right: 1em;
}
#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item:before {
#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item .wp-admin-bar-arrow:before {
top: 1px;
left: 6px;
content: "\f141";