WordPress.org

Make WordPress Core

Ticket #33267: 33267.patch

File 33267.patch, 3.1 KB (added by afercia, 6 years ago)
  • src/wp-admin/js/customize-controls.js

     
    685685                 */
    686686                ready: function () {
    687687                        var section = this;
    688                         section.overlay = section.container.find( '.theme-overlay' );
    689688                        section.template = wp.template( 'customize-themes-details-view' );
    690689
    691690                        // Bind global keyboard events.
     
    733732                 */
    734733                attachEvents: function () {
    735734                        var section = this;
     735                        section.overlay = section.container.find( '.theme-overlay' );
    736736
    737737                        // Expand/Collapse section/panel.
    738738                        section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
     
    806806                                        }
    807807                                });
    808808                        });
     809
     810                        // Contain tabbing within the Theme details modal.
     811                        section.overlay.on( 'keydown', function( event ) {
     812                                section.containFocus( event );
     813                        });
    809814                },
    810815
    811816                /**
     
    10251030                        $( 'body' ).addClass( 'modal-open' );
    10261031                        section.containFocus( section.overlay );
    10271032                        section.updateLimits();
     1033                        // Get and update the tabbable elements for each theme details modal. Keep this after updateLimits().
     1034                        section.getTabbables( section.overlay );
    10281035                        callback();
    10291036                },
    10301037
     
    10441051                 *
    10451052                 * @since 4.2.0
    10461053                 */
    1047                 containFocus: function( el ) {
    1048                         var tabbables;
     1054                containFocus: function( event ) {
    10491055
    1050                         el.on( 'keydown', function( event ) {
     1056                        // Return if it's not the tab key or if it's navigation with arrows.
     1057                        if ( 9 !== event.which || 37 === event.which || 39 === event.which ) {
     1058                                return;
     1059                        }
    10511060
    1052                                 // Return if it's not the tab key
    1053                                 // When navigating with prev/next focus is already handled
    1054                                 if ( 9 !== event.keyCode ) {
    1055                                         return;
    1056                                 }
     1061                        // Keep focus within Theme details modal.
     1062                        if ( this.tabbables.last()[0] === event.target && ! event.shiftKey ) {
     1063                                // Prevent default focusing.
     1064                                event.preventDefault();
     1065                                this.tabbables.first().focus();
     1066                        } else if ( this.tabbables.first()[0] === event.target && event.shiftKey ) {
     1067                                // Prevent default focusing.
     1068                                event.preventDefault();
     1069                                this.tabbables.last().focus();
     1070                        }
     1071                },
    10571072
    1058                                 // uses jQuery UI to get the tabbable elements
    1059                                 tabbables = $( ':tabbable', el );
     1073                /**
     1074                 * Store the tabbable elements within the Theme details modal.
     1075                 *
     1076                 * Initially set to an empty jQuery object, gets updated with collection returned by getTabbables().
     1077                 *
     1078                 * @since 4.4.0
     1079                 */
     1080                tabbables: $(),
    10601081
    1061                                 // Keep focus within the overlay
    1062                                 if ( tabbables.last()[0] === event.target && ! event.shiftKey ) {
    1063                                         tabbables.first().focus();
    1064                                         return false;
    1065                                 } else if ( tabbables.first()[0] === event.target && event.shiftKey ) {
    1066                                         tabbables.last().focus();
    1067                                         return false;
    1068                                 }
    1069                         });
    1070                 }
     1082                /**
     1083                 * Get the tabbable elements within the Theme details modal.
     1084                 *
     1085                 * Uses jQuery UI to get the tabbable elements.
     1086                 *
     1087                 * @since 4.4.0
     1088                 */
     1089                getTabbables: function( el ) {
     1090                        this.tabbables = $( ':tabbable', el );
     1091                }
    10711092        });
    10721093
    10731094        /**