WordPress.org

Make WordPress Core

Changeset 41563


Ignore:
Timestamp:
09/22/2017 11:27:44 AM (2 years ago)
Author:
SergeyBiryukov
Message:

Taxonomy: Convert tag cloud in Tags meta box to a list (<ul>) for better semantics and accessibility.

An unordered list allows screen reader users to know in advance how many tags are within the list.

Props audrasjb, afercia.
Fixes #40187.

Location:
trunk/src/wp-admin
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/edit.css

    r41062 r41563  
    575575}
    576576
    577 .tagchecklist > span {
     577.tagchecklist > li {
    578578    float: left;
    579579    margin-right: 25px;
     
    10501050.tagcloud h2 {
    10511051    margin: 2px 0 12px;
     1052}
     1053
     1054.the-tagcloud ul {
     1055    margin: 0;
     1056}
     1057
     1058.the-tagcloud ul li {
     1059    display: inline-block;
    10521060}
    10531061
     
    14411449    }
    14421450
    1443     .tagchecklist > span {
     1451    .tagchecklist > li {
    14441452        font-size: 16px;
    14451453        line-height: 1.4;
  • trunk/src/wp-admin/css/ie.css

    r38880 r41563  
    442442}
    443443
    444 .tagchecklist > span, .tagchecklist .ntdelbutton {
     444.tagchecklist > li, .tagchecklist .ntdelbutton {
    445445    display: inline-block;
    446446    display: block;
  • trunk/src/wp-admin/css/press-this.css

    r41062 r41563  
    766766/* Tags */
    767767.tagchecklist {
     768    margin: 0;
    768769    padding: 16px 28px 5px;
     770    list-style: none;
    769771}
    770772
     
    779781}
    780782
    781 .tagchecklist > span {
     783.tagchecklist > li {
    782784    float: left;
    783785    margin-right: 25px;
     
    789791
    790792@media (max-width: 600px) {
    791     .tagchecklist > span {
     793    .tagchecklist > li {
    792794        margin-bottom: 15px;
    793795        font-size: 16px;
     
    876878    margin: 0;
    877879    padding: 16px;
     880}
     881
     882.the-tagcloud ul {
     883    margin: 0;
     884    padding: 0;
     885    list-style: none;
     886}
     887
     888.the-tagcloud ul li {
     889    display: inline-block;
    878890}
    879891
  • trunk/src/wp-admin/includes/ajax-actions.php

    r41292 r41563  
    964964
    965965    // We need raw tag names here, so don't filter the output
    966     $return = wp_generate_tag_cloud( $tags, array('filter' => 0) );
     966    $return = wp_generate_tag_cloud( $tags, array( 'filter' => 0, 'format' => 'list' ) );
    967967
    968968    if ( empty($return) )
  • trunk/src/wp-admin/includes/class-wp-press-this.php

    r41347 r41563  
    948948            ?>
    949949            </div>
    950             <div class="tagchecklist"></div>
     950            <ul class="tagchecklist" role="list"></ul>
    951951        </div>
    952952        <?php
  • trunk/src/wp-admin/includes/meta-boxes.php

    r40984 r41563  
    454454    <?php endif; ?>
    455455    </div>
    456     <div class="tagchecklist"></div>
     456    <ul class="tagchecklist" role="list"></ul>
    457457</div>
    458458<?php if ( $user_can_assign_terms ) : ?>
  • trunk/src/wp-admin/js/tags-box.js

    r40181 r41563  
    7575
    7676            $.each( current_tags, function( key, val ) {
    77                 var span, xbutton;
     77                var listItem, xbutton;
    7878
    7979                val = $.trim( val );
     
    8282                    return;
    8383
    84                 // Create a new span, and ensure the text is properly escaped.
    85                 span = $('<span />').text( val );
     84                // Create a new list item, and ensure the text is properly escaped.
     85                listItem = $( '<li />' ).text( val );
    8686
    8787                // If tags editing isn't disabled, create the X button.
     
    9393                    xbutton = $( '<button type="button" id="' + id + '-check-num-' + key + '" class="ntdelbutton">' +
    9494                        '<span class="remove-tag-icon" aria-hidden="true"></span>' +
    95                         '<span class="screen-reader-text">' + window.tagsSuggestL10n.removeTerm + ' ' + span.html() + '</span>' +
     95                        '<span class="screen-reader-text">' + window.tagsSuggestL10n.removeTerm + ' ' + listItem.html() + '</span>' +
    9696                        '</button>' );
    9797
     
    113113                    });
    114114
    115                     span.prepend( '&nbsp;' ).prepend( xbutton );
    116                 }
    117 
    118                 // Append the span to the tag list.
    119                 tagchecklist.append( span );
     115                    listItem.prepend( '&nbsp;' ).prepend( xbutton );
     116                }
     117
     118                // Append the list item to the tag list.
     119                tagchecklist.append( listItem );
    120120            });
    121121            // The buttons list is built now, give feedback to screen reader users.
     
    167167                }
    168168
    169                 r = $( '<p id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</p>' );
     169                r = $( '<div id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</div>' );
    170170
    171171                $( 'a', r ).click( function() {
Note: See TracChangeset for help on using the changeset viewer.