Changeset 60478 for trunk/src/wp-includes/customize/class-wp-customize-color-control.php

Timestamp:

07/16/2025 10:50:07 PM (9 months ago)

Author:

joedolson

Message:

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.

File:

• trunk/src/wp-includes/customize/class-wp-customize-color-control.php (modified) (3 diffs)

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

@@ -93 +93 @@
     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 ) ) {
@@ -102 +106 @@
             }
             defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
-        } #>
+        }
+        #>
         <# if ( data.label ) { #>
             <span class="customize-control-title">{{{ data.label }}}</span>
@@ -110 +115 @@
         <# } #>
         <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