Improve keyboard control of Edit Selection mode in the media manager.

See #29326
Props adamsilverstein

Built from https://develop.svn.wordpress.org/trunk@30374


git-svn-id: http://core.svn.wordpress.org/trunk@30371 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views-rtl.css

@@ -925,7 +925,7 @@
 }
 
 .attachment .close {
-	display: none;
+	display: block;
 	position: absolute;
 	top: 5px;
 	left: 5px;
@@ -944,15 +944,16 @@
 	border-radius: 3px;
 	-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
+	transition-duration: none;
+	transition-property: none;
 }
 
-.attachment .close:hover {
+.attachment a.close:hover,
+.attachment a.close:focus {
 	-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
-}
+	background-position: -36px 4px;
 
-.attachment:hover .close {
-	display: block;
 }
 
 .attachment .check {

wp-includes/css/media-views.css

@@ -925,7 +925,7 @@
 }
 
 .attachment .close {
-	display: none;
+	display: block;
 	position: absolute;
 	top: 5px;
 	right: 5px;
@@ -944,15 +944,16 @@
 	border-radius: 3px;
 	-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.3 );
+	transition-duration: none;
+	transition-property: none;
 }
 
-.attachment .close:hover {
+.attachment a.close:hover,
+.attachment a.close:focus {
 	-webkit-box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.6 );
-}
+	background-position: -36px 4px;
 
-.attachment:hover .close {
-	display: block;
 }
 
 .attachment .check {

wp-includes/js/media-views.js

@@ -3016,6 +3016,9 @@
 
 			// Browse our library of attachments.
 			this.content.set( view );
+
+			// Trigger the controller to set focus
+			view.controller.trigger( 'edit:selection', this );
 		},
 
 		editImageContent: function() {
@@ -5096,6 +5099,7 @@
 			'click .close':                   'removeFromLibrary',
 			'click .check':                   'checkClickHandler',
 			'click a':                        'preventDefault',
+			'keydown .close':                 'removeFromLibrary',
 			'keydown':                        'toggleSelectionHandler'
 		},
 
@@ -5537,6 +5541,11 @@
 		 * @param {Object} event
 		 */
 		removeFromLibrary: function( event ) {
+			// Catch enter and space events
+			if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
+				return;
+			}
+
 			// Stop propagation so the model isn't selected.
 			event.stopPropagation();
 
@@ -6236,7 +6245,7 @@
 			});
 
 			this.listenTo( this.controller, 'toggle:upload:attachment', _.bind( this.toggleUploader, this ) );
-
+			this.controller.on( 'edit:selection', this.editSelection );
 			this.createToolbar();
 			if ( this.options.sidebar ) {
 				this.createSidebar();
@@ -6255,6 +6264,11 @@
 
 			this.collection.on( 'add remove reset', this.updateContent, this );
 		},
+
+		editSelection: function( modal ) {
+			modal.$el.find( '.media-button-backToLibrary' ).focus();
+		},
+
 		/**
 		 * @returns {wp.media.view.AttachmentsBrowser} Returns itself to allow chaining
 		 */