Ticket #33267: 33267.patch

src/wp-admin/js/customize-controls.js

@@ -685 +685 @@
                  */
                 ready: function () {
                         var section = this;
-                        section.overlay = section.container.find( '.theme-overlay' );
                         section.template = wp.template( 'customize-themes-details-view' );
 
                         // Bind global keyboard events.
@@ -733 +732 @@
                  */
                 attachEvents: function () {
                         var section = this;
+                        section.overlay = section.container.find( '.theme-overlay' );
 
                         // Expand/Collapse section/panel.
                         section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
@@ -806 +806 @@
                                         }
                                 });
                         });
+
+                        // Contain tabbing within the Theme details modal.
+                        section.overlay.on( 'keydown', function( event ) {
+                                section.containFocus( event );
+                        });
                 },
 
                 /**
@@ -1025 +1030 @@
                         $( 'body' ).addClass( 'modal-open' );
                         section.containFocus( section.overlay );
                         section.updateLimits();
+                        // Get and update the tabbable elements for each theme details modal. Keep this after updateLimits().
+                        section.getTabbables( section.overlay );
                         callback();
                 },
 
@@ -1044 +1051 @@
                  *
                  * @since 4.2.0
                  */
-                containFocus: function( el ) {
-                        var tabbables;
+                containFocus: function( event ) {
 
-                        el.on( 'keydown', function( event ) {
+                        // Return if it's not the tab key or if it's navigation with arrows.
+                        if ( 9 !== event.which || 37 === event.which || 39 === event.which ) {
+                                return;
+                        }
 
-                                // Return if it's not the tab key
-                                // When navigating with prev/next focus is already handled
-                                if ( 9 !== event.keyCode ) {
-                                        return;
-                                }
+                        // Keep focus within Theme details modal.
+                        if ( this.tabbables.last()[0] === event.target && ! event.shiftKey ) {
+                                // Prevent default focusing.
+                                event.preventDefault();
+                                this.tabbables.first().focus();
+                        } else if ( this.tabbables.first()[0] === event.target && event.shiftKey ) {
+                                // Prevent default focusing.
+                                event.preventDefault();
+                                this.tabbables.last().focus();
+                        }
+                },
 
-                                // uses jQuery UI to get the tabbable elements
-                                tabbables = $( ':tabbable', el );
+                /**
+                 * Store the tabbable elements within the Theme details modal.
+                 *
+                 * Initially set to an empty jQuery object, gets updated with collection returned by getTabbables().
+                 *
+                 * @since 4.4.0
+                 */
+                tabbables: $(),
 
-                                // Keep focus within the overlay
-                                if ( tabbables.last()[0] === event.target && ! event.shiftKey ) {
-                                        tabbables.first().focus();
-                                        return false;
-                                } else if ( tabbables.first()[0] === event.target && event.shiftKey ) {
-                                        tabbables.last().focus();
-                                        return false;
-                                }
-                        });
-                }
+                /**
+                 * Get the tabbable elements within the Theme details modal.
+                 *
+                 * Uses jQuery UI to get the tabbable elements.
+                 *
+                 * @since 4.4.0
+                 */
+                getTabbables: function( el ) {
+                        this.tabbables = $( ':tabbable', el );
+                }
         });
 
         /**