Changeset 60263

Timestamp:

05/29/2025 07:51:28 PM (6 weeks ago)

Author:

joedolson

Message:

Media: Screen reader improvements for upload media errors.

Add a screen reader announcement when a media upload fails. Also add an announcement when dismissing upload errors, and improve the labeling context of the dismiss error button to explicitly identify which error will be dismissed.

Props joedolson, navi161, yogeshbhutkar, rishavdutta.
Fixes #63114.

Location:

trunk/src

Files:

• js/media/views/uploader/status.js (modified) (2 diffs)
• wp-admin/async-upload.php (modified) (2 diffs)

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

@@ -125 +125 @@
         _.delay( function() {
             buttonClose.trigger( 'focus' );
-            wp.a11y.speak( error.get( 'message' ), 'assertive' );
         }, 1000 );
+
+        _.delay( function() {
+            wp.a11y.speak( error.get( 'message' ) );
+        }, 1500 );
     },
 
@@ -136 +139 @@
         }
         wp.Uploader.errors.reset();
+        wp.a11y.speak( wp.i18n.__( 'Error dismissed.' ) );
         // Move focus to the modal after the dismiss button gets removed from the DOM.
         if ( this.controller.modal ) {

trunk/src/wp-admin/async-upload.php

@@ -113 +113 @@
 $id = media_handle_upload( 'async-upload', $post_id );
 if ( is_wp_error( $id ) ) {
-    $button_unique_id = uniqid( 'dismiss-' );
-    $message          = sprintf(
+    $button_unique_id     = uniqid( 'dismiss-' );
+    $error_description_id = uniqid( 'error-description-' );
+    $message              = sprintf(
         '%s <strong>%s</strong><br />%s',
         sprintf(
-            '<button type="button" id="%s" class="dismiss button-link">%s</button>',
+            '<button type="button" id="%1$s" class="dismiss button-link" aria-describedby="%2$s">%3$s</button>',
             esc_attr( $button_unique_id ),
+            esc_attr( $error_description_id ),
             __( 'Dismiss' )
         ),
@@ -128 +130 @@
         esc_html( $id->get_error_message() )
     );
+
     wp_admin_notice(
         $message,
         array(
+            'id'                 => $error_description_id,
             'additional_classes' => array( 'error-div', 'error' ),
             'paragraph_wrap'     => false,
         )
     );
-    echo "<script>jQuery( 'button#{$button_unique_id}' ).on( 'click', function() {jQuery(this).parents('div.media-item').slideUp(200, function(){jQuery(this).remove();})});</script>\n";
+
+    $speak_message = sprintf(
+        /* translators: %s: Name of the file that failed to upload. */
+        __( '%s has failed to upload.' ),
+        esc_js( $_FILES['async-upload']['name'] )
+    );
+
+    echo "<script>_.delay(function() {wp.a11y.speak('" . esc_js( $speak_message ) . "');}, 1500);jQuery( 'button#{$button_unique_id}' ).on( 'click', function() {jQuery(this).parents('div.media-item').slideUp(200, function(){jQuery(this).remove();wp.a11y.speak( wp.i18n.__( 'Error dismissed.' ) );jQuery( '#plupload-browse-button' ).trigger( 'focus' );})});</script>\n";
     exit;
 }