Ticket #37188: 37188.5.diff

src/wp-admin/css/media.css

@@ -469 +469 @@
 .upload-php .mode-grid .media-sidebar {
         position: relative;
         width: auto;
-        margin-bottom: 16px;
+        margin-top: 12px;
         padding: 0 16px;
         border-left: 4px solid #dd3d36;
         -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
@@ -526 +526 @@
         left: auto;
         bottom: auto;
         padding-top: 0;
-        margin-top: 0;
+        margin-top: 20px;
         border: 4px dashed #b4b9be;
 }
 

src/wp-admin/upload.php

@@ -77 +77 @@
 
                 <?php
                 if ( current_user_can( 'upload_files' ) ) { ?>
-                        <a href="<?php echo admin_url( 'media-new.php' ); ?>" class="page-title-action"><?php echo esc_html_x( 'Add New', 'file' ); ?></a><?php
+                        <a href="<?php echo admin_url( 'media-new.php' ); ?>" class="page-title-action aria-button-if-js"><?php echo esc_html_x( 'Add New', 'file' ); ?></a><?php
                 }
                 ?>
 

src/wp-includes/js/media/views/attachments/browser.js

@@ -40 +40 @@
 
                 this.controller.on( 'toggle:upload:attachment', this.toggleUploader, this );
                 this.controller.on( 'edit:selection', this.editSelection );
-                this.createToolbar();
+
                 // In the Media Library, the sidebar is used to display errors before the attachments grid.
                 if ( this.options.sidebar && 'errors' === this.options.sidebar ) {
                         this.createSidebar();
                 }
+
+                /*
+                 * For accessibility reasons, place the Inline Uploader before other sections.
+                 * This way, in the Media Library, it's right after the Add New button, see ticket #37188.
+                 */
                 this.createUploader();
+
+                /*
+                 * Create a multi-purpose toolbar. Used as main toolbar in the Media Library
+                 * and also for other things, for example the "Drag and drop to reorder" and
+                 * "Suggested dimensions" info in the media modal.
+                 */
+                this.createToolbar();
+
+                // Create the list of attachments.
                 this.createAttachments();
+
                 // For accessibility reasons, place the normal sidebar after the attachments, see ticket #36909.
                 if ( this.options.sidebar && 'errors' !== this.options.sidebar ) {
                         this.createSidebar();
                 }
+
                 this.updateContent();
 
                 if ( ! this.options.sidebar || 'errors' === this.options.sidebar ) {

src/wp-includes/js/media/views/frame/manage.js

@@ -38 +38 @@
                 this.$body = $( document.body );
                 this.$window = $( window );
                 this.$adminBar = $( '#wpadminbar' );
+                // Store the Add New button for later reuse in wp.media.view.UploaderInline.
+                this.$uploaderToggler = $( '.page-title-action' );
                 this.$window.on( 'scroll resize', _.debounce( _.bind( this.fixPosition, this ), 15 ) );
-                $( document ).on( 'click', '.page-title-action', _.bind( this.addNewClickHandler, this ) );
+                this.$uploaderToggler.on( 'click', _.bind( this.addNewClickHandler, this ) );
 
                 // Ensure core and media grid view UI is enabled.
                 this.$el.addClass('wp-core-ui');

src/wp-includes/js/media/views/uploader/inline.js

@@ -119 +119 @@
         },
         show: function() {
                 this.$el.removeClass( 'hidden' );
+                if ( this.controller.$uploaderToggler ) {
+                        this.controller.$uploaderToggler.attr( 'aria-expanded', 'true' );
+                }
         },
         hide: function() {
+                // This runs also when creating the uploader, see wp.media.view.AttachmentsBrowser.createUploader().
                 this.$el.addClass( 'hidden' );
+                if ( this.controller.$uploaderToggler ) {
+                        this.controller.$uploaderToggler.attr( 'aria-expanded', 'false' );
+                }
         }
 
 });

src/wp-includes/js/media-grid.js

@@ -623 +623 @@
                 this.$body = $( document.body );
                 this.$window = $( window );
                 this.$adminBar = $( '#wpadminbar' );
+                // Store the Add New button for later reuse in wp.media.view.UploaderInline.
+                this.$uploaderToggler = $( '.page-title-action' );
                 this.$window.on( 'scroll resize', _.debounce( _.bind( this.fixPosition, this ), 15 ) );
-                $( document ).on( 'click', '.page-title-action', _.bind( this.addNewClickHandler, this ) );
+                this.$uploaderToggler.on( 'click', _.bind( this.addNewClickHandler, this ) );
 
                 // Ensure core and media grid view UI is enabled.
                 this.$el.addClass('wp-core-ui');

src/wp-includes/js/media-views.js

@@ -3771 +3771 @@
 
                 this.controller.on( 'toggle:upload:attachment', this.toggleUploader, this );
                 this.controller.on( 'edit:selection', this.editSelection );
-                this.createToolbar();
+
                 // In the Media Library, the sidebar is used to display errors before the attachments grid.
                 if ( this.options.sidebar && 'errors' === this.options.sidebar ) {
                         this.createSidebar();
                 }
+
+                /*
+                 * For accessibility reasons, place the Inline Uploader before other sections.
+                 * This way, in the Media Library, it's right after the Add New button, see ticket #37188.
+                 */
                 this.createUploader();
+
+                /*
+                 * Create a multi-purpose toolbar. Used as main toolbar in the Media Library
+                 * and also for other things, for example the "Drag and drop to reorder" and
+                 * "Suggested dimensions" info in the media modal.
+                 */
+                this.createToolbar();
+
+                // Create the list of attachments.
                 this.createAttachments();
+
                 // For accessibility reasons, place the normal sidebar after the attachments, see ticket #36909.
                 if ( this.options.sidebar && 'errors' !== this.options.sidebar ) {
                         this.createSidebar();
                 }
+
                 this.updateContent();
 
                 if ( ! this.options.sidebar || 'errors' === this.options.sidebar ) {
@@ -8210 +8226 @@
         },
         show: function() {
                 this.$el.removeClass( 'hidden' );
+                if ( this.controller.$uploaderToggler ) {
+                        this.controller.$uploaderToggler.attr( 'aria-expanded', 'true' );
+                }
         },
         hide: function() {
+                // This runs also when creating the uploader, see wp.media.view.AttachmentsBrowser.createUploader().
                 this.$el.addClass( 'hidden' );
+                if ( this.controller.$uploaderToggler ) {
+                        this.controller.$uploaderToggler.attr( 'aria-expanded', 'false' );
+                }
         }
 
 });