Customize: Improve keyboard accessibility for publish settings section.

westonruter · westonruter · commit a4dab604fbac · 2017-10-09T23:00:39.000Z
Props sayedwp. See #39896. Fixes #42027. git-svn-id: https://develop.svn.wordpress.org/trunk@41802 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
@@ -38,6 +38,11 @@ body:not(.ready) #customize-save-button-wrapper .save {
 	box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
 	margin-top: 0;
 }
+
+#customize-save-button-wrapper .save:focus, #publish-settings:focus {
+	box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db; /* This is default box shadow for focus */
+}
+
 #customize-save-button-wrapper .save.has-next-sibling {
 	border-radius: 3px 0 0 3px;
 }
@@ -46,16 +51,17 @@ body:not(.ready) #customize-save-button-wrapper .save {
 	position: absolute;
 	top: 0;
 	bottom: 0;
-	left: -301px;
+	left: 0;
 	visibility: hidden;
 	overflow-x: hidden;
 	overflow-y: auto;
-	width: 300px;
+	width: 100%;
 	margin: 0;
-	z-index: 4;
+	z-index: -1;
 	background: #eee;
 	transition: left .18s;
 	border-right: 1px solid #ddd;
+	border-left: 1px solid #ddd;
 	height: 100%;
 }
 
@@ -73,7 +79,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
 
 .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
 	visibility: visible;
-	left: 0;
+	left: 100%;
 	transition: left .18s;
 }
 
@@ -132,6 +138,10 @@ body.trashing #publish-settings {
 	overflow-x: hidden;
 }
 
+.outer-section-open #customize-controls .wp-full-overlay-sidebar-content {
+	background: #eee;
+}
+
 #customize-controls .customize-info {
 	border: none;
 	border-bottom: 1px solid #ddd;
@@ -2828,6 +2838,14 @@ body.adding-widget .add-new-widget:before,
 		width: 100%;
 	}
 
+	body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content {
+		left: -100%;
+	}
+
+	body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
+		left: 0;
+	}
+
 	#available-widgets .customize-section-title,
 	#available-menu-items .customize-section-title {
 		display: block;
@@ -2882,4 +2900,4 @@ body.adding-widget .add-new-widget:before,
 	.reordering .reorder-done {
 		padding: 8px;
 	}
-}
+}
diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
@@ -164,6 +164,12 @@
 			</a>
 		</div>
 
+		<div id="customize-sidebar-outer-content">
+			<div id="customize-outer-theme-controls">
+				<ul class="customize-outer-pane-parent"><?php // Outer panel and sections are not implemented, but its here as a placeholder to avoid any side-effect in api.Section. ?></ul>
+			</div>
+		</div>
+
 		<div id="widgets-right" class="wp-clearfix"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the Customizer for compat -->
 			<div id="customize-notifications-area" class="customize-control-notifications-container">
 				<ul></ul>
@@ -217,11 +223,6 @@
 		</div>
 	</form>
 	<div id="customize-preview" class="wp-full-overlay-main"></div>
-	<div id="customize-sidebar-outer-content">
-		<div id="customize-outer-theme-controls">
-			<ul class="customize-outer-pane-parent"><?php // Outer panel and sections are not implemented, but its here as a placeholder to avoid any side-effect in api.Section. ?></ul>
-		</div>
-	</div>
 	<?php
 
 	/**
diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php
@@ -3770,7 +3770,7 @@ public function render_control_templates() {
 					<span class="preview-control-element" data-component="url"></span>
 					<span class="screen-reader-text"><?php _e( '(opens in a new window)' ); ?></span>
 				</a>
-				<input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
+				<input id="{{ elementPrefix }}customize-preview-link-input" readonly tabindex="-1" class="preview-control-element" data-component="input">
 				<button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
 			</div>
 		</script>
