Ticket #22659: 22659.2.diff

Index: wp-includes/js/media-views.js
===================================================================
--- wp-includes/js/media-views.js       (revision 23066)
+++ wp-includes/js/media-views.js       (working copy)
@@ -1991,6 +1991,58 @@
                }
        });
 
+       // wp.media.view.FocusManager
+       // ----------------------------
+       media.view.FocusManager = media.View.extend({
+               events: {
+                       keydown: 'recordTab',
+                       focusin: 'updateIndex'
+               },
+
+               focus: function() {
+                       if ( _.isUndefined( this.index ) )
+                               return;
+
+                       // Update our collection of `$tabbables`.
+                       this.$tabbables = this.$(':tabbable');
+
+                       // If tab is saved, focus it.
+                       this.$tabbables.eq( this.index ).focus();
+               },
+
+               recordTab: function( event ) {
+                       // Look for the tab key.
+                       if ( 9 !== event.keyCode )
+                               return;
+
+                       // First try to update the index.
+                       if ( _.isUndefined( this.index ) )
+                               this.updateIndex( event );
+
+                       // If we still don't have an index, bail.
+                       if ( _.isUndefined( this.index ) )
+                               return;
+
+                       var index = this.index + ( event.shiftKey ? -1 : 1 );
+
+                       if ( index >= 0 && index < this.$tabbables.length )
+                               this.index = index;
+                       else
+                               delete this.index;
+               },
+
+               updateIndex: function( event ) {
+                       this.$tabbables = this.$(':tabbable');
+
+                       var index = this.$tabbables.index( event.target );
+
+                       if ( -1 === index )
+                               delete this.index;
+                       else
+                               this.index = index;
+               }
+       });
+
        // wp.media.view.UploaderWindow
        // ----------------------------
        media.view.UploaderWindow = media.View.extend({
@@ -2832,6 +2884,7 @@
                        this.updateSave();
 
                        this.views.render();
+
                        return this;
                },
 
@@ -3951,6 +4004,20 @@
                        'click .delete-attachment':       'deleteAttachment'
                },
 
+               initialize: function() {
+                       this.focusManager = new media.view.FocusManager({
+                               el: this.el
+                       });
+
+                       media.view.Attachment.prototype.initialize.apply( this, arguments );
+               },
+
+               render: function() {
+                       media.view.Attachment.prototype.render.apply( this, arguments );
+                       this.focusManager.focus();
+                       return this;
+               },
+
                deleteAttachment: function(event) {
                        event.preventDefault();
 
@@ -3974,6 +4041,10 @@
                },
 
                initialize: function() {
+                       this.focusManager = new media.view.FocusManager({
+                               el: this.el
+                       });
+
                        this.model.on( 'change:compat', this.render, this );
                },
 
@@ -3982,7 +4053,11 @@
                        if ( ! compat || ! compat.item )
                                return;
 
+                       this.views.detach();
                        this.$el.html( compat.item );
+                       this.views.render();
+
+                       this.focusManager.focus();
                        return this;
                },