Customizer: Accessibility improvements for menu item searches.
* Add a description and an `aria-describedby` attribute to inform users this is a "live" search. * Announce the number of search results via `wp.a11y.speak`. * Use `aria-busy` attribute to stop screen readers announcing content while the "loading more results" is running. * Increase the search debounce wait interval to 500ms to be consistent with other live searches. * If a search fails don't call `wp.a11y.speak` with an undefined variable. props afercia. see #32720. Built from https://develop.svn.wordpress.org/trunk@32891 git-svn-id: http://core.svn.wordpress.org/trunk@32862 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
4a13015c98
commit
baeadbb6fb
|
@ -125,7 +125,7 @@
|
|||
this.$search = $( '#menu-items-search' );
|
||||
this.sectionContent = this.$el.find( '.accordion-section-content' );
|
||||
|
||||
this.debounceSearch = _.debounce( self.search, 250 );
|
||||
this.debounceSearch = _.debounce( self.search, 500 );
|
||||
|
||||
_.bindAll( this, 'close' );
|
||||
|
||||
|
@ -211,8 +211,11 @@
|
|||
return;
|
||||
} else if ( page > 1 ) {
|
||||
$section.addClass( 'loading-more' );
|
||||
$content.attr( 'aria-busy', 'true' );
|
||||
wp.a11y.speak( api.Menus.data.l10n.itemsLoadingMore );
|
||||
} else if ( '' === self.searchTerm ) {
|
||||
$content.html( '' );
|
||||
wp.a11y.speak( '' );
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -234,6 +237,7 @@
|
|||
$content.empty();
|
||||
}
|
||||
$section.removeClass( 'loading loading-more' );
|
||||
$content.attr( 'aria-busy', 'false' );
|
||||
$section.addClass( 'open' );
|
||||
self.loading = false;
|
||||
items = new api.Menus.AvailableItemCollection( data.items );
|
||||
|
@ -246,16 +250,25 @@
|
|||
} else {
|
||||
self.pages.search = self.pages.search + 1;
|
||||
}
|
||||
if ( items && page > 1 ) {
|
||||
wp.a11y.speak( api.Menus.data.l10n.itemsFoundMore.replace( '%d', items.length ) );
|
||||
} else if ( items && page === 1 ) {
|
||||
wp.a11y.speak( api.Menus.data.l10n.itemsFound.replace( '%d', items.length ) );
|
||||
}
|
||||
});
|
||||
|
||||
self.currentRequest.fail(function( data ) {
|
||||
// data.message may be undefined, for example when typing slow and the request is aborted.
|
||||
if ( data.message ) {
|
||||
$content.empty().append( $( '<p class="nothing-found"></p>' ).text( data.message ) );
|
||||
wp.a11y.speak( data.message );
|
||||
}
|
||||
self.pages.search = -1;
|
||||
});
|
||||
|
||||
self.currentRequest.always(function() {
|
||||
$section.removeClass( 'loading loading-more' );
|
||||
$content.attr( 'aria-busy', 'false' );
|
||||
self.loading = false;
|
||||
self.currentRequest = null;
|
||||
});
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -291,6 +291,9 @@ final class WP_Customize_Nav_Menus {
|
|||
'pendingTitleTpl' => __( '%s (Pending)' ),
|
||||
'taxonomyTermLabel' => __( 'Taxonomy' ),
|
||||
'postTypeLabel' => __( 'Post Type' ),
|
||||
'itemsFound' => __( 'Number of items found: %d' ),
|
||||
'itemsFoundMore' => __( 'Additional items found: %d' ),
|
||||
'itemsLoadingMore' => __( 'Loading more results... please wait.' ),
|
||||
),
|
||||
'menuItemTransport' => 'postMessage',
|
||||
'phpIntMax' => PHP_INT_MAX,
|
||||
|
@ -623,7 +626,8 @@ final class WP_Customize_Nav_Menus {
|
|||
<div id="available-menu-items-search" class="accordion-section cannot-expand">
|
||||
<div class="accordion-section-title">
|
||||
<label class="screen-reader-text" for="menu-items-search"><?php _e( 'Search Menu Items' ); ?></label>
|
||||
<input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items…' ) ?>" />
|
||||
<input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items…' ) ?>" aria-describedby="menu-items-search-desc" />
|
||||
<p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
|
||||
<span class="spinner"></span>
|
||||
</div>
|
||||
<div class="accordion-section-content" data-type="search"></div>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.3-alpha-32890';
|
||||
$wp_version = '4.3-alpha-32891';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
Loading…
Reference in New Issue