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

afercia · afercia · commit 6cc9480fd82c · 2016-10-27T20:52:20.000Z
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
diff --git a/src/wp-includes/class-wp-admin-bar.php b/src/wp-includes/class-wp-admin-bar.php
@@ -474,20 +474,27 @@ final protected function _render_item( $node ) {
 		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 @@ final protected function _render_item( $node ) {
 				?>><?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
@@ -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;
 }
