WordPress.org

Make WordPress Core

Ticket #23560: 23560.28.diff

File 23560.28.diff, 3.8 KB (added by gcorne, 5 years ago)
  • src/wp-includes/js/media-views.js

    diff --git src/wp-includes/js/media-views.js src/wp-includes/js/media-views.js
    index fa8a7c7..e10a35e 100644
     
    25042504
    25052505                                                // Keep focus inside media modal
    25062506                                                // after canceling a gallery
    2507                                                 new media.view.FocusManager({
    2508                                                         el: this.el
    2509                                                 }).focus();
     2507                                                this.controller.modal.focusManager.focus();
    25102508                                        }
    25112509                                },
    25122510                                separateCancel: new media.View({
     
    26952693
    26962694                                        // Keep focus inside media modal
    26972695                                        // after jumping to gallery view
    2698                                         new media.view.FocusManager({
    2699                                                 el: this.el
    2700                                         }).focus();
     2696                                        this.controller.modal.focusManager.focus();
    27012697                                }
    27022698                        });
    27032699                },
     
    27272723
    27282724                                        // Keep focus inside media modal
    27292725                                        // after jumping to playlist view
    2730                                         new media.view.FocusManager({
    2731                                                 el: this.el
    2732                                         }).focus();
     2726                                        this.controller.modal.focusManager.focus();
    27332727                                }
    27342728                        });
    27352729                },
     
    27592753
    27602754                                        // Keep focus inside media modal
    27612755                                        // after jumping to video playlist view
    2762                                         new media.view.FocusManager({
    2763                                                 el: this.el
    2764                                         }).focus();
     2756                                        this.controller.modal.focusManager.focus();
    27652757                                }
    27662758                        });
    27672759                },
     
    31733165                        });
    31743166
    31753167                        this.focusManager = new media.view.FocusManager({
    3176                                 el: this.el
     3168                                el: this.el,
     3169                                modal: this
    31773170                        });
    31783171                },
    31793172                /**
     
    32593252                                }
    32603253                        }
    32613254
    3262                         this.$( '.media-modal-close' ).focus();
     3255                        this.$el.focus();
    32633256
    32643257                        return this.propagate('open');
    32653258                },
     
    33573350         * @augments Backbone.View
    33583351         */
    33593352        media.view.FocusManager = media.View.extend({
    3360                 events: {
    3361                         keydown: 'recordTab',
    3362                         focusin: 'updateIndex'
     3353
     3354                initialize: function( options ) {
     3355                        _.bindAll( this, 'constrainTabbing' );
     3356                        this.modal = options.modal;
     3357                        this.listenTo( this.modal, 'open', this.activate );
     3358                        this.listenTo( this.modal, 'close', this.deactivate );
    33633359                },
    33643360
    3365                 focus: function() {
    3366                         // Reset focus on first left menu item
    3367                         $('.media-menu-item').first().focus();
     3361                focus: function() { // Reset focus on first left menu item
     3362                        this.$('.media-menu-item').first().focus();
    33683363                },
    33693364                /**
    33703365                 * @param {Object} event
    33713366                 */
    3372                 recordTab: function( event ) {
     3367                constrainTabbing: function( event ) {
     3368                        var tabbables;
     3369
    33733370                        // Look for the tab key.
    33743371                        if ( 9 !== event.keyCode ) {
    33753372                                return;
    33763373                        }
    33773374
     3375                        tabbables = this.$( ':tabbable' );
     3376
    33783377                        // Keep tab focus within media modal while it's open
    3379                         if ( event.target === this.tabbableLast[0] && !event.shiftKey ) {
    3380                                 this.tabbableFirst.focus();
     3378                        if ( tabbables.last()[0] === event.target && ! event.shiftKey ) {
     3379                                tabbables.first().focus();
    33813380                                return false;
    3382                         } else if ( event.target === this.tabbableFirst[0] && event.shiftKey ) {
    3383                                 this.tabbableLast.focus();
     3381                        } else if ( tabbables.first()[0] === event.target && event.shiftKey ) {
     3382                                tabbables.last().focus();
    33843383                                return false;
    33853384                        }
    33863385                },
    3387                 /**
    3388                  * @param {Object} event
    3389                  */
    3390                 updateIndex: function() {
    3391                         // Resets tabbable elements
    3392                         this.tabbables = $( ':tabbable', this.$el );
    3393                         this.tabbableFirst = this.tabbables.filter( ':first' );
    3394                         this.tabbableLast = this.tabbables.filter( ':last' );
     3386
     3387                activate: function() {
     3388                        $( document ).on( 'keydown', this.constrainTabbing );
     3389                },
     3390
     3391                deactivate: function() {
     3392                        $( document ).off( 'keydown', this.constrainTabbing );
    33953393                }
     3394
    33963395        });
    33973396
    33983397        /**
     
    61716170
    61726171                        // Keep focus inside media modal
    61736172                        // after clear link is selected
    6174                         new media.view.FocusManager({
    6175                                 el: this.el
    6176                         }).focus();
     6173                        this.controller.modal.focusManager.focus();
    61776174                }
    61786175        });
    61796176
     
    65266523                                this.model.destroy();
    65276524                                // Keep focus inside media modal
    65286525                                // after image is deleted
    6529                                 new media.view.FocusManager({
    6530                                         el: this.el
    6531                                 }).focus();
     6526                                this.controller.modal.focusManager.focus();
    65326527                        }
    65336528                },
    65346529                /**