Ticket #37188: 37188.6.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/css/media-views.css

@@ -1133 +1133 @@
         border: 0;
         cursor: pointer;
         height: 48px;
+        outline: none;
+        padding: 0;
         position: absolute;
-        right: 0;
+        right: 2px;
         text-align: center;
-        top: 0;
-        width: 50px;
+        top: 2px;
+        width: 48px;
         z-index: 1;
 }
 
 .uploader-inline .close:before {
-        font: normal 30px/50px dashicons !important;
-        color: #72777c;
+        font: normal 30px/1 dashicons !important;
+        color: #555d66;
         display: inline-block;
         content: "\f335";
         font-weight: 300;
+        margin-top: 1px;
 }
 
+.uploader-inline .close:focus {
+        outline: 1px solid  #5b9dd9;
+        -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+        box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+}
+
 .attachments-browser.hide-sidebar .attachments,
 .attachments-browser.hide-sidebar .uploader-inline {
         right: 0;

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 ) {
@@ -343 +359 @@
                         canClose:   this.controller.isModeActive( 'grid' )
                 });
 
-                this.uploader.hide();
+                this.uploader.$el.addClass( 'hidden' );
                 this.views.add( this.uploader );
         },
 

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' )
+                        .attr( 'aria-expanded', 'false' )
+                        .on( 'click', _.bind( this.addNewClickHandler, this ) );
+
                 this.$window.on( 'scroll resize', _.debounce( _.bind( this.fixPosition, this ), 15 ) );
-                $( document ).on( 'click', '.page-title-action', _.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.length ) {
+                        this.controller.$uploaderToggler.attr( 'aria-expanded', 'true' );
+                }
         },
         hide: function() {
                 this.$el.addClass( 'hidden' );
+                if ( this.controller.$uploaderToggler.length ) {
+                        this.controller.$uploaderToggler
+                                .attr( 'aria-expanded', 'false' )
+                                // Move focus back to the toggle button when closing the uploader.
+                                .focus();
+                }
         }
 
 });

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' )
+                        .attr( 'aria-expanded', 'false' )
+                        .on( 'click', _.bind( this.addNewClickHandler, this ) );
+
                 this.$window.on( 'scroll resize', _.debounce( _.bind( this.fixPosition, this ), 15 ) );
-                $( document ).on( 'click', '.page-title-action', _.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 ) {
@@ -4074 +4090 @@
                         canClose:   this.controller.isModeActive( 'grid' )
                 });
 
-                this.uploader.hide();
+                this.uploader.$el.addClass( 'hidden' );
                 this.views.add( this.uploader );
         },
 
@@ -8210 +8226 @@
         },
         show: function() {
                 this.$el.removeClass( 'hidden' );
+                if ( this.controller.$uploaderToggler.length ) {
+                        this.controller.$uploaderToggler.attr( 'aria-expanded', 'true' );
+                }
         },
         hide: function() {
                 this.$el.addClass( 'hidden' );
+                if ( this.controller.$uploaderToggler.length ) {
+                        this.controller.$uploaderToggler
+                                .attr( 'aria-expanded', 'false' )
+                                // Move focus back to the toggle button when closing the uploader.
+                                .focus();
+                }
         }
 
 });