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
This commit is contained in:
Andrea Fercia
2016-09-21 17:53:29 +00:00
parent 005a01da4a
commit e5fc724dd0
3 changed files with 111 additions and 57 deletions
+18 -11
View File
@@ -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