From 6cc9480fd82cbf2704cac483a0bdfa20d82b09a1 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Thu, 27 Oct 2016 20:52:20 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@38984 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/class-wp-admin-bar.php | 15 +++++++++++----
 src/wp-includes/css/admin-bar.css      | 10 ++++++----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/wp-includes/class-wp-admin-bar.php b/src/wp-includes/class-wp-admin-bar.php
index 49986ac225..b0a5e5d733 100644
--- a/src/wp-includes/class-wp-admin-bar.php
+++ b/src/wp-includes/class-wp-admin-bar.php
@@ -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
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index e108a8e6bc..9a74437a2f 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -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;
 }