WordPress.org

Make WordPress Core

Changeset 50352


Ignore:
Timestamp:
02/16/2021 04:03:37 AM (10 months ago)
Author:
joedolson
Message:

Media: Associate upload errors and field with controls.

Adds an explicit relationship between the upload button and the maximum upload limit, moves focus to the error dismiss button if an error occurs, and adds a call to wp.a11y.speak to report the error after it occurs.

Props afercia, anevins, antpb, adamsilverstein, poena
Fixes #47120

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/media/views/uploader/inline.js

    r47122 r50352  
    116116            $browser.detach().text( $placeholder.text() );
    117117            $browser[0].className = $placeholder[0].className;
     118            $browser[0].setAttribute( 'aria-labelledby', $browser[0].id + ' ' + $placeholder[0].getAttribute('aria-labelledby') );
    118119            $placeholder.replaceWith( $browser.show() );
    119120        }
  • trunk/src/js/media/views/uploader/status.js

    r46800 r50352  
    117117        } );
    118118
     119        var buttonClose = this.$el.find( 'button' );
     120
    119121        // Can show additional info here while retrying to create image sub-sizes.
    120122        this.views.add( '.upload-errors', statusError, { at: 0 } );
     123        _.delay( function() {
     124            buttonClose.trigger( 'focus' );
     125            wp.a11y.speak( error.get( 'message' ), 'assertive' );
     126        }, 1000 );
    121127    },
    122128
  • trunk/src/wp-includes/media-template.php

    r49804 r50352  
    253253                <h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files to upload' ); ?></h2>
    254254                <p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
    255                 <button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
     255                <button type="button" class="browser button button-hero" aria-labelledby="post-upload-info"><?php _e( 'Select Files' ); ?></button>
    256256            </div>
    257257
    258258            <div class="upload-inline-status"></div>
    259259
    260             <div class="post-upload-ui">
     260            <div class="post-upload-ui" id="post-upload-info">
    261261                <?php
    262262                /** This action is documented in wp-admin/includes/media.php */
Note: See TracChangeset for help on using the changeset viewer.