diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index ca61c32452..8cf69f5327 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.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 10px 0 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;
- 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-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 */
diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js
index 55706b3096..1be6f184ae 100644
--- a/src/wp-admin/js/theme.js
+++ b/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
diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php
index 6b38465531..fc0904c6d2 100644
--- a/src/wp-admin/theme-install.php
+++ b/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,
- 'canInstall' => current_user_can( 'install_themes' ),
- 'installURI' => current_user_can( 'install_themes' ) ? self_admin_url( 'theme-install.php' ) : null,
- 'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH )
+ 'isInstall' => true,
+ 'canInstall' => current_user_can( 'install_themes' ),
+ 'installURI' => current_user_can( 'install_themes' ) ? self_admin_url( 'theme-install.php' ) : null,
+ 'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH )
),
'l10n' => array(
- 'addNew' => __( 'Add New Theme' ),
- 'search' => __( 'Search Themes' ),
- 'searchPlaceholder' => __( 'Search themes...' ), // placeholder (no ellipsis)
- 'upload' => __( 'Upload Theme' ),
- 'back' => __( 'Back' ),
- 'error' => __( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server’s configuration. If you continue to have problems, please try the support forums.' ),
- 'themesFound' => __( 'Number of Themes found: %d' ),
- 'noThemesFound' => __( 'No themes found. Try a different search.' ),
- 'collapseSidebar' => __( 'Collapse Sidebar' ),
- 'expandSidebar' => __( 'Expand Sidebar' ),
+ 'addNew' => __( 'Add New Theme' ),
+ 'search' => __( 'Search Themes' ),
+ 'searchPlaceholder' => __( 'Search themes...' ), // placeholder (no ellipsis)
+ 'upload' => __( 'Upload Theme' ),
+ 'back' => __( 'Back' ),
+ 'error' => __( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server’s configuration. If you continue to have problems, please try the support forums.' ),
+ 'themesFound' => __( 'Number of Themes found: %d' ),
+ 'noThemesFound' => __( 'No themes found. Try a different search.' ),
+ 'collapseSidebar' => __( 'Collapse 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');
-
+
@@ -178,8 +180,8 @@ include(ABSPATH . 'wp-admin/admin-header.php');