Ticket #47120: 47120.2.diff

package-lock.json

@@ -5631 +5631 @@
                         "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
                         "dev": true
                 },
-                "browser-resolve": {
-                        "version": "1.11.3",
-                        "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.3.tgz",
-                        "integrity": "sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==",
-                        "dev": true,
-                        "requires": {
-                                "resolve": "1.1.7"
-                        },
-                        "dependencies": {
-                                "resolve": {
-                                        "version": "1.1.7",
-                                        "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
-                                        "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
-                                        "dev": true
-                                }
-                        }
-                },
                 "browserify-aes": {
                         "version": "1.2.0",
                         "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",

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

@@ -115 +115 @@
 
                         $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() );
                 }
 

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

@@ -118 +118 @@
 
                 // Can show additional info here while retrying to create image sub-sizes.
                 this.views.add( '.upload-errors', statusError, { at: 0 } );
+                this.$el.attr( 'tabindex', '-1' ).trigger( 'focus' );
         },
 
         dismiss: function() {

src/wp-includes/media-template.php

@@ -252 +252 @@
                         <div class="upload-ui">
                                 <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="upload-inline-status" aria-live="assertive"></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 */
                                 do_action( 'pre-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
@@ -330 +330 @@
                         <span class="upload-detail-separator">&ndash;</span>
                         <span class="upload-filename"></span>
                 </div>
-                <div class="upload-errors"></div>
+                <div class="upload-errors" aria-live="assertive"></div>
         </script>
 
         <?php // Template for the uploading status errors. ?>