Changeset 27970

Timestamp:

04/06/2014 07:27:40 PM (13 years ago)

Author:

ocean90

Message:

Header images: Improve accessibility of Randomize buttons.

props ehg.
see #27598, #21785.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (3 diffs)
• wp-includes/class-wp-customize-control.php (modified) (1 diff)
• wp-includes/js/customize-views.js (modified) (1 diff)

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

@@ -470 +470 @@
 }
 
-#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;
@@ -479 +479 @@
         color: inherit;
         cursor: pointer;
-        outline: none;
 }
 
@@ -585 +584 @@
 }
 
-#customize-control-header_image .random .inner {
-        display: block;
-}
-
-#customize-control-header_image .placeholder:hover .dice {
+#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 .header-view:hover > button.random .dice {
         -webkit-animation: dice-color-change 3s infinite;
         -ms-animation: dice-color-change 3s infinite;

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

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

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

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