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

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

Browse Source 
CSS generated content is going to be rendered for speech output more and more in
the next future. When it's not intended to be available for speech output, for
example with font icons, then special care should be used to hide it from
assistive technologies. 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@38984 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2016-10-27 20:52:20 +00:00
parent cc6925d1d5
commit 6cc9480fd8
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -474,20 +474,27 @@ class WP_Admin_Bar {
if ( $node->type != 'item' )
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 = '';
$menuclass = $arrow_right = '';
if ( $is_parent ) {
$menuclass = 'menupop ';
$aria_attributes .= ' aria-haspopup="true"';
}
// Print the right arrow icon for the primary menu children with children.
if ( ! $is_root_top_item && ! $is_top_secondary_item && $is_parent ) {
$arrow_right = '<span class="wp-admin-bar-arrow-right" aria-hidden="true"></span>';
}
if ( ! empty( $node->meta['class'] ) )
$menuclass .= $node->meta['class'];
@ -532,7 +539,7 @@ class WP_Admin_Bar {
?>><?php
endif;
echo $node->title;
echo $arrow_right . $node->title;
if ( $has_link ) :
?></a><?php

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

@ -234,7 +234,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-right {
position: relative;
float: left;
font: normal 20px/1 dashicons;
@ -312,7 +313,7 @@ html:lang(he-il) .rtl #wpadminbar * {
color: #00b9eb;
}
#wpadminbar .menupop .menupop > .ab-item:before,
#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow-right:before,
#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item:before {
position: absolute;
font: normal 17px/1 dashicons;
@ -326,9 +327,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-right:before {
top: 1px;
right: 4px;
right: 10px;
padding: 4px 0;
content: "\f139";
color: inherit;
}