diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css index 42e867db53..8130288803 100644 --- a/src/wp-admin/css/media.css +++ b/src/wp-admin/css/media.css @@ -469,7 +469,7 @@ border color while dragging a file over the uploader drop area */ .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,7 +526,7 @@ border color while dragging a file over the uploader drop area */ left: auto; bottom: auto; padding-top: 0; - margin-top: 0; + margin-top: 20px; border: 4px dashed #b4b9be; } diff --git a/src/wp-admin/upload.php b/src/wp-admin/upload.php index 479611decd..5a53dc5857 100644 --- a/src/wp-admin/upload.php +++ b/src/wp-admin/upload.php @@ -77,7 +77,7 @@ if ( 'grid' === $mode ) { - " class="page-title-action aria-button-if-js"> diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 9bcc780802..698ea2d525 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -1133,20 +1133,29 @@ 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, diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js index f0831fb3bb..edf429e896 100644 --- a/src/wp-includes/js/media-grid.js +++ b/src/wp-includes/js/media-grid.js @@ -623,8 +623,12 @@ Manage = MediaFrame.extend({ 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'); diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index f95cbfee08..be802d7642 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -3771,17 +3771,33 @@ AttachmentsBrowser = View.extend({ 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,7 +4090,7 @@ AttachmentsBrowser = View.extend({ canClose: this.controller.isModeActive( 'grid' ) }); - this.uploader.hide(); + this.uploader.$el.addClass( 'hidden' ); this.views.add( this.uploader ); }, @@ -8210,9 +8226,18 @@ UploaderInline = View.extend({ }, 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(); + } } }); diff --git a/src/wp-includes/js/media/views/attachments/browser.js b/src/wp-includes/js/media/views/attachments/browser.js index 10c6eb5264..c68dce08f2 100644 --- a/src/wp-includes/js/media/views/attachments/browser.js +++ b/src/wp-includes/js/media/views/attachments/browser.js @@ -40,17 +40,33 @@ AttachmentsBrowser = View.extend({ 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,7 +359,7 @@ AttachmentsBrowser = View.extend({ canClose: this.controller.isModeActive( 'grid' ) }); - this.uploader.hide(); + this.uploader.$el.addClass( 'hidden' ); this.views.add( this.uploader ); }, diff --git a/src/wp-includes/js/media/views/frame/manage.js b/src/wp-includes/js/media/views/frame/manage.js index 2b634331f3..a033d7bf28 100644 --- a/src/wp-includes/js/media/views/frame/manage.js +++ b/src/wp-includes/js/media/views/frame/manage.js @@ -38,8 +38,12 @@ Manage = MediaFrame.extend({ 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'); diff --git a/src/wp-includes/js/media/views/uploader/inline.js b/src/wp-includes/js/media/views/uploader/inline.js index 820caccf03..f6be006b6b 100644 --- a/src/wp-includes/js/media/views/uploader/inline.js +++ b/src/wp-includes/js/media/views/uploader/inline.js @@ -119,9 +119,18 @@ UploaderInline = View.extend({ }, 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(); + } } });