Accessibility: Hide the Toolbar sub-menu CSS generated icons from assistive technologies.
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. Built from https://develop.svn.wordpress.org/trunk@44793 git-svn-id: http://core.svn.wordpress.org/trunk@44625 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
85d60b2d7a
commit
9e8d0c14d3
|
@ -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>';
|
||||
|
|
|
@ -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: right;
|
||||
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-left: 2em;
|
||||
}
|
||||
|
||||
#wpadminbar .menupop .menupop > .ab-item:before {
|
||||
#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before {
|
||||
top: 1px;
|
||||
left: 4px;
|
||||
left: 10px;
|
||||
padding: 4px 0;
|
||||
content: "\f141";
|
||||
color: inherit;
|
||||
}
|
||||
|
@ -334,7 +336,7 @@ html:lang(he-il) .rtl #wpadminbar * {
|
|||
padding-left: 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;
|
||||
right: 6px;
|
||||
content: "\f139";
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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";
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -13,7 +13,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.2-alpha-44792';
|
||||
$wp_version = '5.2-alpha-44793';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
Loading…
Reference in New Issue