From 0c66c82b7c46a57a62dc185375326ec09e0f854d Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Fri, 22 Sep 2017 11:27:44 +0000
Subject: [PATCH] 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@41563 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/edit.css                     | 12 ++++++++++--
 src/wp-admin/css/ie.css                       |  2 +-
 src/wp-admin/css/press-this.css               | 16 ++++++++++++++--
 src/wp-admin/includes/ajax-actions.php        |  2 +-
 src/wp-admin/includes/class-wp-press-this.php |  2 +-
 src/wp-admin/includes/meta-boxes.php          |  2 +-
 src/wp-admin/js/tags-box.js                   | 16 ++++++++--------
 7 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css
index 64b98ae99f..c4444111fc 100644
--- a/src/wp-admin/css/edit.css
+++ b/src/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;
 	}
diff --git a/src/wp-admin/css/ie.css b/src/wp-admin/css/ie.css
index df8d792494..23b90eb733 100644
--- a/src/wp-admin/css/ie.css
+++ b/src/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;
 }
diff --git a/src/wp-admin/css/press-this.css b/src/wp-admin/css/press-this.css
index bafea24d14..2c4a79d75c 100644
--- a/src/wp-admin/css/press-this.css
+++ b/src/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;
diff --git a/src/wp-admin/includes/ajax-actions.php b/src/wp-admin/includes/ajax-actions.php
index 3f3c0fc7e8..80fc95286c 100644
--- a/src/wp-admin/includes/ajax-actions.php
+++ b/src/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 );
diff --git a/src/wp-admin/includes/class-wp-press-this.php b/src/wp-admin/includes/class-wp-press-this.php
index 7f268ea028..e5351c42e3 100644
--- a/src/wp-admin/includes/class-wp-press-this.php
+++ b/src/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
 
diff --git a/src/wp-admin/includes/meta-boxes.php b/src/wp-admin/includes/meta-boxes.php
index 1d9b2834d0..e3511faf67 100644
--- a/src/wp-admin/includes/meta-boxes.php
+++ b/src/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>
diff --git a/src/wp-admin/js/tags-box.js b/src/wp-admin/js/tags-box.js
index 3867c7d6f0..0c508027f8 100644
--- a/src/wp-admin/js/tags-box.js
+++ b/src/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';