Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-25 06:14:58 +02:00
Code Issues Projects Releases Wiki Activity

Customizer: Accessibility improvements for menu item searches.

Browse Source 
* 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:
Dominik Schilling 2015-06-20 19:22:25 +00:00
parent 4a13015c98
commit baeadbb6fb
4 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
wp-admin/js/customize-nav-menus.js
View File

@ -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 ) {
$content.empty().append( $( '<p class="nothing-found"></p>' ).text( data.message ) );
wp.a11y.speak( data.message );
// 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;
});

2
wp-admin/js/customize-nav-menus.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
wp-includes/class-wp-customize-nav-menus.php
View File

@ -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&hellip;' ) ?>" />
<input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ) ?>" 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>

2
wp-includes/version.php
View File

@ -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.