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.

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


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

wp-admin/css/customize-controls-rtl.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;
-	left: -999px;
+	right: -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 {
+	right: auto;
 	left: 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;
 }

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;
 }

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 { #>

wp-includes/version.php

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