Customize: Add label for hue control and improve accessibility

Author: SainathPoojary

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-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
 	}