Changeset 38984

Timestamp:

10/27/2016 08:52:20 PM (8 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src/wp-includes

Files:

• class-wp-admin-bar.php (modified) (3 diffs)
• css/admin-bar.css (modified) (3 diffs)

trunk/src/wp-includes/class-wp-admin-bar.php

@@ -475 +475 @@
             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.
@@ -482 +484 @@
         $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>';
         }
 
@@ -533 +540 @@
             endif;
 
-            echo $node->title;
+            echo $arrow_right . $node->title;
 
             if ( $has_link ) :

trunk/src/wp-includes/css/admin-bar.css

@@ -235 +235 @@
 #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;
@@ -313 +314 @@
 }
 
-#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;
@@ -327 +328 @@
 }
 
-#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;