Ticket #33228: 33228.diff

src/wp-admin/css/themes.css

@@ -1182 +1182 @@
 
 body.full-overlay-active {
         overflow: hidden;
+        /* Hide all the content, the Customizer overlay is then made visible to be the only available content. */
+        visibility: hidden;
 }
 
 .wp-full-overlay {
@@ -1613 +1615 @@
         height: 100%;
 }
 
-.customize-active #customize-container {
-        display: block;
+/* Make the Customizer and Theme installer overlays the only available content. */
+#customize-container,
+.theme-install-overlay {
+        visibility: visible;
 }
 
 .customize-loading #customize-container iframe {

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

@@ -3620 +3620 @@
                         return;
                 }
 
-                var parent, topFocus,
+                var parent,
                         body = $( document.body ),
                         overlay = body.children( '.wp-full-overlay' ),
                         title = $( '#customize-info .panel-title.site-title' ),
@@ -4234 +4234 @@
                 });
 
                 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

@@ -866 +866 @@
         html: themes.template( 'theme-preview' ),
 
         render: function() {
-                var self = this, currentPreviewDevice,
-                        data = this.model.toJSON();
+                var self = this,
+                        currentPreviewDevice,
+                        data = this.model.toJSON(),
+                        $body = $( document.body );
 
+                $body.attr( 'aria-busy', 'true' );
+
                 this.$el.removeClass( 'iframe-ready' ).html( this.html( data ) );
 
                 currentPreviewDevice = this.$el.data( 'current-preview-device' );
@@ -879 +883 @@
                 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' );
                 });
 
                 this.$el.find( 'iframe' ).one( 'load', function() {
@@ -890 +893 @@
 
         iframeLoaded: function() {
                 this.$el.addClass( 'iframe-ready' );
+                $( document.body ).attr( 'aria-busy', 'false' );
         },
 
         close: function() {

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

@@ -183 +183 @@
                  * 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' );
                 },
 
                 /**
-                 * Close the Customizer overlay and return focus to the link that opened it.
+                 * Close the Customizer overlay.
                  */
                 close: function() {
                         if ( ! this.active ) {
@@ -209 +209 @@
                         if ( this.originalDocumentTitle ) {
                                 document.title = this.originalDocumentTitle;
                         }
-
-                        // Return focus to link that was originally clicked.
-                        if ( this.link ) {
-                                this.link.focus();
-                        }
                 },
 
                 /**
@@ -227 +222 @@
                         Loader.saved     = null;
                         Loader.body.removeClass( 'customize-active full-overlay-active' ).removeClass( 'customize-loading' );
                         $( window ).off( 'beforeunload', Loader.beforeunload );
+                        /*
+                         * Return focus to the link that opened the Customizer overlay after
+                         * the body element visibility is restored.
+                         */
+                        if ( Loader.link ) {
+                                Loader.link.focus();
+                        }
                 },
 
                 /**
@@ -233 +235 @@
                  * 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' );
                 },
 
                 /**