diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 434fa02b9f..5098da8029 100644 --- a/src/wp-includes/js/media-views.js +++ b/src/wp-includes/js/media-views.js @@ -2498,9 +2498,7 @@ // Keep focus inside media modal // after canceling a gallery - new media.view.FocusManager({ - el: this.el - }).focus(); + this.controller.modal.focusManager.focus(); } }, separateCancel: new media.View({ @@ -2689,9 +2687,7 @@ // Keep focus inside media modal // after jumping to gallery view - new media.view.FocusManager({ - el: this.el - }).focus(); + this.controller.modal.focusManager.focus(); } }); }, @@ -2721,9 +2717,7 @@ // Keep focus inside media modal // after jumping to playlist view - new media.view.FocusManager({ - el: this.el - }).focus(); + this.controller.modal.focusManager.focus(); } }); }, @@ -2753,9 +2747,7 @@ // Keep focus inside media modal // after jumping to video playlist view - new media.view.FocusManager({ - el: this.el - }).focus(); + this.controller.modal.focusManager.focus(); } }); }, @@ -3253,7 +3245,7 @@ } } - this.$( '.media-modal-close' ).focus(); + this.$el.focus(); return this.propagate('open'); }, @@ -3351,42 +3343,37 @@ * @augments Backbone.View */ media.view.FocusManager = media.View.extend({ + events: { - keydown: 'recordTab', - focusin: 'updateIndex' + 'keydown': 'constrainTabbing' }, - focus: function() { - // Reset focus on first left menu item - $('.media-menu-item').first().focus(); + focus: function() { // Reset focus on first left menu item + this.$('.media-menu-item').first().focus(); }, /** * @param {Object} event */ - recordTab: function( event ) { + constrainTabbing: function( event ) { + var tabbables; + // Look for the tab key. if ( 9 !== event.keyCode ) { return; } + tabbables = this.$( ':tabbable' ); + // Keep tab focus within media modal while it's open - if ( event.target === this.tabbableLast[0] && !event.shiftKey ) { - this.tabbableFirst.focus(); + if ( tabbables.last()[0] === event.target && ! event.shiftKey ) { + tabbables.first().focus(); return false; - } else if ( event.target === this.tabbableFirst[0] && event.shiftKey ) { - this.tabbableLast.focus(); + } else if ( tabbables.first()[0] === event.target && event.shiftKey ) { + tabbables.last().focus(); return false; } - }, - /** - * @param {Object} event - */ - updateIndex: function() { - // Resets tabbable elements - this.tabbables = $( ':tabbable', this.$el ); - this.tabbableFirst = this.tabbables.filter( ':first' ); - this.tabbableLast = this.tabbables.filter( ':last' ); } + }); /** @@ -6165,9 +6152,7 @@ // Keep focus inside media modal // after clear link is selected - new media.view.FocusManager({ - el: this.el - }).focus(); + this.controller.modal.focusManager.focus(); } }); @@ -6520,9 +6505,7 @@ this.model.destroy(); // Keep focus inside media modal // after image is deleted - new media.view.FocusManager({ - el: this.el - }).focus(); + this.controller.modal.focusManager.focus(); } }, /**