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-admin/css/color-picker.css

@@ -6,40 +6,23 @@
 	display: none;
 }
 
-.wp-color-result {
+/* Needs higher specificiity. */
-	background-color: #f7f7f7;
+.wp-picker-container .wp-color-result.button {
-	border: 1px solid #ccc;
+	height: 24px;
-	border-radius: 3px;
-	cursor: pointer;
-	display: inline-block;
-	height: 22px;
 	margin: 0 6px 6px 0px;
-	position: relative;
+	padding: 0 0 0 30px;
-	top: 1px;
+	font-size: 11px;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	vertical-align: bottom;
-	display: inline-block;
-	padding-left: 30px;
-	box-shadow: 0 1px 0 #ccc;
 }
 
-.wp-color-result:after {
+.wp-color-result-text {
 	background: #f7f7f7;
 	border-radius: 0 2px 2px 0;
 	border-left: 1px solid #ccc;
 	color: #555;
-	content: attr( title );
 	display: block;
-	font-size: 11px;
 	line-height: 22px;
 	padding: 0 6px;
-	position: relative;
-	right: 0;
 	text-align: center;
-	top: 0;
 }
 
 .wp-color-result:hover,
@@ -56,17 +39,8 @@
 	border-left: 1px solid #999;
 }
 
-.wp-color-result {
+.wp-picker-containers {
-	top: 0;
-}
-
-.wp-color-result.wp-picker-open:after {
-	content: attr( data-current );
-}
-
-.wp-picker-container, .wp-picker-container:active {
 	display: inline-block;
-	outline: 0;
 }
 
 .wp-color-result:focus {
@@ -74,12 +48,28 @@
 	box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
 }
 
+.wp-color-result:active {
+	/* See Trac ticket #39662 */
+	transform: none !important;
+}
+
 .wp-picker-open + .wp-picker-input-wrap {
 	display: inline-block;
 	vertical-align: top;
 }
 
-.wp-picker-container .button {
+.wp-picker-input-wrap label {
+	display: inline-block;
+	vertical-align: top;
+}
+
+/* For the old `custom-background` page, to override the inline-block and margins from `.form-table td fieldset label`. */
+.form-table .wp-picker-input-wrap label {
+	margin: 0 !important;
+}
+
+.wp-picker-input-wrap .button,
+.wp-customizer .wp-picker-input-wrap .button {
  	margin-left: 6px;
 }
 
@@ -99,6 +89,7 @@
 	font-family: monospace;
 	line-height: 16px;
 	margin: 0;
+	vertical-align: top;
 }
 
 .wp-color-picker::-webkit-input-placeholder {
@@ -127,9 +118,55 @@
 		0 0 2px 1px rgba(30, 140, 190, .8);
 }
 
+.iris-picker .iris-palette:focus {
+	box-shadow:
+		inset 0 0 5px rgba(0,0,0,.4),
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
 @media screen and ( max-width: 782px ) {
 	.wp-picker-container input[type="text"].wp-color-picker {
-		margin-right: 6px;
+		width: 80px;
-		padding: 3px 5px;
+		padding: 6px 5px 5px;
+		font-size: 16px;
+		line-height: 18px;
+	}
+
+	.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
+		padding: 5px 5px 4px;
+	}
+
+	.wp-picker-container .wp-color-result.button {
+		height: auto;
+		padding: 0 0 0 40px;
+		font-size: 14px;
+		line-height: 29px;
+	}
+
+	.wp-customizer .wp-picker-container .wp-color-result.button {
+		font-size: 13px;
+		line-height: 26px;
+	}
+
+	.wp-picker-container .wp-color-result-text {
+		padding: 0 14px;
+		font-size: inherit;
+		line-height: inherit;
+	}
+
+	.wp-customizer .wp-picker-container .wp-color-result-text {
+		padding: 0 10px;
+	}
+}
+
+@media screen and ( max-width: 640px ) {
+	.wp-customizer .wp-picker-container .wp-color-result.button {
+		font-size: 14px;
+		line-height: 29px;
+	}
+
+	.wp-customizer .wp-picker-container input[type="text"].wp-color-picker {
+		padding: 6px 5px;
 	}
 }

src/wp-admin/css/common.css

@@ -3578,17 +3578,6 @@ img {
 		white-space: nowrap;
 	}
 
-	.wp-color-result {
-		height: auto;
-		padding-left: 45px;
-	}
-
-	.wp-color-result:after {
-		font-size: 14px;
-		height: auto;
-		padding: 6px 14px;
-	}
-
 	/* Feedback Messages */
 	.notice,
 	.wrap div.updated,

src/wp-admin/css/customize-controls.css

@@ -858,15 +858,6 @@ p.customize-section-description {
 	max-width: 112px;
 }
 
-/* Color Picker */
-.customize-control-color .color-picker-hex {
-	display: none;
-}
-
-.customize-control-color.open .color-picker-hex {
-	display: block;
-}
-
 .customize-control-color .dropdown {
 	margin-right: 5px;
 	margin-bottom: 5px;

src/wp-admin/js/color-picker.js

@@ -1,11 +1,13 @@
 /* global wpColorPickerL10n */
-( function( $, undef ){
+( function( $, undef ) {
 
 	var ColorPicker,
-		_before = '<a tabindex="0" class="wp-color-result" />',
+		_before = '<button type="button" class="button wp-color-result" aria-expanded="false"><span class="wp-color-result-text"></span></button>',
 		_after = '<div class="wp-picker-holder" />',
 		_wrap = '<div class="wp-picker-container" />',
-		_button = '<input type="button" class="button button-small hidden" />';
+		_button = '<input type="button" class="button button-small" />',
+		_wrappingLabel = '<label></label>',
+		_wrappingLabelText = '<span class="screen-reader-text"></span>';
 
 	/**
 	 * @summary Creates a jQuery UI color picker.
@@ -101,20 +103,67 @@
 
 			self.initialValue = el.val();
 
-			// Set up HTML structure and hide the color picker.
+			// Add a CSS class to the input field.
-			el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
+			el.addClass( 'wp-color-picker' );
-			self.wrap = el.parent();
-			self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor: self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
-			self.pickerContainer = $( _after ).insertAfter( el );
-			self.button = $( _button );
 
-			if ( self.options.defaultColor ) {
+			/*
-				self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
+			 * Check if there's already a wrapping label, e.g. in the Customizer.
-			} else {
+			 * If there's no label, add a default one to match the Customizer template.
-				self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
+			 */
+			if ( ! el.parent( 'label' ).length ) {
+				// Wrap the input field in the default label.
+				el.wrap( _wrappingLabel );
+				// Insert the default label text.
+				self.wrappingLabelText = $( _wrappingLabelText )
+					.insertBefore( el )
+					.text( wpColorPickerL10n.defaultLabel );
 			}
 
-			el.wrap( '<span class="wp-picker-input-wrap" />' ).after( self.button );
+			/*
+			 * At this point, either it's the standalone version or the Customizer
+			 * one, we have a wrapping label to use as hook in the DOM, let's store it.
+			 */
+			self.wrappingLabel = el.parent();
+
+			// Wrap the label in the main wrapper.
+			self.wrappingLabel.wrap( _wrap );
+			// Store a reference to the main wrapper.
+			self.wrap = self.wrappingLabel.parent();
+			// Set up the toggle button and insert it before the wrapping label.
+			self.toggler = $( _before )
+				.insertBefore( self.wrappingLabel )
+				.css( { backgroundColor: self.initialValue } );
+			// Set the toggle button span element text.
+			self.toggler.find( '.wp-color-result-text' ).text( wpColorPickerL10n.pick );
+			// Set up the Iris container and insert it after the wrapping label.
+			self.pickerContainer = $( _after ).insertAfter( self.wrappingLabel );
+			// Store a reference to the Clear/Default button.
+			self.button = $( _button );
+
+			// Set up the Clear/Default button.
+			if ( self.options.defaultColor ) {
+				self.button
+					.addClass( 'wp-picker-default' )
+					.val( wpColorPickerL10n.defaultString )
+					.attr( 'aria-label', wpColorPickerL10n.defaultAriaLabel );
+			} else {
+				self.button
+					.addClass( 'wp-picker-clear' )
+					.val( wpColorPickerL10n.clear )
+					.attr( 'aria-label', wpColorPickerL10n.clearAriaLabel );
+			}
+
+			// Wrap the wrapping label in its wrapper and append the Clear/Default button.
+			self.wrappingLabel
+				.wrap( '<span class="wp-picker-input-wrap hidden" />' )
+				.after( self.button );
+
+			/*
+			 * The input wrapper now contains the label+input+Clear/Default button.
+			 * Store a reference to the input wrapper: we'll use this to toggle
+			 * the controls visibility.
+			 */
+			self.inputWrapper = el.closest( '.wp-picker-input-wrap' );
 
 			el.iris( {
 				target: self.pickerContainer,
@@ -215,25 +264,6 @@
 				}
 			});
 
-			/**
-			 * @summary Enables the user to open the color picker with their keyboard.
-			 *
-			 * Enables the user to open the color picker with their keyboard.
-			 * This is possible by using the space or enter key.
-			 *
-			 * @since 3.5.0
-			 *
-			 * @param {Event} event The event that's being called.
-			 *
-			 * @returns {void}
-			 */
-			self.toggler.on( 'keyup', function( event ) {
-				if ( event.keyCode === 13 || event.keyCode === 32 ) {
-					event.preventDefault();
-					self.toggler.trigger( 'click' ).next().focus();
-				}
-			});
-
 			/**
 			 * @summary Enables the user to clear or revert the color in the color picker.
 			 *
@@ -266,10 +296,12 @@
 		 * @returns {void}
 		 */
 		open: function() {
-			this.element.show().iris( 'toggle' ).focus();
+			this.element.iris( 'toggle' );
-			this.button.removeClass( 'hidden' );
+			this.inputWrapper.removeClass( 'hidden' );
 			this.wrap.addClass( 'wp-picker-active' );
-			this.toggler.addClass( 'wp-picker-open' );
+			this.toggler
+				.addClass( 'wp-picker-open' )
+				.attr( 'aria-expanded', 'true' );
 			$( 'body' ).trigger( 'click.wpcolorpicker' ).on( 'click.wpcolorpicker', this.close );
 		},
 		/**
@@ -280,10 +312,12 @@
 		 * @returns {void}
 		 */
 		close: function() {
-			this.element.hide().iris( 'toggle' );
+			this.element.iris( 'toggle' );
-			this.button.addClass( 'hidden' );
+			this.inputWrapper.addClass( 'hidden' );
 			this.wrap.removeClass( 'wp-picker-active' );
-			this.toggler.removeClass( 'wp-picker-open' );
+			this.toggler
+				.removeClass( 'wp-picker-open' )
+				.attr( 'aria-expanded', 'false' );
 			$( 'body' ).off( 'click.wpcolorpicker', this.close );
 		},
 		/**

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

@@ -99,7 +99,6 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
 			}
 			defaultValueAttr = ' data-default-color=' + defaultValue; // Quotes added automatically.
 		} #>
-		<label>
 		<# if ( data.label ) { #>
 			<span class="customize-control-title">{{{ data.label }}}</span>
 		<# } #>
@@ -107,13 +106,14 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
 			<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 }} />
  			<# } #>
-			</div>
 			</label>
+		</div>
 		<?php
 	}
 }

src/wp-includes/script-loader.php

@@ -797,9 +797,11 @@ function wp_default_scripts( &$scripts ) {
 		$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' ),
+			'clearAriaLabel'   => __( 'Clear color' ),
 			'defaultString'    => __( 'Default' ),
+			'defaultAriaLabel' => __( 'Select default color' ),
 			'pick'             => __( 'Select Color' ),
-			'current' => __( 'Current Color' ),
+			'defaultLabel'     => __( 'Color value' ),
 		) );
 
 		$scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox', 'wp-util', 'wp-a11y' ), false, 1 );