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.
Built from https://develop.svn.wordpress.org/trunk@41563


git-svn-id: http://core.svn.wordpress.org/trunk@41396 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/edit-rtl.css

@@ -574,7 +574,7 @@ span.wp-media-buttons-icon:before {
 	position: absolute;
 }
 
-.tagchecklist > span {
+.tagchecklist > li {
 	float: right;
 	margin-left: 25px;
 	font-size: 13px;
@@ -1051,6 +1051,14 @@ p.popular-tags a {
 	margin: 2px 0 12px;
 }
 
+.the-tagcloud ul {
+	margin: 0;
+}
+
+.the-tagcloud ul li {
+	display: inline-block;
+}
+
 /* Suggest.js autocomplete, no more used by core. */
 .ac_results {
 	display: none;
@@ -1440,7 +1448,7 @@ table.links-table {
 		margin: 25px 10px;
 	}
 
-	.tagchecklist > span {
+	.tagchecklist > li {
 		font-size: 16px;
 		line-height: 1.4;
 	}

wp-admin/css/edit.css

@@ -574,7 +574,7 @@ span.wp-media-buttons-icon:before {
 	position: absolute;
 }
 
-.tagchecklist > span {
+.tagchecklist > li {
 	float: left;
 	margin-right: 25px;
 	font-size: 13px;
@@ -1051,6 +1051,14 @@ p.popular-tags a {
 	margin: 2px 0 12px;
 }
 
+.the-tagcloud ul {
+	margin: 0;
+}
+
+.the-tagcloud ul li {
+	display: inline-block;
+}
+
 /* Suggest.js autocomplete, no more used by core. */
 .ac_results {
 	display: none;
@@ -1440,7 +1448,7 @@ table.links-table {
 		margin: 25px 10px;
 	}
 
-	.tagchecklist > span {
+	.tagchecklist > li {
 		font-size: 16px;
 		line-height: 1.4;
 	}

wp-admin/css/ie-rtl.css

@@ -441,7 +441,7 @@ div#dashboard-widgets {
 	padding-left: 1px;
 }
 
-.tagchecklist > span, .tagchecklist .ntdelbutton {
+.tagchecklist > li, .tagchecklist .ntdelbutton {
 	display: inline-block;
 	display: block;
 }

wp-admin/css/ie.css

@@ -441,7 +441,7 @@ div#dashboard-widgets {
 	padding-right: 1px;
 }
 
-.tagchecklist > span, .tagchecklist .ntdelbutton {
+.tagchecklist > li, .tagchecklist .ntdelbutton {
 	display: inline-block;
 	display: block;
 }

wp-admin/css/press-this-rtl.css

@@ -765,7 +765,9 @@ dd {
 
 /* Tags */
 .tagchecklist {
+	margin: 0;
 	padding: 16px 28px 5px;
+	list-style: none;
 }
 
 .tagchecklist:before,
@@ -778,7 +780,7 @@ dd {
 	clear: both;
 }
 
-.tagchecklist > span {
+.tagchecklist > li {
 	float: right;
 	margin-left: 25px;
 	font-size: 13px;
@@ -788,7 +790,7 @@ dd {
 }
 
 @media (max-width: 600px) {
-	.tagchecklist > span {
+	.tagchecklist > li {
 		margin-bottom: 15px;
 		font-size: 16px;
 		line-height: 1.3;
@@ -877,6 +879,16 @@ dd {
 	padding: 16px;
 }
 
+.the-tagcloud ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.the-tagcloud ul li {
+	display: inline-block;
+}
+
 .the-tagcloud a {
 	text-decoration: none;
 	outline: 0;

wp-admin/css/press-this.css

@@ -765,7 +765,9 @@ dd {
 
 /* Tags */
 .tagchecklist {
+	margin: 0;
 	padding: 16px 28px 5px;
+	list-style: none;
 }
 
 .tagchecklist:before,
@@ -778,7 +780,7 @@ dd {
 	clear: both;
 }
 
-.tagchecklist > span {
+.tagchecklist > li {
 	float: left;
 	margin-right: 25px;
 	font-size: 13px;
@@ -788,7 +790,7 @@ dd {
 }
 
 @media (max-width: 600px) {
-	.tagchecklist > span {
+	.tagchecklist > li {
 		margin-bottom: 15px;
 		font-size: 16px;
 		line-height: 1.3;
@@ -877,6 +879,16 @@ dd {
 	padding: 16px;
 }
 
+.the-tagcloud ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.the-tagcloud ul li {
+	display: inline-block;
+}
+
 .the-tagcloud a {
 	text-decoration: none;
 	outline: 0;

wp-admin/includes/ajax-actions.php

@@ -963,7 +963,7 @@ function wp_ajax_get_tagcloud() {
 	}
 
 	// 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) )
 		wp_die( 0 );

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

@@ -947,7 +947,7 @@ class WP_Press_This {
 
 			?>
 			</div>
-			<div class="tagchecklist"></div>
+			<ul class="tagchecklist" role="list"></ul>
 		</div>
 		<?php
 

wp-admin/includes/meta-boxes.php

@@ -453,7 +453,7 @@ function post_tags_meta_box( $post, $box ) {
 		<p><?php echo $taxonomy->labels->no_terms; ?></p>
 	<?php endif; ?>
 	</div>
-	<div class="tagchecklist"></div>
+	<ul class="tagchecklist" role="list"></ul>
 </div>
 <?php if ( $user_can_assign_terms ) : ?>
 <p class="hide-if-no-js"><button type="button" class="button-link tagcloud-link" id="link-<?php echo $tax_name; ?>" aria-expanded="false"><?php echo $taxonomy->labels->choose_from_most_used; ?></button></p>

wp-admin/js/tags-box.js

@@ -74,15 +74,15 @@ var tagBox, array_unique_noempty;
 			tagchecklist.empty();
 
 			$.each( current_tags, function( key, val ) {
-				var span, xbutton;
+				var listItem, xbutton;
 
 				val = $.trim( val );
 
 				if ( ! val )
 					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.
 				if ( ! disabled ) {
@@ -92,7 +92,7 @@ var tagBox, array_unique_noempty;
 					 */
 					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>' );
 
 					xbutton.on( 'click keypress', function( e ) {
@@ -112,11 +112,11 @@ var tagBox, array_unique_noempty;
 						}
 					});
 
-					span.prepend( '&nbsp;' ).prepend( xbutton );
+					listItem.prepend( '&nbsp;' ).prepend( xbutton );
 				}
 
-				// Append the span to the tag list.
-				tagchecklist.append( span );
+				// Append the list item to the tag list.
+				tagchecklist.append( listItem );
 			});
 			// The buttons list is built now, give feedback to screen reader users.
 			tagBox.screenReadersMessage();
@@ -166,7 +166,7 @@ var tagBox, array_unique_noempty;
 					return;
 				}
 
-				r = $( '<p id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</p>' );
+				r = $( '<div id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</div>' );
 
 				$( 'a', r ).click( function() {
 					tagBox.userAction = 'add';

wp-admin/js/tags-box.min.js

@@ -1 +1 @@
-var tagBox,array_unique_noempty;!function(a){var b=window.tagsSuggestL10n&&window.tagsSuggestL10n.tagDelimiter||",";array_unique_noempty=function(b){var c=[];return a.each(b,function(b,d){d=a.trim(d),d&&a.inArray(d,c)===-1&&c.push(d)}),c},tagBox={clean:function(a){return","!==b&&(a=a.replace(new RegExp(b,"g"),",")),a=a.replace(/\s*,\s*/g,",").replace(/,+/g,",").replace(/[,\s]+$/,"").replace(/^[,\s]+/,""),","!==b&&(a=a.replace(/,/g,b)),a},parseTags:function(c){var d=c.id,e=d.split("-check-num-")[1],f=a(c).closest(".tagsdiv"),g=f.find(".the-tags"),h=g.val().split(b),i=[];return delete h[e],a.each(h,function(b,c){c=a.trim(c),c&&i.push(c)}),g.val(this.clean(i.join(b))),this.quickClicks(f),!1},quickClicks:function(c){var d,e,f=a(".the-tags",c),g=a(".tagchecklist",c),h=a(c).attr("id");f.length&&(e=f.prop("disabled"),d=f.val().split(b),g.empty(),a.each(d,function(b,c){var d,f;c=a.trim(c),c&&(d=a("<span />").text(c),e||(f=a('<button type="button" id="'+h+"-check-num-"+b+'" class="ntdelbutton"><span class="remove-tag-icon" aria-hidden="true"></span><span class="screen-reader-text">'+window.tagsSuggestL10n.removeTerm+" "+d.html()+"</span></button>"),f.on("click keypress",function(b){"click"!==b.type&&13!==b.keyCode&&32!==b.keyCode||(13!==b.keyCode&&32!==b.keyCode||a(this).closest(".tagsdiv").find("input.newtag").focus(),tagBox.userAction="remove",tagBox.parseTags(this))}),d.prepend("&nbsp;").prepend(f)),g.append(d))}),tagBox.screenReadersMessage())},flushTags:function(c,d,e){var f,g,h,i=a(".the-tags",c),j=a("input.newtag",c);return d=d||!1,h=d?a(d).text():j.val(),"undefined"!=typeof h&&""!==h&&(f=i.val(),g=f?f+b+h:h,g=this.clean(g),g=array_unique_noempty(g.split(b)).join(b),i.val(g),this.quickClicks(c),d||j.val(""),"undefined"==typeof e&&j.focus(),!1)},get:function(b){var c=b.substr(b.indexOf("-")+1);a.post(ajaxurl,{action:"get-tagcloud",tax:c},function(d,e){0!==d&&"success"==e&&(d=a('<p id="tagcloud-'+c+'" class="the-tagcloud">'+d+"</p>"),a("a",d).click(function(){return tagBox.userAction="add",tagBox.flushTags(a("#"+c),this),!1}),a("#"+b).after(d))})},userAction:"",screenReadersMessage:function(){var a;switch(this.userAction){case"remove":a=window.tagsSuggestL10n.termRemoved;break;case"add":a=window.tagsSuggestL10n.termAdded;break;default:return}window.wp.a11y.speak(a,"assertive")},init:function(){var b=a("div.ajaxtag");a(".tagsdiv").each(function(){tagBox.quickClicks(this)}),a(".tagadd",b).click(function(){tagBox.userAction="add",tagBox.flushTags(a(this).closest(".tagsdiv"))}),a("input.newtag",b).keyup(function(b){13==b.which&&(tagBox.userAction="add",tagBox.flushTags(a(this).closest(".tagsdiv")),b.preventDefault(),b.stopPropagation())}).keypress(function(a){13==a.which&&(a.preventDefault(),a.stopPropagation())}).each(function(b,c){a(c).wpTagsSuggest()}),a("#post").submit(function(){a("div.tagsdiv").each(function(){tagBox.flushTags(this,!1,1)})}),a(".tagcloud-link").click(function(){tagBox.get(a(this).attr("id")),a(this).attr("aria-expanded","true").unbind().click(function(){a(this).attr("aria-expanded","false"===a(this).attr("aria-expanded")?"true":"false").siblings(".the-tagcloud").toggle()})})}}}(jQuery);
+var tagBox,array_unique_noempty;!function(a){var b=window.tagsSuggestL10n&&window.tagsSuggestL10n.tagDelimiter||",";array_unique_noempty=function(b){var c=[];return a.each(b,function(b,d){d=a.trim(d),d&&a.inArray(d,c)===-1&&c.push(d)}),c},tagBox={clean:function(a){return","!==b&&(a=a.replace(new RegExp(b,"g"),",")),a=a.replace(/\s*,\s*/g,",").replace(/,+/g,",").replace(/[,\s]+$/,"").replace(/^[,\s]+/,""),","!==b&&(a=a.replace(/,/g,b)),a},parseTags:function(c){var d=c.id,e=d.split("-check-num-")[1],f=a(c).closest(".tagsdiv"),g=f.find(".the-tags"),h=g.val().split(b),i=[];return delete h[e],a.each(h,function(b,c){c=a.trim(c),c&&i.push(c)}),g.val(this.clean(i.join(b))),this.quickClicks(f),!1},quickClicks:function(c){var d,e,f=a(".the-tags",c),g=a(".tagchecklist",c),h=a(c).attr("id");f.length&&(e=f.prop("disabled"),d=f.val().split(b),g.empty(),a.each(d,function(b,c){var d,f;c=a.trim(c),c&&(d=a("<li />").text(c),e||(f=a('<button type="button" id="'+h+"-check-num-"+b+'" class="ntdelbutton"><span class="remove-tag-icon" aria-hidden="true"></span><span class="screen-reader-text">'+window.tagsSuggestL10n.removeTerm+" "+d.html()+"</span></button>"),f.on("click keypress",function(b){"click"!==b.type&&13!==b.keyCode&&32!==b.keyCode||(13!==b.keyCode&&32!==b.keyCode||a(this).closest(".tagsdiv").find("input.newtag").focus(),tagBox.userAction="remove",tagBox.parseTags(this))}),d.prepend("&nbsp;").prepend(f)),g.append(d))}),tagBox.screenReadersMessage())},flushTags:function(c,d,e){var f,g,h,i=a(".the-tags",c),j=a("input.newtag",c);return d=d||!1,h=d?a(d).text():j.val(),"undefined"!=typeof h&&""!==h&&(f=i.val(),g=f?f+b+h:h,g=this.clean(g),g=array_unique_noempty(g.split(b)).join(b),i.val(g),this.quickClicks(c),d||j.val(""),"undefined"==typeof e&&j.focus(),!1)},get:function(b){var c=b.substr(b.indexOf("-")+1);a.post(ajaxurl,{action:"get-tagcloud",tax:c},function(d,e){0!==d&&"success"==e&&(d=a('<div id="tagcloud-'+c+'" class="the-tagcloud">'+d+"</div>"),a("a",d).click(function(){return tagBox.userAction="add",tagBox.flushTags(a("#"+c),this),!1}),a("#"+b).after(d))})},userAction:"",screenReadersMessage:function(){var a;switch(this.userAction){case"remove":a=window.tagsSuggestL10n.termRemoved;break;case"add":a=window.tagsSuggestL10n.termAdded;break;default:return}window.wp.a11y.speak(a,"assertive")},init:function(){var b=a("div.ajaxtag");a(".tagsdiv").each(function(){tagBox.quickClicks(this)}),a(".tagadd",b).click(function(){tagBox.userAction="add",tagBox.flushTags(a(this).closest(".tagsdiv"))}),a("input.newtag",b).keyup(function(b){13==b.which&&(tagBox.userAction="add",tagBox.flushTags(a(this).closest(".tagsdiv")),b.preventDefault(),b.stopPropagation())}).keypress(function(a){13==a.which&&(a.preventDefault(),a.stopPropagation())}).each(function(b,c){a(c).wpTagsSuggest()}),a("#post").submit(function(){a("div.tagsdiv").each(function(){tagBox.flushTags(this,!1,1)})}),a(".tagcloud-link").click(function(){tagBox.get(a(this).attr("id")),a(this).attr("aria-expanded","true").unbind().click(function(){a(this).attr("aria-expanded","false"===a(this).attr("aria-expanded")?"true":"false").siblings(".the-tagcloud").toggle()})})}}}(jQuery);

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-alpha-41562';
+$wp_version = '4.9-alpha-41563';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.