From e8fa2d66d03d72d933b1e56645ccbf842b2e94e1 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Mon, 4 Mar 2019 22:45:24 +0000
Subject: [PATCH] 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.


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

diff --git a/src/wp-includes/class-wp-admin-bar.php b/src/wp-includes/class-wp-admin-bar.php
index 6fb5486bf4..c7813a37e5 100644
--- a/src/wp-includes/class-wp-admin-bar.php
+++ b/src/wp-includes/class-wp-admin-bar.php
@@ -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>';
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index 2dc26d6733..ae35741489 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -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";