Ticket #42078: 42078.debug.diff

src/wp-admin/js/color-picker.js

@@ -42 +42 @@
                                 el = self.element,
                                 color;
 
-                        el.hide();
+                        // el.hide();
+                        self.pickerContainer = $( _after ).insertBefore( $( el ) );
 
                         // Set the saturation to the maximum level.
                         color = 'hsl(' + el.val() + ', 100, 50)';
@@ -53 +54 @@
                                 type: 'hue',
                                 hide: false,
                                 color: color,
+                                target: self.pickerContainer,
                                 /**
                                  * @summary Handles the onChange event if one has been defined in the options.
                                  *

src/wp-content/themes/twentyseventeen/inc/customizer.php

@@ -66 +66 @@
         $wp_customize->add_control(
                 new WP_Customize_Color_Control(
                         $wp_customize, 'colorscheme_hue', array(
+                                'label'    => __( 'Hue', 'twentyseventeen' ),
                                 'mode'     => 'hue',
                                 'section'  => 'colors',
                                 'priority' => 6,

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

@@ -89 +89 @@
          */
         public function content_template() {
                 ?>
-                <# var defaultValue = '#RRGGBB', defaultValueAttr = '',
+                <#
+                var defaultValue = '#RRGGBB',
+                        defaultValueAttr = '',
+                        inputId = _.uniqueId( 'customize-color-control-input-' ),
                         isHueSlider = data.mode === 'hue';
+
                 if ( data.defaultValue && _.isString( data.defaultValue ) && ! isHueSlider ) {
                         if ( '#' !== data.defaultValue.substring( 0, 1 ) ) {
                                 defaultValue = '#' + data.defaultValue;
@@ -98 +102 @@
                                 defaultValue = data.defaultValue;
                         }
                         defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
-                } #>
+                }
+                #>
                 <# if ( data.label ) { #>
-                        <span class="customize-control-title">{{{ data.label }}}</span>
+                        <label for="{{ inputId }}" class="customize-control-title">{{{ data.label }}}</label>
                 <# } #>
                 <# if ( data.description ) { #>
                         <span class="description customize-control-description">{{{ data.description }}}</span>
                 <# } #>
                 <div class="customize-control-content">
-                        <label><span class="screen-reader-text">{{{ data.label }}}</span>
                         <# if ( isHueSlider ) { #>
-                                <input class="color-picker-hue" type="text" data-type="hue" />
+                                <input id="{{ inputId }}" class="color-picker-hue" type="number" min="1" max="359" step="1" data-type="hue" />
                         <# } else { #>
-                                <input class="color-picker-hex" type="text" maxlength="7" placeholder="{{ defaultValue }}" {{ defaultValueAttr }} />
+                                <input id="{{ inputId }}" class="color-picker-hex" type="text" maxlength="7" placeholder="{{ defaultValue }}" {{ defaultValueAttr }} />
                          <# } #>
-                        </label>
                 </div>
                 <?php
         }