diff --git a/src/js/media/models/attachments.js b/src/js/media/models/attachments.js index 06510ef9fc..82b365fac4 100644 --- a/src/js/media/models/attachments.js +++ b/src/js/media/models/attachments.js @@ -293,6 +293,8 @@ var Attachments = Backbone.Collection.extend(/** @lends wp.media.model.Attachmen this.reset( [], { silent: true } ); this.observe( attachments ); + // Used for the search results. + this.trigger( 'attachments:received', this ); return this; }, /** @@ -332,6 +334,9 @@ var Attachments = Backbone.Collection.extend(/** @lends wp.media.model.Attachmen if ( this === attachments.mirroring ) { deferred.resolveWith( this ); } + + // Used for the search results. + attachments.trigger( 'attachments:received', this ); }); return deferred.promise(); diff --git a/src/js/media/views/attachments/browser.js b/src/js/media/views/attachments/browser.js index 6d9523298e..0ab18afe24 100644 --- a/src/js/media/views/attachments/browser.js +++ b/src/js/media/views/attachments/browser.js @@ -83,8 +83,40 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro } this.collection.on( 'add remove reset', this.updateContent, this ); + + // The non-cached or cached attachments query has completed. + this.collection.on( 'attachments:received', this.announceSearchResults, this ); }, + /** + * Updates the `wp.a11y.speak()` ARIA live region with a message to communicate + * the number of search results to screen reader users. This function is + * debounced because the collection updates multiple times. + * + * @since 5.3.0 + * + * @returns {void} + */ + announceSearchResults: _.debounce( function() { + var count; + + if ( this.collection.mirroring.args.s ) { + count = this.collection.length; + + if ( 0 === count ) { + wp.a11y.speak( l10n.noMediaTryNewSearch ); + return; + } + + if ( this.collection.hasMore() ) { + wp.a11y.speak( l10n.mediaFoundHasMoreResults.replace( '%d', count ) ); + return; + } + + wp.a11y.speak( l10n.mediaFound.replace( '%d', count ) ); + } + }, 200 ), + editSelection: function( modal ) { // When editing a selection, move focus to the "Return to library" button. modal.$( '.media-button-backToLibrary' ).focus(); diff --git a/src/js/media/views/focus-manager.js b/src/js/media/views/focus-manager.js index b629b67152..4ac1b08fa8 100644 --- a/src/js/media/views/focus-manager.js +++ b/src/js/media/views/focus-manager.js @@ -71,8 +71,9 @@ var FocusManager = wp.media.View.extend(/** @lends wp.media.view.FocusManager.pr * provided element and other elements that should not be hidden. * * The reason why we use `aria-hidden` is that `aria-modal="true"` is buggy - * in Safari 11.1 and support is spotty in other browsers. In the future we - * should consider to remove this helper function and only use `aria-modal="true"`. + * in Safari 11.1 and support is spotty in other browsers. Also, `aria-modal="true"` + * prevents the `wp.a11y.speak()` ARIA live regions to work as they're outside + * of the modal dialog and get hidden from assistive technologies. * * @since 5.2.3 * diff --git a/src/js/media/views/search.js b/src/js/media/views/search.js index 80b986e407..f4f8f51387 100644 --- a/src/js/media/views/search.js +++ b/src/js/media/views/search.js @@ -22,8 +22,7 @@ Search = wp.media.View.extend(/** @lends wp.media.view.Search.prototype */{ }, events: { - 'input': 'search', - 'keyup': 'search' + 'input': 'search' }, /** @@ -35,12 +34,15 @@ Search = wp.media.View.extend(/** @lends wp.media.view.Search.prototype */{ }, search: _.debounce( function( event ) { - if ( event.target.value ) { - this.model.set( 'search', event.target.value ); + var searchTerm = event.target.value.trim(); + + // Trigger the search only after 2 ASCII characters. + if ( searchTerm && searchTerm.length > 1 ) { + this.model.set( 'search', searchTerm ); } else { - this.model.unset('search'); + this.model.unset( 'search' ); } - }, 300 ) + }, 500 ) }); module.exports = Search; diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index b54dd0d6e0..64eba598a0 100644 --- a/src/wp-includes/media-template.php +++ b/src/wp-includes/media-template.php @@ -187,7 +187,7 @@ function wp_print_media_templates() {