Make WordPress Core


Ignore:
Timestamp:
05/22/2017 08:23:49 PM (8 years ago)
Author:
afercia
Message:

Widgets: Remove the title attributes used in the Tag cloud widget.

  • improves accessibility using an aria-label attribute to match the information conveyed visually with the one exposed to assistive technologies
  • adds an option in the widget to display the item counts, consistently with what other widgets already do (Archives, Categories)

Props adamsoucie, emirpprime, Samantha Miller., MikeLittle, rianrietveld, sami.keijonen, adamsilverstein, westonruter, afercia.
See #24766.
Fixes #35566.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/category-template.php

    r40043 r40816  
    660660 *
    661661 * The 'topic_count_text' argument is a nooped plural from _n_noop() to generate the
    662  * text for the tooltip of the tag link.
     662 * text for the tag link count.
    663663 *
    664664 * The 'topic_count_text_callback' argument is a function, which given the count
    665  * of the posts with that tag returns a text for the tooltip of the tag link.
     665 * of the posts with that tag returns a text for the tag link count.
    666666 *
    667667 * The 'post_type' argument is used only when 'link' is set to 'edit'. It determines the post_type
     
    672672 *
    673673 * @since 2.3.0
     674 * @since 4.8.0 Added the `show_count` argument.
    674675 *
    675676 * @param array|string|null $args Optional. Override default arguments.
     
    681682        'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45,
    682683        'format' => 'flat', 'separator' => "\n", 'orderby' => 'name', 'order' => 'ASC',
    683         'exclude' => '', 'include' => '', 'link' => 'view', 'taxonomy' => 'post_tag', 'post_type' => '', 'echo' => true
     684        'exclude' => '', 'include' => '', 'link' => 'view', 'taxonomy' => 'post_tag', 'post_type' => '', 'echo' => true,
     685        'show_count' => 0,
    684686    );
    685687    $args = wp_parse_args( $args, $defaults );
     
    737739 * @todo Complete functionality.
    738740 * @since 2.3.0
     741 * @since 4.8.0 Added the `show_count` argument.
    739742 *
    740743 * @param array $tags List of tags.
     
    767770 *                                                via {@see 'wp_generate_tag_cloud'}. Default 1|true.
    768771 *     @type string   $topic_count_text           Nooped plural text from _n_noop() to supply to
    769  *                                                tag tooltips. Default null.
     772 *                                                tag counts. Default null.
    770773 *     @type callable $topic_count_text_callback  Callback used to generate nooped plural text for
    771  *                                                tag tooltips based on the count. Default null.
     774 *                                                tag counts based on the count. Default null.
    772775 *     @type callable $topic_count_scale_callback Callback used to determine the tag count scaling
    773776 *                                                value. Default default_topic_count_scale().
     777 *     @type bool|int $show_count                 Whether to display the tag counts. Default 0. Accepts
     778 *                                                0, 1, or their bool equivalents.
    774779 * }
    775780 * @return string|array Tag cloud as a string or an array, depending on 'format' argument.
     
    781786        'topic_count_text' => null, 'topic_count_text_callback' => null,
    782787        'topic_count_scale_callback' => 'default_topic_count_scale', 'filter' => 1,
     788        'show_count' => 0,
    783789    );
    784790
     
    791797    }
    792798
    793     // Juggle topic count tooltips:
     799    // Juggle topic counts.
    794800    if ( isset( $args['topic_count_text'] ) ) {
    795801        // First look for nooped plural support via topic_count_text.
     
    798804        // Look for the alternative callback style. Ignore the previous default.
    799805        if ( $args['topic_count_text_callback'] === 'default_topic_count_text' ) {
    800             $translate_nooped_plural = _n_noop( '%s topic', '%s topics' );
     806            $translate_nooped_plural = _n_noop( '%s item', '%s items' );
    801807        } else {
    802808            $translate_nooped_plural = false;
     
    807813    } else {
    808814        // This is the default for when no callback, plural, or argument is passed in.
    809         $translate_nooped_plural = _n_noop( '%s topic', '%s topics' );
     815        $translate_nooped_plural = _n_noop( '%s item', '%s items' );
    810816    }
    811817
     
    862868    $font_step = $font_spread / $spread;
    863869
     870    $aria_label = false;
     871    /*
     872     * Determine whether to output an 'aria-label' attribute with the tag name and count.
     873     * When tags have a different font size, they visually convey an important information
     874     * that should be available to assistive technologies too. On the other hand, sometimes
     875     * themes set up the Tag Cloud to display all tags with the same font size (setting
     876     * the 'smallest' and 'largest' arguments to the same value).
     877     * In order to always serve the same content to all users, the 'aria-label' gets printed out:
     878     * - when tags have a different size
     879     * - when the tag count is displayed (for example when users check the checkbox in the
     880     *   Tag Cloud widget), regardless of the tags font size
     881     */
     882    if ( $args['show_count'] || 0 !== $font_spread ) {
     883        $aria_label = true;
     884    }
     885
    864886    // Assemble the data that will be used to generate the tag cloud markup.
    865887    $tags_data = array();
     
    871893
    872894        if ( $translate_nooped_plural ) {
    873             $title = sprintf( translate_nooped_plural( $translate_nooped_plural, $real_count ), number_format_i18n( $real_count ) );
     895            $formatted_count = sprintf( translate_nooped_plural( $translate_nooped_plural, $real_count ), number_format_i18n( $real_count ) );
    874896        } else {
    875             $title = call_user_func( $args['topic_count_text_callback'], $real_count, $tag, $args );
     897            $formatted_count = call_user_func( $args['topic_count_text_callback'], $real_count, $tag, $args );
    876898        }
    877899
    878900        $tags_data[] = array(
    879             'id'         => $tag_id,
    880             'url'        => '#' != $tag->link ? $tag->link : '#',
    881             'role'       => '#' != $tag->link ? '' : ' role="button"',
    882             'name'       => $tag->name,
    883             'title'      => $title,
    884             'slug'       => $tag->slug,
    885             'real_count' => $real_count,
    886             'class'      => 'tag-link-' . $tag_id,
    887             'font_size'  => $args['smallest'] + ( $count - $min_count ) * $font_step,
     901            'id'              => $tag_id,
     902            'url'             => '#' != $tag->link ? $tag->link : '#',
     903            'role'            => '#' != $tag->link ? '' : ' role="button"',
     904            'name'            => $tag->name,
     905            'formatted_count' => $formatted_count,
     906            'slug'            => $tag->slug,
     907            'real_count'      => $real_count,
     908            'class'           => 'tag-cloud-link tag-link-' . $tag_id,
     909            'font_size'       => $args['smallest'] + ( $count - $min_count ) * $font_step,
     910            'aria_label'      => $aria_label ? sprintf( ' aria-label="%1$s (%2$s)"', esc_attr( $tag->name ), esc_attr( $formatted_count ) ) : '',
     911            'show_count'      => $args['show_count'] ? '<span class="tag-link-count"> (' . $real_count . ')</span>' : '',
    888912        );
    889913    }
     
    900924    $a = array();
    901925
    902     // generate the output links array
     926    // Generate the output links array.
    903927    foreach ( $tags_data as $key => $tag_data ) {
    904928        $class = $tag_data['class'] . ' tag-link-position-' . ( $key + 1 );
    905         $a[] = "<a href='" . esc_url( $tag_data['url'] ) . "'" . $tag_data['role'] . " class='" . esc_attr( $class ) . "' title='" . esc_attr( $tag_data['title'] ) . "' style='font-size: " . esc_attr( str_replace( ',', '.', $tag_data['font_size'] ) . $args['unit'] ) . ";'>" . esc_html( $tag_data['name'] ) . "</a>";
     929        $a[] = sprintf(
     930            '<a href="%1$s"%2$s class="%3$s" style="font-size: %4$s;"%5$s>%6$s%7$s</a>',
     931            esc_url( $tag_data['url'] ),
     932            $tag_data['role'],
     933            esc_attr( $class ),
     934            esc_attr( str_replace( ',', '.', $tag_data['font_size'] ) . $args['unit'] ),
     935            $tag_data['aria_label'],
     936            esc_html( $tag_data['name'] ),
     937            $tag_data['show_count']
     938        );
    906939    }
    907940
     
    911944            break;
    912945        case 'list' :
    913             $return = "<ul class='wp-tag-cloud'>\n\t<li>";
     946            /*
     947             * Force role="list", as some browsers (sic: Safari 10) don't expose to assistive
     948             * technologies the default role when the list is styled with `list-style: none`.
     949             * Note: this is redundant but doesn't harm.
     950             */
     951            $return = "<ul class='wp-tag-cloud' role='list'>\n\t<li>";
    914952            $return .= join( "</li>\n\t<li>", $a );
    915953            $return .= "</li>\n</ul>\n";
Note: See TracChangeset for help on using the changeset viewer.