Changeset 44793

Timestamp:

03/04/2019 10:45:24 PM (6 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src/wp-includes

Files:

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

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

@@ -502 +502 @@
         }
 
-        $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.
@@ -510 +512 @@
 
         $menuclass = '';
+        $arrow     = '';
 
         if ( $is_parent ) {
@@ -518 +521 @@
         if ( ! empty( $node->meta['class'] ) ) {
             $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>';
         }
 
@@ -543 +551 @@
         }
 
-        echo ">{$node->title}";
+        echo ">{$arrow}{$node->title}";
 
         if ( $has_link ) {

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

@@ -232 +232 @@
 #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;
@@ -309 +310 @@
 }
 
-#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;
@@ -323 +324 @@
 }
 
-#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;
@@ -335 +337 @@
 }
 
-#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;