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
This commit is contained in:
Andrea Fercia
parent
1babe4b968
commit
88c7224355
|
|
@ -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 */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 <a href="https://wordpress.org/support/">support forums</a>.' ),
|
||||
'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 <a href="https://wordpress.org/support/">support forums</a>.' ),
|
||||
'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');
|
|||
<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>
|
||||
<a class="clear-filters button button-secondary" href="#"><?php _e( 'Clear' ); ?></a>
|
||||
<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>
|
||||
<?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>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.7-alpha-38639';
|
||||
$wp_version = '4.7-alpha-38640';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue