Ticket #21785: 21785-a11y-ui-improvements.2.diff

src/wp-admin/css/customize-controls.css

@@ -465 +465 @@
         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;
@@ -474 +474 @@
         border: none;
         color: inherit;
         cursor: pointer;
-        outline: none;
 }
 
 #customize-control-header_image button img {
@@ -579 +578 @@
         height: 40px;
 }
 
-#customize-control-header_image .random .inner {
-        display: block;
+#customize-control-header_image button.random {
+        width: 100%;
+        height: 40px;
+}
+
+#customize-control-header_image button.random .dice {
+        margin-top: 4px;
 }
 
-#customize-control-header_image .placeholder:hover .dice {
+#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;

src/wp-includes/class-wp-customize-control.php

@@ -771 +771 @@
                 ?>
                 <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 { #>
 

src/wp-includes/js/customize-views.js

@@ -121 +121 @@
                         this.$el.html(this.template(this.extendedModel()));
 
                         if (this.model.get('random')) {
-                                this.$el.addClass('button display-options');
                                 this.setPlaceholder(40);
                         }