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

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.

Built from https://develop.svn.wordpress.org/trunk@38984


git-svn-id: http://core.svn.wordpress.org/trunk@38927 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2016-10-27 20:53:30 +00:00
parent 7a60d6571c
commit 7b0abd1cea
6 changed files with 26 additions and 15 deletions

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

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: right;
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-left: 2em;
}
#wpadminbar .menupop .menupop > .ab-item:before {
#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow-right:before {
top: 1px;
left: 4px;
left: 10px;
padding: 4px 0;
content: "\f141";
color: inherit;
}

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.7-alpha-38983';
$wp_version = '4.7-alpha-38984';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.