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

Timestamp:

09/03/2017 04:01:18 PM (9 years ago)

Author:

afercia

Message:

Accessibility: Improve the color picker UI accessibility, interaction, and generated markup.

• Refactors the UI controls around the Iris color picker to output valid and semantic markup
• Simplifies the way elements visibility gets toggled
• Properly associates the visually hidden label with the color input field
• Makes the toggle button a real button
• Adds aria-expanded to the toggle button
• Keeps focus on the toggle button instead of moving it to the color input field
• Adds aria-label attributes to give better context to some controls
• Removes a redundant title attribute
• Keeps the toggle button text to "Select Color" instead of changing it to "Current Color" when a color is selected
• Slightly improves the responsive view
• CSS clean-up

Fixes #39662.

File:

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

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

@@ -100 +100 @@
                         defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
                 } #>
-                <label>
-                        <# 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">
-                                <# if ( isHueSlider ) { #>
-                                        <input class="color-picker-hue" type="text" data-type="hue" />
-                                <# } else { #>
-                                        <input class="color-picker-hex" type="text" maxlength="7" placeholder="{{ defaultValue }}" {{ defaultValueAttr }} />
-                                <# } #>
-                        </div>
-                </label>
+                <# 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>
+                        <# if ( isHueSlider ) { #>
+                                <input class="color-picker-hue" type="text" data-type="hue" />
+                        <# } else { #>
+                                <input class="color-picker-hex" type="text" maxlength="7" placeholder="{{ defaultValue }}" {{ defaultValueAttr }} />
+                        <# } #>
+                        </label>
+                </div>
                 <?php
         }