Accessibility: Add Themes Feature Filter form improvements.

- adds "Apply Filters" and "Clear" at the end of the form
- changes the "Feature Filter", "Apply Filters", "Clear", and "Edit" links in `<button>` elements
- removes a leftover from [27963]
- clarifies one button text and adds an `aria-label` attribute
- adds a `wp.a11y.speak()` message when clicking on "Apply Filters" and no features are selected

Fixes #38086.

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


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

wp-admin/css/common-rtl.css

@@ -1045,39 +1045,53 @@ th.action-links {
 	display: inline-block;
 }
 
-.wp-filter .drawer-toggle {
-	display: inline-block;
-	margin: 0 10px;
-	padding: 4px 6px;
+.wp-filter .button.drawer-toggle {
+	margin: 10px 9px 0;
+	padding: 0 6px 0 10px;
+	border-color: transparent;
+	background-color: transparent;
 	color: #666;
-	cursor: pointer;
+	vertical-align: baseline;
+	-webkit-box-shadow: none;
+	box-shadow: none;
 }
 
 .wp-filter .drawer-toggle:before {
-	display: inline-block;
-	vertical-align: top;
 	content: "\f111";
 	margin: 0 0 0 5px;
-	width: 16px;
-	height: 16px;
 	color: #72777c;
-	-webkit-transition: color .1s ease-in 0;
-	transition: color .1s ease-in 0;
-	font-family: dashicons;
-	font-size: 16px;
-	line-height: 1;
-	text-align: center;
-	text-decoration: inherit;
-	font-weight: 400;
-	font-style: normal;
+	font: normal 16px/1 dashicons;
+	vertical-align: text-bottom;
 	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
-.wp-filter .drawer-toggle:hover,
-.wp-filter .drawer-toggle:hover:before {
+.wp-filter .button.drawer-toggle:hover,
+.wp-filter .drawer-toggle:hover:before,
+.wp-filter .button.drawer-toggle:focus,
+.wp-filter .drawer-toggle:focus:before {
+	background-color: transparent;
 	color: #00a0d2;
 }
 
+.wp-filter .button.drawer-toggle:hover,
+.wp-filter .button.drawer-toggle:focus:active {
+	border-color: transparent;
+}
+
+.wp-filter .button.drawer-toggle:focus {
+	border-color: #5b9dd9;
+}
+
+.wp-filter .button.drawer-toggle:active {
+	background: transparent;
+	-webkit-box-shadow: none;
+	box-shadow: none;
+	-webkit-transform: none;
+	-ms-transform: none;
+	transform: none;
+}
+
 .wp-filter .drawer-toggle.current:before {
 	color: #fff;
 }
@@ -1092,7 +1106,7 @@ th.action-links {
 	width: 100%;
 }
 
-.show-favorites-form .wp-filter .favorites-form {
+.show-favorites-form .favorites-form {
 	display: block;
 }
 
@@ -1110,23 +1124,22 @@ th.action-links {
 	width: 100%;
 }
 
-.show-filters .wp-filter .drawer-toggle:hover,
-.show-filters .wp-filter .drawer-toggle:focus {
-	background: rgb(46, 162, 204);
-}
-
 .show-filters .filter-links a.current {
 	border-bottom: none;
 }
 
-.show-filters .wp-filter .drawer-toggle {
+.show-filters .wp-filter .button.drawer-toggle {
 	-webkit-border-radius: 2px;
 	border-radius: 2px;
-	border: none;
 	background: #72777c;
 	color: #fff;
 }
 
+.show-filters .wp-filter .drawer-toggle:hover,
+.show-filters .wp-filter .drawer-toggle:focus {
+	background: rgb(46, 162, 204);
+}
+
 .show-filters .wp-filter .drawer-toggle:before {
 	color: #fff;
 }
@@ -1170,9 +1183,15 @@ th.action-links {
 }
 
 .filter-drawer .buttons {
+	clear: both;
 	margin-bottom: 20px;
 }
 
+.filter-drawer .filter-group + .buttons {
+	margin-bottom: 0;
+	padding-top: 20px;
+}
+
 .filter-drawer .buttons .button span {
 	display: inline-block;
 	opacity: 0.8;
@@ -1185,6 +1204,21 @@ th.action-links {
 	margin-right: 10px;
 }
 
+.wp-filter .button-link.edit-filters {
+	color: #0073aa;
+	text-decoration: underline;
+	padding: 0 5px;
+	line-height: 28px;
+}
+
+.wp-filter .button-link.edit-filters:hover {
+	color: #00a0d2;
+}
+
+.wp-filter .button-link.edit-filters:focus {
+	color: #124964;
+}
+
 .filtered-by {
 	display: none;
 	margin: 0;
@@ -1226,6 +1260,7 @@ th.action-links {
 	padding: 20px;
 }
 
+.show-filters .favorites-form,
 .show-filters .content-filterable,
 .show-filters.filters-applied.loading-content .content-filterable,
 .loading-content .content-filterable,
@@ -3721,6 +3756,12 @@ img {
 	.filter-drawer .filter-group-feature label {
 		line-height: 25px;
 	}
+
+	.wp-filter .button.drawer-toggle {
+		font-size: 13px;
+		line-height: 26px;
+		height: 28px;
+	}
 }
 
 /* Smartphone */