From 1574d89dfb3c214c0d5e769e7c8896f5750385ef Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Sun, 23 Oct 2016 19:56:43 +0000
Subject: [PATCH] Customize: Keep previously uploaded header images in place.

On the Header Image section, the previously uploaded images disappeared off-screen
when using the keyboard to navigate and the remove "X" button got keyboard focus.
Changing the off-screen CSS technique used for the "X" buttons fixes it.

- improves the focus style on the previously uploaded and suggested images
- removes a `tabindex="0"` attribute from the current header image

Fixes #38156.


git-svn-id: https://develop.svn.wordpress.org/trunk@38881 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css       | 23 ++++++++++++++++++-
 ...lass-wp-customize-header-image-control.php | 10 ++++----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 553a3ca853..4c2e91cd2a 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -917,6 +917,11 @@ p.customize-section-description {
 .customize-control-header .header-view:after {
 	border: 0;
 }
+
+.customize-control-header .header-view.selected .choice:focus {
+	outline: none;
+}
+
 .customize-control-header .header-view.selected:after {
 	content: '';
 	position: absolute;
@@ -926,6 +931,7 @@ p.customize-section-description {
 	-webkit-border-radius: 2px;
 	border-radius: 2px;
 }
+
 .customize-control-header .header-view.button.selected {
 	border: 0;
 }
@@ -939,7 +945,7 @@ p.customize-section-description {
 	background: rgba(0, 0, 0, 0.5);
 	position: absolute;
 	top: 10px;
-	right: -999px;
+	left: -999px;
 	z-index: 1;
 	width: 26px;
 	height: 26px;
@@ -948,9 +954,14 @@ p.customize-section-description {
 
 .customize-control-header .header-view:hover .close,
 .customize-control-header .header-view .close:focus {
+	left: auto;
 	right: 10px;
 }
 
+.customize-control-header .header-view .close:focus {
+	outline: 1px solid #5b9dd9;
+}
+
 /* Header control: randomiz(s)er */
 
 .customize-control-header .random.placeholder {
@@ -997,6 +1008,16 @@ p.customize-section-description {
 	margin-bottom: 9px;
 }
 
+.customize-control-header .choice:focus {
+	outline: none;
+	-webkit-box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 3px 1px rgba(30, 140, 190, .8);
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 3px 1px rgba(30, 140, 190, .8);
+}
+
 .customize-control-header .uploaded div:last-child > .choice {
 	margin-bottom: 0;
 }
diff --git a/src/wp-includes/customize/class-wp-customize-header-image-control.php b/src/wp-includes/customize/class-wp-customize-header-image-control.php
index 9852de6ddc..16ebae71bd 100644
--- a/src/wp-includes/customize/class-wp-customize-header-image-control.php
+++ b/src/wp-includes/customize/class-wp-customize-header-image-control.php
@@ -102,10 +102,6 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
 
 			<# } else { #>
 
-			<# if (data.type === 'uploaded') { #>
-				<button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
-			<# } #>
-
 			<button type="button" class="choice thumbnail"
 				data-customize-image-value="{{{data.header.url}}}"
 				data-customize-header-image-data="{{JSON.stringify(data.header)}}">
@@ -113,6 +109,10 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
 				<img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}">
 			</button>
 
+			<# if ( data.type === 'uploaded' ) { #>
+				<button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
+			<# } #>
+
 			<# } #>
 		</script>
 
@@ -131,7 +131,7 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
 
 				<# } else { #>
 
-			<img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" tabindex="0"/>
+			<img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" />
 
 				<# } #>
 			<# } else { #>