Accessibility: Improve the media views upload Dismiss Errors button.

- makes the Dismiss Errors button visible in the media views inline uploader
- avoids a focus loss when activating the Dismiss Errors button

See the related GitHub issue from the WPCampus accessibility audit https://github.com/WordPress/gutenberg/issues/15354

Fixes #47113.


git-svn-id: https://develop.svn.wordpress.org/trunk@45376 602fd350-edb4-49c9-b593-d223f7449a82

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

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();
 	}
 });
 

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;
 }