From 2f0a34dbb8db86d87c1a40ab4aad2ee87949d576 Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Sun, 6 Apr 2014 19:27:40 +0000
Subject: [PATCH] Header images: Improve accessibility of Randomize buttons.

props ehg.
see #27598, #21785.

git-svn-id: https://develop.svn.wordpress.org/trunk@27970 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css        | 17 +++++++++++------
 src/wp-includes/class-wp-customize-control.php | 18 +++++++-----------
 src/wp-includes/js/customize-views.js          |  1 -
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 29193512aa..48d5a9463a 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -469,8 +469,8 @@ body {
 	margin-bottom: 18px;
 }
 
-#customize-control-header_image .uploaded button,
-#customize-control-header_image .default button {
+#customize-control-header_image .uploaded button:not(.random),
+#customize-control-header_image .default button:not(.random) {
 	width: 100%;
 	padding: 0;
 	margin: 0;
@@ -478,7 +478,6 @@ body {
 	border: none;
 	color: inherit;
 	cursor: pointer;
-	outline: none;
 }
 
 #customize-control-header_image button img {
@@ -584,11 +583,17 @@ body {
 	height: 40px;
 }
 
-#customize-control-header_image .random .inner {
-	display: block;
+#customize-control-header_image button.random {
+	width: 100%;
+	height: 40px;
 }
 
-#customize-control-header_image .placeholder:hover .dice {
+#customize-control-header_image button.random .dice {
+	margin-top: 4px;
+}
+
+#customize-control-header_image .placeholder:hover .dice,
+#customize-control-header_image .header-view:hover > button.random .dice {
 	-webkit-animation: dice-color-change 3s infinite;
 	-ms-animation: dice-color-change 3s infinite;
 	animation: dice-color-change 3s infinite;
diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php
index c163247e6d..f93a099324 100644
--- a/src/wp-includes/class-wp-customize-control.php
+++ b/src/wp-includes/class-wp-customize-control.php
@@ -771,18 +771,14 @@ final class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control
 		?>
 		<script type="text/template" id="tmpl-header-choice">
 			<# if (data.random) { #>
-
-			<div class="placeholder random">
-				<div class="inner">
-					<button type="button"><span class="dashicons dashicons-randomize dice"></span>
-					<# if ( data.type === 'uploaded' ) { #>
-						<?php _e( 'Randomize uploaded headers' ); ?>
-					<# } else if ( data.type === 'default' ) { #>
-						<?php _e( 'Randomize suggested headers' ); ?>
-					<# } #>
+					<button type="button" class="button display-options random">
+						<span class="dashicons dashicons-randomize dice"></span>
+						<# if ( data.type === 'uploaded' ) { #>
+							<?php _e( 'Randomize uploaded headers' ); ?>
+						<# } else if ( data.type === 'default' ) { #>
+							<?php _e( 'Randomize suggested headers' ); ?>
+						<# } #>
 					</button>
-				</div>
-			</div>
 
 			<# } else { #>
 
diff --git a/src/wp-includes/js/customize-views.js b/src/wp-includes/js/customize-views.js
index 39ad65b5c5..8dbc0c1c83 100644
--- a/src/wp-includes/js/customize-views.js
+++ b/src/wp-includes/js/customize-views.js
@@ -121,7 +121,6 @@
 			this.$el.html(this.template(this.extendedModel()));
 
 			if (this.model.get('random')) {
-				this.$el.addClass('button display-options');
 				this.setPlaceholder(40);
 			}