Ticket #42078: 42078.diff

src/wp-content/themes/twentyseventeen/assets/js/customize-controls.js

@@ -19 +19 @@
                                         }
                                 };
 
+                                // The control-specific label is redundant because, visually, this control is part of the Color Scheme control.
+                                control.container.find( '.customize-control-title:first' ).addClass( 'screen-reader-text' );
+
                                 visibility();
                                 setting.bind( visibility );
                         });

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>
                 <# } #>
@@ -106 +111 @@
                         <span class="description customize-control-description">{{{ data.description }}}</span>
                 <# } #>
                 <div class="customize-control-content">
-                        <label><span class="screen-reader-text">{{{ data.label }}}</span>
+                        <label for="{{ inputId }}"><span class="screen-reader-text">{{{ data.label }}}</span></label>
+
                         <# 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" 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
         }