Accessibility: Improve the Tags meta box accessibility.

- changes the "X" links in buttons, improves their color contrast ratio and focus style
- adds screen reader text "Remove item: + tagname"
- uses `wp.a11y.speak()` to give screen reader users feedback when adding/removing tags
- makes the `tagcloud-link` toggle a button, with an `aria-expanded` attribute to indicate the tag cloud collapsed/expanded state
- changes colors for the autocomplete highlighted option in order to have a better color contrast ratio
- reduces the font size for the autocomplete on Press This
- removes CSS related to the old `suggest.js` from Press This

Props joedolson, cgrymala, azaozz, afercia.
Fixes #27555.

Built from https://develop.svn.wordpress.org/trunk@38880


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

wp-admin/css/edit-rtl.css

@@ -582,10 +582,9 @@ span.wp-media-buttons-icon:before {
 	position: absolute;
 }
 
-.tagchecklist span {
-	margin-left: 25px;
-	display: block;
+.tagchecklist > span {
 	float: right;
+	margin-left: 25px;
 	font-size: 13px;
 	line-height: 1.8em;
 	cursor: default;
@@ -594,16 +593,16 @@ span.wp-media-buttons-icon:before {
 	text-overflow: ellipsis;
 }
 
-.tagchecklist span a {
-	margin: 1px -17px 0 0;
-	cursor: pointer;
-	width: 20px;
-	height: 20px;
-	display: block;
-	float: right;
-	text-indent: 0;
-	overflow: hidden;
+.tagchecklist .ntdelbutton {
 	position: absolute;
+	width: 24px;
+	height: 24px;
+	border: none;
+	margin: 0 -19px 0 0;
+	padding: 0;
+	background: none;
+	cursor: pointer;
+	text-indent: 0;
 }
 
 #poststuff h3.hndle, /* Back-compat for pre-4.4 */
@@ -1027,6 +1026,25 @@ span.description,
 	width: 260px;
 }
 
+.tagcloud-link.button-link {
+	color: #0073aa;
+	text-decoration: underline;
+}
+
+.tagcloud-link.button-link:hover {
+	color: #00a0d2;
+}
+
+.tagcloud-link.button-link:focus {
+	color: #124964;
+	-webkit-box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
 #post-body-content .tagsdiv .the-tags {
 	margin: 0 5px;
 }
@@ -1052,6 +1070,7 @@ p.popular-tags a {
 	margin: 2px 0 12px;
 }
 
+/* Suggest.js autocomplete, no more used by core. */
 .ac_results {
 	display: none;
 	margin: -1px 0 0;
@@ -1438,7 +1457,7 @@ table.links-table {
 		margin: 25px 10px;
 	}
 
-	.tagchecklist span {
+	.tagchecklist > span {
 		font-size: 16px;
 		line-height: 1.4;
 	}