Changeset 60478

Timestamp:

07/16/2025 10:50:07 PM (4 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.

Location:

trunk/src

Files:

• wp-content/themes/twentynineteen/inc/customizer.php (modified) (1 diff)
• wp-content/themes/twentynineteen/js/customize-controls.js (modified) (1 diff)
• wp-content/themes/twentyseventeen/assets/js/customize-controls.js (modified) (1 diff)
• wp-content/themes/twentyseventeen/inc/customizer.php (modified) (1 diff)
• wp-content/themes/twentytwenty/assets/js/customize.js (modified) (1 diff)
• wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php (modified) (1 diff)
• wp-includes/customize/class-wp-customize-color-control.php (modified) (3 diffs)

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

@@ -76 +76 @@
             'primary_color_hue',
             array(
+                'label'       => __( 'Custom Color', 'twentynineteen' ),
                 'description' => __( 'Apply a custom color for buttons, links, featured images, etc.', 'twentynineteen' ),
                 'section'     => 'colors',

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

@@ -21 +21 @@
                     }
                 };
-
+                // 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 );

trunk/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 );

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

@@ -74 +74 @@
             'colorscheme_hue',
             array(
+                'label'    => __( 'Hue', 'twentyseventeen' ),
                 'mode'     => 'hue',
                 'section'  => 'colors',

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

@@ -23 +23 @@
                 } );
             }
+            // 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' );
         } );
     } );

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

@@ -186 +186 @@
                         'section'         => 'colors',
                         'settings'        => 'accent_hue',
+                        'label'           => __( 'Custom Color', 'twentytwenty' ),
                         'description'     => __( 'Apply a custom color for links, buttons, featured images.', 'twentytwenty' ),
                         'mode'            => 'hue',

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