Changeset 46239

Timestamp:

09/23/2019 12:18:53 PM (5 years ago)

Author:

afercia

Message:

Accessibility: Media: Make screen readers announce the Media search results.

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

Location:

trunk/src

Files:

• js/media/models/attachments.js (modified) (2 diffs)
• js/media/views/attachments/browser.js (modified) (1 diff)
• js/media/views/focus-manager.js (modified) (1 diff)
• js/media/views/search.js (modified) (2 diffs)
• wp-includes/media-template.php (modified) (1 diff)
• wp-includes/media.php (modified) (1 diff)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/js/media/models/attachments.js

@@ -294 +294 @@
         this.observe( attachments );
 
+        // Used for the search results.
+        this.trigger( 'attachments:received', this );
         return this;
     },
@@ -333 +335 @@
                 deferred.resolveWith( this );
             }
+
+            // Used for the search results.
+            attachments.trigger( 'attachments:received', this );
         });
 

trunk/src/js/media/views/attachments/browser.js

@@ -84 +84 @@
 
         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 ) {

trunk/src/js/media/views/focus-manager.js

@@ -72 +72 @@
      *
      * 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

trunk/src/js/media/views/search.js

@@ -23 +23 @@
 
     events: {
-        'input':  'search',
-        'keyup':  'search'
+        'input': 'search'
     },
 
@@ -36 +35 @@
 
     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 )
 });
 

trunk/src/wp-includes/media-template.php

@@ -188 +188 @@
     <?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>

trunk/src/wp-includes/media.php

@@ -3855 +3855 @@
         '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

trunk/src/wp-includes/script-loader.php

@@ -1625 +1625 @@
     // 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 );