WordPress.org

Make WordPress Core

Changeset 44793


Ignore:
Timestamp:
03/04/2019 10:45:24 PM (7 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-admin-bar.php

    r44639 r44793  
    502502        }
    503503
    504         $is_parent = ! empty( $node->children );
    505         $has_link  = ! empty( $node->href );
     504        $is_parent             = ! empty( $node->children );
     505        $has_link              = ! empty( $node->href );
     506        $is_root_top_item      = 'root-default' === $node->parent;
     507        $is_top_secondary_item = 'top-secondary' === $node->parent;
    506508
    507509        // Allow only numeric values, then casted to integers, and allow a tabindex value of `0` for a11y.
     
    510512
    511513        $menuclass = '';
     514        $arrow     = '';
    512515
    513516        if ( $is_parent ) {
     
    518521        if ( ! empty( $node->meta['class'] ) ) {
    519522            $menuclass .= $node->meta['class'];
     523        }
     524
     525        // Print the arrow icon for the menu children with children.
     526        if ( ! $is_root_top_item && ! $is_top_secondary_item && $is_parent ) {
     527            $arrow = '<span class="wp-admin-bar-arrow" aria-hidden="true"></span>';
    520528        }
    521529
     
    543551        }
    544552
    545         echo ">{$node->title}";
     553        echo ">{$arrow}{$node->title}";
    546554
    547555        if ( $has_link ) {
  • trunk/src/wp-includes/css/admin-bar.css

    r44791 r44793  
    232232#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-icon,
    233233#wpadminbar .ab-icon,
    234 #wpadminbar .ab-item:before {
     234#wpadminbar .ab-item:before,
     235.wp-admin-bar-arrow {
    235236    position: relative;
    236237    float: left;
     
    309310}
    310311
    311 #wpadminbar .menupop .menupop > .ab-item:before,
     312#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before,
    312313#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item:before {
    313314    position: absolute;
     
    323324}
    324325
    325 #wpadminbar .menupop .menupop > .ab-item:before {
     326#wpadminbar .menupop .menupop > .ab-item .wp-admin-bar-arrow:before {
    326327    top: 1px;
    327     right: 4px;
     328    right: 10px;
     329    padding: 4px 0;
    328330    content: "\f139";
    329331    color: inherit;
     
    335337}
    336338
    337 #wpadminbar .ab-top-secondary .menupop .menupop > .ab-item:before {
     339#wpadminbar .ab-top-secondary .menupop .menupop > .ab-item .wp-admin-bar-arrow:before {
    338340    top: 1px;
    339341    left: 6px;
Note: See TracChangeset for help on using the changeset viewer.