Accessibility: Improve the Customizer and Theme Installer initial focus.

The Customizer and Theme Installer open in full overlays that need to receive 
focus. Also, keyboard navigation should be constrained within the overlays. Using
CSS `visibility` to hide all the content except the overlays, makes them the only
available and focusable content and allows browsers to handle focus natively.

See #29158.
Fixes #33228, #27705.

Built from https://develop.svn.wordpress.org/trunk@38520


git-svn-id: http://core.svn.wordpress.org/trunk@38461 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/themes-rtl.css

@@ -1182,6 +1182,8 @@ div#custom-background-image img {
 
 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,8 +1615,10 @@ body.full-overlay-active {
 	height: 100%;
 }
 
-.customize-active #customize-container {
+/* Make the Customizer and Theme installer overlays the only available content. */
-	display: block;
+#customize-container,
+.theme-install-overlay {
+	visibility: visible;
 }
 
 .customize-loading #customize-container iframe {

wp-admin/css/themes.css

@@ -1182,6 +1182,8 @@ div#custom-background-image img {
 
 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,8 +1615,10 @@ body.full-overlay-active {
 	height: 100%;
 }
 
-.customize-active #customize-container {
+/* Make the Customizer and Theme installer overlays the only available content. */
-	display: block;
+#customize-container,
+.theme-install-overlay {
+	visibility: visible;
 }
 
 .customize-loading #customize-container iframe {

wp-admin/js/customize-controls.js

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

wp-admin/js/theme.js

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

wp-includes/js/customize-loader.js

@@ -183,11 +183,11 @@ window.wp = window.wp || {};
 		 * 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,11 +209,6 @@ window.wp = window.wp || {};
 			if ( this.originalDocumentTitle ) {
 				document.title = this.originalDocumentTitle;
 			}
-
-			// Return focus to link that was originally clicked.
-			if ( this.link ) {
-				this.link.focus();
-			}
 		},
 
 		/**
@@ -227,13 +222,20 @@ window.wp = window.wp || {};
 			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();
+			}
 		},
 
 		/**
 		 * 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' );
 		},
 
 		/**

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

@@ -1 +1 @@
-window.wp=window.wp||{},function(a,b){var c,d=wp.customize;b.extend(b.support,{history:!(!window.history||!history.pushState),hashchange:"onhashchange"in window&&(void 0===document.documentMode||document.documentMode>7)}),c=b.extend({},d.Events,{initialize:function(){this.body=b(document.body),c.settings&&b.support.postMessage&&(b.support.cors||!c.settings.isCrossDomain)&&(this.window=b(window),this.element=b('<div id="customize-container" />').appendTo(this.body),this.bind("open",this.overlay.show),this.bind("close",this.overlay.hide),b("#wpbody").on("click",".load-customize",function(a){a.preventDefault(),c.link=b(this),c.open(c.link.attr("href"))}),b.support.history&&this.window.on("popstate",c.popstate),b.support.hashchange&&(this.window.on("hashchange",c.hashchange),this.window.triggerHandler("hashchange")))},popstate:function(a){var b=a.originalEvent.state;b&&b.customize?c.open(b.customize):c.active&&c.close()},hashchange:function(){var a=window.location.toString().split("#")[1];a&&0===a.indexOf("wp_customize=on")&&c.open(c.settings.url+"?"+a),a||b.support.history||c.close()},beforeunload:function(){return c.saved()?void 0:c.settings.l10n.saveAlert},open:function(a){if(!this.active){if(c.settings.browser.mobile)return window.location=a;this.originalDocumentTitle=document.title,this.active=!0,this.body.addClass("customize-loading"),this.saved=new d.Value(!0),this.iframe=b("<iframe />",{src:a,title:c.settings.l10n.mainIframeTitle}).appendTo(this.element),this.iframe.one("load",this.loaded),this.messenger=new d.Messenger({url:a,channel:"loader",targetWindow:this.iframe[0].contentWindow}),this.messenger.bind("ready",function(){c.messenger.send("back")}),this.messenger.bind("close",function(){b.support.history?history.back():b.support.hashchange?window.location.hash="":c.close()}),b(window).on("beforeunload",this.beforeunload),this.messenger.bind("saved",function(){c.saved(!0)}),this.messenger.bind("change",function(){c.saved(!1)}),this.messenger.bind("title",function(a){window.document.title=a}),this.pushState(a),this.trigger("open")}},pushState:function(a){var c=a.split("?")[1];b.support.history&&window.location.href!==a?history.pushState({customize:a},"",a):!b.support.history&&b.support.hashchange&&c&&(window.location.hash="wp_customize=on&"+c),this.trigger("open")},opened:function(){c.body.addClass("customize-active full-overlay-active")},close:function(){if(this.active){if(!this.saved()&&!confirm(c.settings.l10n.saveAlert))return void history.forward();this.active=!1,this.trigger("close"),this.originalDocumentTitle&&(document.title=this.originalDocumentTitle),this.link&&this.link.focus()}},closed:function(){c.iframe.remove(),c.messenger.destroy(),c.iframe=null,c.messenger=null,c.saved=null,c.body.removeClass("customize-active full-overlay-active").removeClass("customize-loading"),b(window).off("beforeunload",c.beforeunload)},loaded:function(){c.body.removeClass("customize-loading")},overlay:{show:function(){this.element.fadeIn(200,c.opened)},hide:function(){this.element.fadeOut(200,c.closed)}}}),b(function(){c.settings=_wpCustomizeLoaderSettings,c.initialize()}),d.Loader=c}(wp,jQuery);
+window.wp=window.wp||{},function(a,b){var c,d=wp.customize;b.extend(b.support,{history:!(!window.history||!history.pushState),hashchange:"onhashchange"in window&&(void 0===document.documentMode||document.documentMode>7)}),c=b.extend({},d.Events,{initialize:function(){this.body=b(document.body),c.settings&&b.support.postMessage&&(b.support.cors||!c.settings.isCrossDomain)&&(this.window=b(window),this.element=b('<div id="customize-container" />').appendTo(this.body),this.bind("open",this.overlay.show),this.bind("close",this.overlay.hide),b("#wpbody").on("click",".load-customize",function(a){a.preventDefault(),c.link=b(this),c.open(c.link.attr("href"))}),b.support.history&&this.window.on("popstate",c.popstate),b.support.hashchange&&(this.window.on("hashchange",c.hashchange),this.window.triggerHandler("hashchange")))},popstate:function(a){var b=a.originalEvent.state;b&&b.customize?c.open(b.customize):c.active&&c.close()},hashchange:function(){var a=window.location.toString().split("#")[1];a&&0===a.indexOf("wp_customize=on")&&c.open(c.settings.url+"?"+a),a||b.support.history||c.close()},beforeunload:function(){return c.saved()?void 0:c.settings.l10n.saveAlert},open:function(a){if(!this.active){if(c.settings.browser.mobile)return window.location=a;this.originalDocumentTitle=document.title,this.active=!0,this.body.addClass("customize-loading"),this.saved=new d.Value(!0),this.iframe=b("<iframe />",{src:a,title:c.settings.l10n.mainIframeTitle}).appendTo(this.element),this.iframe.one("load",this.loaded),this.messenger=new d.Messenger({url:a,channel:"loader",targetWindow:this.iframe[0].contentWindow}),this.messenger.bind("ready",function(){c.messenger.send("back")}),this.messenger.bind("close",function(){b.support.history?history.back():b.support.hashchange?window.location.hash="":c.close()}),b(window).on("beforeunload",this.beforeunload),this.messenger.bind("saved",function(){c.saved(!0)}),this.messenger.bind("change",function(){c.saved(!1)}),this.messenger.bind("title",function(a){window.document.title=a}),this.pushState(a),this.trigger("open")}},pushState:function(a){var c=a.split("?")[1];b.support.history&&window.location.href!==a?history.pushState({customize:a},"",a):!b.support.history&&b.support.hashchange&&c&&(window.location.hash="wp_customize=on&"+c),this.trigger("open")},opened:function(){c.body.addClass("customize-active full-overlay-active").attr("aria-busy","true")},close:function(){if(this.active){if(!this.saved()&&!confirm(c.settings.l10n.saveAlert))return void history.forward();this.active=!1,this.trigger("close"),this.originalDocumentTitle&&(document.title=this.originalDocumentTitle)}},closed:function(){c.iframe.remove(),c.messenger.destroy(),c.iframe=null,c.messenger=null,c.saved=null,c.body.removeClass("customize-active full-overlay-active").removeClass("customize-loading"),b(window).off("beforeunload",c.beforeunload),c.link&&c.link.focus()},loaded:function(){c.body.removeClass("customize-loading").attr("aria-busy","false")},overlay:{show:function(){this.element.fadeIn(200,c.opened)},hide:function(){this.element.fadeOut(200,c.closed)}}}),b(function(){c.settings=_wpCustomizeLoaderSettings,c.initialize()}),d.Loader=c}(wp,jQuery);

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-alpha-38519';
+$wp_version = '4.7-alpha-38520';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.