Customize: Use explicit labels in hue picker.

Add `for` and `id` attributes to the customizer hue picker, so labels are explicitly associated. Move picker outside of `label` element. Add `label` value for Twenty Seventeen, Twenty Nineteen, and Twenty Twenty.

Props afercia, subrataemfluence, dlh, jorbin, sainathpoojary, abcd95, mleraygp, joedolson.
Fixes #42078.

git-svn-id: https://develop.svn.wordpress.org/trunk@60478 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

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

@@ -75,6 +75,7 @@ function twentynineteen_customize_register( $wp_customize ) {
 			$wp_customize,
 			'primary_color_hue',
 			array(
+				'label'       => __( 'Custom Color', 'twentynineteen' ),
 				'description' => __( 'Apply a custom color for buttons, links, featured images, etc.', 'twentynineteen' ),
 				'section'     => 'colors',
 				'mode'        => 'hue',

src/wp-content/themes/twentynineteen/js/customize-controls.js

@@ -20,7 +20,8 @@
 						control.container.slideUp( 180 );
 					}
 				};
-
+				// 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/assets/js/customize-controls.js

@@ -18,7 +18,8 @@
 						control.container.slideUp( 180 );
 					}
 				};
-
+				// 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

@@ -73,6 +73,7 @@ function twentyseventeen_customize_register( $wp_customize ) {
 			$wp_customize,
 			'colorscheme_hue',
 			array(
+				'label'    => __( 'Hue', 'twentyseventeen' ),
 				'mode'     => 'hue',
 				'section'  => 'colors',
 				'priority' => 6,

src/wp-content/themes/twentytwenty/assets/js/customize.js

@@ -22,6 +22,8 @@
 					}
 				} );
 			}
+			// 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' );
 		} );
 	} );
 }( jQuery, wp.customize ) );

src/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php

@@ -185,6 +185,7 @@ public static function register( $wp_customize ) {
 					array(
 						'section'         => 'colors',
 						'settings'        => 'accent_hue',
+						'label'           => __( 'Custom Color', 'twentytwenty' ),
 						'description'     => __( 'Apply a custom color for links, buttons, featured images.', 'twentytwenty' ),
 						'mode'            => 'hue',
 						'active_callback' => static function () use ( $wp_customize ) {

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

@@ -92,30 +92,34 @@ public function render_content() {}
 	 */
 	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;
 			} else {
 				defaultValue = data.defaultValue;
 			}
 			defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
-		} #>
+		}
+		#>
 		<# if ( data.label ) { #>
 			<span class="customize-control-title">{{{ data.label }}}</span>
 		<# } #>
 		<# 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>
+			<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
 	}