Changeset 50352

Timestamp:

02/16/2021 04:03:37 AM (4 years 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:

• js/media/views/uploader/inline.js (modified) (1 diff)
• js/media/views/uploader/status.js (modified) (1 diff)
• wp-includes/media-template.php (modified) (1 diff)

trunk/src/js/media/views/uploader/inline.js

@@ -116 +116 @@
             $browser.detach().text( $placeholder.text() );
             $browser[0].className = $placeholder[0].className;
+            $browser[0].setAttribute( 'aria-labelledby', $browser[0].id + ' ' + $placeholder[0].getAttribute('aria-labelledby') );
             $placeholder.replaceWith( $browser.show() );
         }

trunk/src/js/media/views/uploader/status.js

@@ -117 +117 @@
         } );
 
+        var buttonClose = this.$el.find( 'button' );
+
         // Can show additional info here while retrying to create image sub-sizes.
         this.views.add( '.upload-errors', statusError, { at: 0 } );
+        _.delay( function() {
+            buttonClose.trigger( 'focus' );
+            wp.a11y.speak( error.get( 'message' ), 'assertive' );
+        }, 1000 );
     },
 

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

@@ -253 +253 @@
                 <h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files to upload' ); ?></h2>
                 <p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
-                <button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
+                <button type="button" class="browser button button-hero" aria-labelledby="post-upload-info"><?php _e( 'Select Files' ); ?></button>
             </div>
 
             <div class="upload-inline-status"></div>
 
-            <div class="post-upload-ui">
+            <div class="post-upload-ui" id="post-upload-info">
                 <?php
                 /** This action is documented in wp-admin/includes/media.php */