WordPress.org

Make WordPress Core

Changeset 46239


Ignore:
Timestamp:
09/23/2019 12:18:53 PM (3 months 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:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/media/models/attachments.js

    r43309 r46239  
    294294        this.observe( attachments );
    295295
     296        // Used for the search results.
     297        this.trigger( 'attachments:received', this );
    296298        return this;
    297299    },
     
    333335                deferred.resolveWith( this );
    334336            }
     337
     338            // Used for the search results.
     339            attachments.trigger( 'attachments:received', this );
    335340        });
    336341
  • trunk/src/js/media/views/attachments/browser.js

    r45701 r46239  
    8484
    8585        this.collection.on( 'add remove reset', this.updateContent, this );
    86     },
     86
     87        // The non-cached or cached attachments query has completed.
     88        this.collection.on( 'attachments:received', this.announceSearchResults, this );
     89    },
     90
     91    /**
     92     * Updates the `wp.a11y.speak()` ARIA live region with a message to communicate
     93     * the number of search results to screen reader users. This function is
     94     * debounced because the collection updates multiple times.
     95     *
     96     * @since 5.3.0
     97     *
     98     * @returns {void}
     99     */
     100    announceSearchResults: _.debounce( function() {
     101        var count;
     102
     103        if ( this.collection.mirroring.args.s ) {
     104            count = this.collection.length;
     105
     106            if ( 0 === count ) {
     107                wp.a11y.speak( l10n.noMediaTryNewSearch );
     108                return;
     109            }
     110
     111            if ( this.collection.hasMore() ) {
     112                wp.a11y.speak( l10n.mediaFoundHasMoreResults.replace( '%d', count ) );
     113                return;
     114            }
     115
     116            wp.a11y.speak( l10n.mediaFound.replace( '%d', count ) );
     117        }
     118    }, 200 ),
    87119
    88120    editSelection: function( modal ) {
  • trunk/src/js/media/views/focus-manager.js

    r45867 r46239  
    7272     *
    7373     * The reason why we use `aria-hidden` is that `aria-modal="true"` is buggy
    74      * in Safari 11.1 and support is spotty in other browsers. In the future we
    75      * should consider to remove this helper function and only use `aria-modal="true"`.
     74     * in Safari 11.1 and support is spotty in other browsers. Also, `aria-modal="true"`
     75     * prevents the `wp.a11y.speak()` ARIA live regions to work as they're outside
     76     * of the modal dialog and get hidden from assistive technologies.
    7677     *
    7778     * @since 5.2.3
  • trunk/src/js/media/views/search.js

    r43309 r46239  
    2323
    2424    events: {
    25         'input':  'search',
    26         'keyup':  'search'
     25        'input': 'search'
    2726    },
    2827
     
    3635
    3736    search: _.debounce( function( event ) {
    38         if ( event.target.value ) {
    39             this.model.set( 'search', event.target.value );
     37        var searchTerm = event.target.value.trim();
     38
     39        // Trigger the search only after 2 ASCII characters.
     40        if ( searchTerm && searchTerm.length > 1 ) {
     41            this.model.set( 'search', searchTerm );
    4042        } else {
    41             this.model.unset('search');
     43            this.model.unset( 'search' );
    4244        }
    43     }, 300 )
     45    }, 500 )
    4446});
    4547
  • trunk/src/wp-includes/media-template.php

    r46168 r46239  
    188188    <?php // Template for the media modal. ?>
    189189    <script type="text/html" id="tmpl-media-modal">
    190         <div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-modal="true" aria-labelledby="media-frame-title">
     190        <div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-labelledby="media-frame-title">
    191191            <# if ( data.hasCloseButton ) { #>
    192192                <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

    r46164 r46239  
    38553855        'searchMediaLabel'            => __( 'Search Media' ),
    38563856        'searchMediaPlaceholder'      => __( 'Search media items...' ), // placeholder (no ellipsis)
    3857         'noMedia'                     => __( 'No media files found.' ),
     3857        'mediaFound'                  => __( 'Number of media items found: %d' ),
     3858        'mediaFoundHasMoreResults'    => __( 'Number of media items displayed: %d. Scroll the page for more results.' ),
     3859        'noMedia'                     => __( 'No media items found.' ),
     3860        'noMediaTryNewSearch'         => __( 'No media items found. Try a different search.' ),
    38583861
    38593862        // Library Details
  • trunk/src/wp-includes/script-loader.php

    r46189 r46239  
    16251625    // To enqueue media-views or media-editor, call wp_enqueue_media().
    16261626    // Both rely on numerous settings, styles, and templates to operate correctly.
    1627     $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 );
     1627    $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 );
    16281628    $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
    16291629    $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );
Note: See TracChangeset for help on using the changeset viewer.