From 5af9ac0ea2c6023b6cd6df1ee3e408da2b03dfe8 Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Wed, 6 May 2015 10:53:07 +0000
Subject: [PATCH] Customizer: Use a semantic, accessible element for Remove
 Header Image button.

Make the button more noticeable on dark, light, and busy images.

props afercia, RDall, melchoyce.
fixes #32227, #31325.

git-svn-id: https://develop.svn.wordpress.org/trunk@32382 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css       | 27 +++++++------------
 .../class-wp-customize-control.php            |  2 +-
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index becc7a532e..b25610616d 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -764,29 +764,22 @@ p.customize-section-description {
 /* Header control: overlay "close" button */
 
 .customize-control-header .uploaded .header-view .close {
-	font-size: 2em;
-	color: grey;
+	font-size: 20px;
+	color: #fff;
+	background: #555;
+	background: rgba(0, 0, 0, 0.5);
 	position: absolute;
-	visibility: hidden;
 	top: 10px;
-	right: 10px;
+	right: -999px;
 	z-index: 1;
-	width: 20px;
-	height: 20px;
+	width: 26px;
+	height: 26px;
 	cursor: pointer;
 }
 
-.customize-control-header .uploaded .header-view .close:hover {
- color: black;
- text-shadow:
-    -1px -1px 0 #fff,
-    1px -1px 0 #fff,
-    -1px 1px 0 #fff,
-    1px 1px 0 #fff;
-}
-
-.customize-control-header .header-view:hover .close {
-	visibility: visible;
+.customize-control-header .header-view:hover .close,
+.customize-control-header .header-view .close:focus {
+	right: 10px;
 }
 
 /* Header control: randomiz(s)er */
diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php
index bf17fb203f..9cba28c06c 100644
--- a/src/wp-includes/class-wp-customize-control.php
+++ b/src/wp-includes/class-wp-customize-control.php
@@ -1074,7 +1074,7 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
 			<# } else { #>
 
 			<# if (data.type === 'uploaded') { #>
-				<div class="dashicons dashicons-no close"></div>
+				<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"