diff --git a/src/js/media/views/focus-manager.js b/src/js/media/views/focus-manager.js index c9007d931a..2a7aef5bb7 100644 --- a/src/js/media/views/focus-manager.js +++ b/src/js/media/views/focus-manager.js @@ -14,8 +14,11 @@ var FocusManager = wp.media.View.extend(/** @lends wp.media.view.FocusManager.pr 'keydown': 'constrainTabbing' }, - focus: function() { // Reset focus on first left menu item - this.$('.media-menu-item').first().focus(); + /** + * Moves focus to the first visible menu item in the modal. + */ + focus: function() { + this.$( '.media-menu-item' ).filter( ':visible' ).first().focus(); }, /** * @param {Object} event diff --git a/src/js/media/views/uploader/status.js b/src/js/media/views/uploader/status.js index b95e61ae60..6dfc70c8fe 100644 --- a/src/js/media/views/uploader/status.js +++ b/src/js/media/views/uploader/status.js @@ -117,18 +117,15 @@ UploaderStatus = View.extend(/** @lends wp.media.view.UploaderStatus.prototype * }), { at: 0 }); }, - /** - * @param {Object} event - */ - dismiss: function( event ) { + dismiss: function() { var errors = this.views.get('.upload-errors'); - event.preventDefault(); - if ( errors ) { _.invoke( errors, 'remove' ); } wp.Uploader.errors.reset(); + // Keep focus within the modal after the dismiss button gets removed from the DOM. + this.controller.modal.focusManager.focus(); } }); diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 52b70dafe8..76832e1417 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -1235,26 +1235,33 @@ } .media-uploader-status .upload-dismiss-errors { + position: absolute; + top: -3px; + right: -5px; + padding: 5px; + border-radius: 50%; + transition: none; text-decoration: none; } -.media-sidebar .media-uploader-status .upload-dismiss-errors { - position: absolute; - top: -10px; - right: -10px; - padding: 10px; - transition: none; +.uploader-inline .media-uploader-status .upload-dismiss-errors { + top: 2px; + right: 2px; } -.media-sidebar .media-uploader-status .upload-dismiss-errors:before { +.media-uploader-status .upload-dismiss-errors::before { content: "\f153"; display: block; font: normal 16px/1 dashicons; color: #72777c; } -.media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before, -.media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before { +.uploader-inline .errors.media-uploader-status .upload-dismiss-errors::before { + color: #606a73; +} + +.errors.media-uploader-status .upload-dismiss-errors:hover::before, +.errors.media-uploader-status .upload-dismiss-errors:focus::before { color: #c00; } @@ -1267,6 +1274,7 @@ } .uploader-inline .upload-errors .upload-error { + padding: 12px 30px; background-color: #fbeaea; box-shadow: none; }