Changeset 30374

Timestamp:

11/18/2014 03:33:11 AM (10 years ago)

Author:

johnbillion

Message:

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

See #29326
Props adamsilverstein

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (2 diffs)
• js/media-views.js (modified) (5 diffs)

trunk/src/wp-includes/css/media-views.css

@@ -926 +926 @@
 
 .attachment .close {
-    display: none;
+    display: block;
     position: absolute;
     top: 5px;
@@ -945 +945 @@
     -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 );
-}
-
-.attachment .close:hover {
+    transition-duration: none;
+    transition-property: none;
+}
+
+.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 );
-}
-
-.attachment:hover .close {
-    display: block;
+    background-position: -36px 4px;
+
 }
 

trunk/src/wp-includes/js/media-views.js

@@ -3017 +3017 @@
             // Browse our library of attachments.
             this.content.set( view );
+
+            // Trigger the controller to set focus
+            view.controller.trigger( 'edit:selection', this );
         },
 
@@ -5097 +5100 @@
             'click .check':                   'checkClickHandler',
             'click a':                        'preventDefault',
+            'keydown .close':                 'removeFromLibrary',
             'keydown':                        'toggleSelectionHandler'
         },
@@ -5538 +5542 @@
          */
         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();
@@ -6237 +6246 @@
 
             this.listenTo( this.controller, 'toggle:upload:attachment', _.bind( this.toggleUploader, this ) );
-
+            this.controller.on( 'edit:selection', this.editSelection );
             this.createToolbar();
             if ( this.options.sidebar ) {
@@ -6256 +6265 @@
             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