Ticket #33228: 33228.3.patch

src/wp-admin/css/themes.css

@@ -1280 +1280 @@
 
 body.full-overlay-active {
         overflow: hidden;
+        visibility: hidden; /* hide content and make it not focusable */
 }
 
 .wp-full-overlay {
@@ -1585 +1586 @@
         height: 100%;
 }
 
-.customize-active #customize-container {
-        display: block;
+/* Make the Customizer and Theme installer overlays the only focusable content */
+#customize-container,
+.theme-install-overlay {
+        visibility: visible;
 }
 
 .customize-loading #customize-container iframe {
@@ -1685 +1688 @@
         border-bottom: 1px solid #ddd;
 }
 
-.theme-install-overlay .wp-full-overlay-main {
+.theme-preview-loading .wp-full-overlay-main {
         background: #fff url(../images/spinner.gif) no-repeat center center;
         -webkit-background-size: 20px 20px;
         background-size: 20px 20px;

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

@@ -3041 +3041 @@
                         return;
                 }
 
-                var parent, topFocus,
+                var parent,
                         body = $( document.body ),
                         overlay = body.children( '.wp-full-overlay' ),
                         title = $( '#customize-info .panel-title.site-title' ),
@@ -3555 +3555 @@
 
                 api.trigger( 'ready' );
 
-                // Make sure left column gets focus
-                topFocus = closeBtn;
-                topFocus.focus();
-                setTimeout(function () {
-                        topFocus.focus();
-                }, 200);
-
         });
 
 })( wp, jQuery );

src/wp-admin/js/theme.js

@@ -720 +720 @@
         nextTheme: function() {
                 var self = this;
                 self.trigger( 'theme:next', self.model.cid );
+                $( document.body ).addClass( 'theme-preview-loading' )
                 return false;
         },
 
@@ -726 +727 @@
         previousTheme: function() {
                 var self = this;
                 self.trigger( 'theme:previous', self.model.cid );
+                $( document.body ).addClass( 'theme-preview-loading' )
                 return false;
         },
 
@@ -764 +766 @@
         html: themes.template( 'theme-preview' ),
 
         render: function() {
-                var data = this.model.toJSON();
+                var data = this.model.toJSON(),
+                        $body = $( document.body );
 
+                $body.addClass( 'theme-preview-loading' ).attr( 'aria-busy', 'true' );
+
                 this.$el.html( this.html( data ) );
 
+                this.iframe = this.$el.find( '.wp-full-overlay-main iframe' );
+                this.iframe.one( 'load', this.loaded );
+
                 themes.router.navigate( themes.router.baseUrl( themes.router.themePath + this.model.get( 'id' ) ), { replace: true } );
 
                 this.$el.fadeIn( 200, function() {
-                        $( 'body' ).addClass( 'theme-installer-active full-overlay-active' );
-                        $( '.close-full-overlay' ).focus();
+                        $body.addClass( 'theme-installer-active full-overlay-active' );
                 });
         },
 
+        /**
+         * Callback for the `load` event on the Theme installer iframe.
+         */
+        loaded: function() {
+                $( document.body ).removeClass( 'theme-preview-loading' ).attr( 'aria-busy', 'false' );
+        },
+
         close: function() {
                 this.$el.fadeOut( 200, function() {
                         $( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );

src/wp-includes/js/customize-loader.js

@@ -181 +181 @@
                  * Callback after the Customizer has been opened.
                  */
                 opened: function() {
-                        Loader.body.addClass( 'customize-active full-overlay-active' );
+                        Loader.body.addClass( 'customize-active full-overlay-active' ).attr( 'aria-busy', 'true' );
                 },
 
                 /**
@@ -207 +207 @@
                         if ( this.originalDocumentTitle ) {
                                 document.title = this.originalDocumentTitle;
                         }
-
-                        // Return focus to link that was originally clicked.
-                        if ( this.link ) {
-                                this.link.focus();
-                        }
                 },
 
                 /**
@@ -225 +220 @@
                         Loader.saved     = null;
                         Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
                         $( window ).off( 'beforeunload', Loader.beforeunload );
+                        // Return focus to link that was originally clicked after visibility is restored.
+                        if ( Loader.link ) {
+                                Loader.link.focus();
+                        }
                 },
 
                 /**
@@ -231 +230 @@
                  * Callback for the `load` event on the Customizer iframe.
                  */
                 loaded: function() {
-                        Loader.body.removeClass('customize-loading');
+                        Loader.body.removeClass( 'customize-loading' ).attr( 'aria-busy', 'false' );
                 },
 
                 /**