Changeset 41563

Timestamp:

09/22/2017 11:27:44 AM (7 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:

• css/edit.css (modified) (3 diffs)
• css/ie.css (modified) (1 diff)
• css/press-this.css (modified) (4 diffs)
• includes/ajax-actions.php (modified) (1 diff)
• includes/class-wp-press-this.php (modified) (1 diff)
• includes/meta-boxes.php (modified) (1 diff)
• js/tags-box.js (modified) (5 diffs)

trunk/src/wp-admin/css/edit.css

@@ -575 +575 @@
 }
 
-.tagchecklist > span {
+.tagchecklist > li {
     float: left;
     margin-right: 25px;
@@ -1050 +1050 @@
 .tagcloud h2 {
     margin: 2px 0 12px;
+}
+
+.the-tagcloud ul {
+    margin: 0;
+}
+
+.the-tagcloud ul li {
+    display: inline-block;
 }
 
@@ -1441 +1449 @@
     }
 
-    .tagchecklist > span {
+    .tagchecklist > li {
         font-size: 16px;
         line-height: 1.4;

trunk/src/wp-admin/css/ie.css

@@ -442 +442 @@
 }
 
-.tagchecklist > span, .tagchecklist .ntdelbutton {
+.tagchecklist > li, .tagchecklist .ntdelbutton {
     display: inline-block;
     display: block;

trunk/src/wp-admin/css/press-this.css

@@ -766 +766 @@
 /* Tags */
 .tagchecklist {
+    margin: 0;
     padding: 16px 28px 5px;
+    list-style: none;
 }
 
@@ -779 +781 @@
 }
 
-.tagchecklist > span {
+.tagchecklist > li {
     float: left;
     margin-right: 25px;
@@ -789 +791 @@
 
 @media (max-width: 600px) {
-    .tagchecklist > span {
+    .tagchecklist > li {
         margin-bottom: 15px;
         font-size: 16px;
@@ -876 +878 @@
     margin: 0;
     padding: 16px;
+}
+
+.the-tagcloud ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.the-tagcloud ul li {
+    display: inline-block;
 }
 

trunk/src/wp-admin/includes/ajax-actions.php

@@ -964 +964 @@
 
     // We need raw tag names here, so don't filter the output
-    $return = wp_generate_tag_cloud( $tags, array('filter' => 0) );
+    $return = wp_generate_tag_cloud( $tags, array( 'filter' => 0, 'format' => 'list' ) );
 
     if ( empty($return) )

trunk/src/wp-admin/includes/class-wp-press-this.php

@@ -948 +948 @@
             ?>
             </div>
-            <div class="tagchecklist"></div>
+            <ul class="tagchecklist" role="list"></ul>
         </div>
         <?php

trunk/src/wp-admin/includes/meta-boxes.php

@@ -454 +454 @@
     <?php endif; ?>
     </div>
-    <div class="tagchecklist"></div>
+    <ul class="tagchecklist" role="list"></ul>
 </div>
 <?php if ( $user_can_assign_terms ) : ?>

trunk/src/wp-admin/js/tags-box.js

@@ -75 +75 @@
 
             $.each( current_tags, function( key, val ) {
-                var span, xbutton;
+                var listItem, xbutton;
 
                 val = $.trim( val );
@@ -82 +82 @@
                     return;
 
-                // Create a new span, and ensure the text is properly escaped.
-                span = $('<span />').text( val );
+                // Create a new list item, and ensure the text is properly escaped.
+                listItem = $( '<li />' ).text( val );
 
                 // If tags editing isn't disabled, create the X button.
@@ -93 +93 @@
                     xbutton = $( '<button type="button" id="' + id + '-check-num-' + key + '" class="ntdelbutton">' +
                         '<span class="remove-tag-icon" aria-hidden="true"></span>' +
-                        '<span class="screen-reader-text">' + window.tagsSuggestL10n.removeTerm + ' ' + span.html() + '</span>' +
+                        '<span class="screen-reader-text">' + window.tagsSuggestL10n.removeTerm + ' ' + listItem.html() + '</span>' +
                         '</button>' );
 
@@ -113 +113 @@
                     });
 
-                    span.prepend( '&nbsp;' ).prepend( xbutton );
-                }
-
-                // Append the span to the tag list.
-                tagchecklist.append( span );
+                    listItem.prepend( '&nbsp;' ).prepend( xbutton );
+                }
+
+                // Append the list item to the tag list.
+                tagchecklist.append( listItem );
             });
             // The buttons list is built now, give feedback to screen reader users.
@@ -167 +167 @@
                 }
 
-                r = $( '<p id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</p>' );
+                r = $( '<div id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</div>' );
 
                 $( 'a', r ).click( function() {