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.


git-svn-id: https://develop.svn.wordpress.org/trunk@38640 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/common.css

@@ -1045,39 +1045,53 @@ th.action-links {
 	display: inline-block;
 }
 
-.wp-filter .drawer-toggle {
+.wp-filter .button.drawer-toggle {
-	display: inline-block;
+	margin: 10px 9px 0;
-	margin: 0 10px;
+	padding: 0 10px 0 6px;
-	padding: 4px 6px;
+	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 5px 0 0;
-	width: 16px;
-	height: 16px;
 	color: #72777c;
-	-webkit-transition: color .1s ease-in 0;
+	font: normal 16px/1 dashicons;
-	transition: color .1s ease-in 0;
+	vertical-align: text-bottom;
-	font-family: dashicons;
-	font-size: 16px;
-	line-height: 1;
-	text-align: center;
-	text-decoration: inherit;
-	font-weight: 400;
-	font-style: normal;
 	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
-.wp-filter .drawer-toggle:hover,
+.wp-filter .button.drawer-toggle:hover,
-.wp-filter .drawer-toggle:hover:before {
+.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-left: 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 */

src/wp-admin/js/theme.js

@@ -1523,6 +1523,7 @@ themes.view.InstallerSearch =  themes.view.Search.extend({
 
 		$( '.filter-links li > a.current' ).removeClass( 'current' );
 		$( 'body' ).removeClass( 'show-filters filters-applied show-favorites-form' );
+		$( '.drawer-toggle' ).attr( 'aria-expanded', 'false' );
 
 		// Get the themes by sending Ajax POST request to api.wordpress.org/themes
 		// or searching the local cache
@@ -1545,7 +1546,7 @@ themes.view.Installer = themes.view.Appearance.extend({
 		'click .filter-drawer .apply-filters': 'applyFilters',
 		'click .filter-group [type="checkbox"]': 'addFilter',
 		'click .filter-drawer .clear-filters': 'clearFilters',
-		'click .filtered-by': 'backToFilters',
+		'click .edit-filters': 'backToFilters',
 		'click .favorites-form-submit' : 'saveUsername',
 		'keyup #wporg-username-input': 'saveUsername'
 	},
@@ -1621,6 +1622,7 @@ themes.view.Installer = themes.view.Appearance.extend({
 		event.preventDefault();
 
 		$( 'body' ).removeClass( 'filters-applied show-filters' );
+		$( '.drawer-toggle' ).attr( 'aria-expanded', 'false' );
 
 		// Bail if this is already active
 		if ( $el.hasClass( this.activeClass ) ) {
@@ -1640,9 +1642,9 @@ themes.view.Installer = themes.view.Appearance.extend({
 		$( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
 
 		if ( 'favorites' === sort ) {
-			$ ( 'body' ).addClass( 'show-favorites-form' );
+			$( 'body' ).addClass( 'show-favorites-form' );
 		} else {
-			$ ( 'body' ).removeClass( 'show-favorites-form' );
+			$( 'body' ).removeClass( 'show-favorites-form' );
 		}
 
 		this.browse( sort );
@@ -1692,6 +1694,11 @@ themes.view.Installer = themes.view.Appearance.extend({
 			event.preventDefault();
 		}
 
+		if ( ! tags ) {
+			wp.a11y.speak( l10n.selectFeatureFilter );
+			return;
+		}
+
 		$( 'body' ).addClass( 'filters-applied' );
 		$( '.filter-links li > a.current' ).removeClass( 'current' );
 		filteringBy.empty();
@@ -1782,22 +1789,22 @@ themes.view.Installer = themes.view.Appearance.extend({
 
 	// Toggle the full filters navigation
 	moreFilters: function( event ) {
+		var $body = $( 'body' ),
+			$toggleButton = $( '.drawer-toggle' );
+
 		event.preventDefault();
 
-		if ( $( 'body' ).hasClass( 'filters-applied' ) ) {
+		if ( $body.hasClass( 'filters-applied' ) ) {
 			return this.backToFilters();
 		}
 
-		// If the filters section is opened and filters are checked
-		// run the relevant query collapsing to filtered-by state
-		if ( $( 'body' ).hasClass( 'show-filters' ) && this.filtersChecked() ) {
-			return this.addFilter();
-		}
-
 		this.clearSearch();
 
 		themes.router.navigate( themes.router.baseUrl( '' ) );
-		$( 'body' ).toggleClass( 'show-filters' );
+		// Toggle the feature filters view.
+		$body.toggleClass( 'show-filters' );
+		// Toggle the `aria-expanded` button attribute.
+		$toggleButton.attr( 'aria-expanded', $body.hasClass( 'show-filters' ) );
 	},
 
 	// Clears all the checked filters

src/wp-admin/theme-install.php

@@ -37,22 +37,24 @@ foreach ( $installed_themes as $k => $v ) {
 wp_localize_script( 'theme', '_wpThemeSettings', array(
 	'themes'   => false,
 	'settings' => array(
-		'isInstall'     => true,
+		'isInstall'  => true,
-		'canInstall'    => current_user_can( 'install_themes' ),
+		'canInstall' => current_user_can( 'install_themes' ),
-		'installURI'    => current_user_can( 'install_themes' ) ? self_admin_url( 'theme-install.php' ) : null,
+		'installURI' => current_user_can( 'install_themes' ) ? self_admin_url( 'theme-install.php' ) : null,
-		'adminUrl'      => parse_url( self_admin_url(), PHP_URL_PATH )
+		'adminUrl'   => parse_url( self_admin_url(), PHP_URL_PATH )
 	),
 	'l10n' => array(
-		'addNew' => __( 'Add New Theme' ),
+		'addNew'              => __( 'Add New Theme' ),
-		'search' => __( 'Search Themes' ),
+		'search'              => __( 'Search Themes' ),
-		'searchPlaceholder' => __( 'Search themes...' ), // placeholder (no ellipsis)
+		'searchPlaceholder'   => __( 'Search themes...' ), // placeholder (no ellipsis)
-		'upload' => __( 'Upload Theme' ),
+		'upload'              => __( 'Upload Theme' ),
-		'back'   => __( 'Back' ),
+		'back'                => __( 'Back' ),
-		'error'  => __( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ),
+		'error'               => __( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ),
-		'themesFound'   => __( 'Number of Themes found: %d' ),
+		'themesFound'         => __( 'Number of Themes found: %d' ),
-		'noThemesFound' => __( 'No themes found. Try a different search.' ),
+		'noThemesFound'       => __( 'No themes found. Try a different search.' ),
-		'collapseSidebar'    => __( 'Collapse Sidebar' ),
+		'collapseSidebar'     => __( 'Collapse Sidebar' ),
-		'expandSidebar'      => __( 'Expand Sidebar' ),
+		'expandSidebar'       => __( 'Expand Sidebar' ),
+		/* translators: hidden accessibility text */
+		'selectFeatureFilter' => __( 'Select one or more Theme features to filter by' ),
 	),
 	'installedThemes' => array_keys( $installed_themes ),
 ) );
@@ -152,7 +154,7 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 			<li><a href="#" data-sort="favorites"><?php _ex( 'Favorites', 'themes' ); ?></a></li>
 		</ul>
 
-		<a class="drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
+		<button type="button" class="button drawer-toggle" aria-expanded="false"><?php _e( 'Feature Filter' ); ?></button>
 
 		<div class="search-form"></div>
 
@@ -178,8 +180,8 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 
 		<div class="filter-drawer">
 			<div class="buttons">
-				<a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>
+				<button type="button" class="apply-filters button"><?php _e( 'Apply Filters' ); ?><span></span></button>
-				<a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
+				<button type="button" class="clear-filters button" aria-label="<?php esc_attr_e( 'Clear current filters' ); ?>"><?php _e( 'Clear' ); ?></button>
 			</div>
 		<?php
 		$feature_list = get_theme_feature_list();
@@ -197,10 +199,14 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 			echo '</fieldset>';
 		}
 		?>
+			<div class="buttons">
+				<button type="button" class="apply-filters button"><?php _e( 'Apply Filters' ); ?><span></span></button>
+				<button type="button" class="clear-filters button" aria-label="<?php esc_attr_e( 'Clear current filters' ); ?>"><?php _e( 'Clear' ); ?></button>
+			</div>
 			<div class="filtered-by">
 				<span><?php _e( 'Filtering by:' ); ?></span>
 				<div class="tags"></div>
-				<a href="#"><?php _e( 'Edit' ); ?></a>
+				<button type="button" class="button-link edit-filters"><?php _e( 'Edit Filters' ); ?></button>
 			</div>
 		</div>
 	</div>