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.


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

src/wp-includes/script-loader.php

@@ -796,10 +796,12 @@ function wp_default_scripts( &$scripts ) {
 		$scripts->add( 'iris', '/wp-admin/js/iris.min.js', array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), '1.0.7', 1 );
 		$scripts->add( 'wp-color-picker', "/wp-admin/js/color-picker$suffix.js", array( 'iris' ), false, 1 );
 		did_action( 'init' ) && $scripts->localize( 'wp-color-picker', 'wpColorPickerL10n', array(
-			'clear' => __( 'Clear' ),
-			'defaultString' => __( 'Default' ),
-			'pick' => __( 'Select Color' ),
-			'current' => __( 'Current Color' ),
+			'clear'            => __( 'Clear' ),
+			'clearAriaLabel'   => __( 'Clear color' ),
+			'defaultString'    => __( 'Default' ),
+			'defaultAriaLabel' => __( 'Select default color' ),
+			'pick'             => __( 'Select Color' ),
+			'defaultLabel'     => __( 'Color value' ),
 		) );
 
 		$scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox', 'wp-util', 'wp-a11y' ), false, 1 );