Skip to content
Permalink
Browse files

Accessibility: Media: Make screen readers announce the Media search r…

…esults.

- adds audible messages via `wp.a11y.speak()` to announce the search results 
- removes a `keyup` event that was there only to support old browsers 
- removes `aria-modal="true"` from the media modal dialog as it prevents the ARIA live regions to be perceived by screen readers
- triggers the search only after 2 ASCII characters have been typed

Props anevins, antpb, aduth, loreleiaurora, afercia.
Fixes #47146.


git-svn-id: https://develop.svn.wordpress.org/trunk@46239 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
afercia committed Sep 23, 2019
1 parent 8fdabdb commit 01b18e824f47cb20d2a76293107c463bdd01f88a
@@ -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();
@@ -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();
@@ -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
*
@@ -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;
@@ -187,7 +187,7 @@ function wp_print_media_templates() {

<?php // Template for the media modal. ?>
<script type="text/html" id="tmpl-media-modal">
<div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-modal="true" aria-labelledby="media-frame-title">
<div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-labelledby="media-frame-title">
<# if ( data.hasCloseButton ) { #>
<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
<# } #>
@@ -3854,7 +3854,10 @@ function wp_enqueue_media( $args = array() ) {
'filterByType' => __( 'Filter by type' ),
'searchMediaLabel' => __( 'Search Media' ),
'searchMediaPlaceholder' => __( 'Search media items...' ), // placeholder (no ellipsis)
'noMedia' => __( 'No media files found.' ),
'mediaFound' => __( 'Number of media items found: %d' ),
'mediaFoundHasMoreResults' => __( 'Number of media items displayed: %d. Scroll the page for more results.' ),
'noMedia' => __( 'No media items found.' ),
'noMediaTryNewSearch' => __( 'No media items found. Try a different search.' ),
// Library Details
'attachmentDetails' => __( 'Attachment Details' ),
@@ -1624,7 +1624,7 @@ function wp_default_scripts( &$scripts ) {
// To enqueue media-views or media-editor, call wp_enqueue_media().
// Both rely on numerous settings, styles, and templates to operate correctly.
$scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request' ), false, 1 );
$scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'wp-api-request', 'wp-a11y' ), false, 1 );
$scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
$scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );
$scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'jquery', 'media-views', 'media-audiovideo' ), false, 1 );

0 comments on commit 01b18e8

Please sign in to comment.
You can’t perform that action at this time.