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
This commit is contained in:
Andrea Fercia
parent
55938f0664
commit
207d79af50
@ -6,40 +6,23 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wp-color-result {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
/* Needs higher specificiity. */
|
||||
.wp-picker-container .wp-color-result.button {
|
||||
height: 24px;
|
||||
margin: 0 6px 6px 0px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
-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;
|
||||
padding: 0 0 0 30px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.wp-color-result.wp-picker-open:after {
|
||||
content: attr( data-current );
|
||||
}
|
||||
|
||||
.wp-picker-container, .wp-picker-container:active {
|
||||
.wp-picker-containers {
|
||||
display: inline-block;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.wp-color-result:focus {
|
||||
@ -74,13 +48,29 @@
|
||||
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 {
|
||||
margin-left: 6px;
|
||||
.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;
|
||||
}
|
||||
|
||||
.wp-picker-container .iris-square-slider .ui-slider-handle:focus {
|
||||
@ -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;
|
||||
padding: 3px 5px;
|
||||
width: 80px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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.
|
||||
el.addClass( 'wp-color-picker' ).hide().wrap( _wrap );
|
||||
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 );
|
||||
// Add a CSS class to the input field.
|
||||
el.addClass( 'wp-color-picker' );
|
||||
|
||||
if ( self.options.defaultColor ) {
|
||||
self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
|
||||
} else {
|
||||
self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
|
||||
/*
|
||||
* Check if there's already a wrapping label, e.g. in the Customizer.
|
||||
* If there's no label, add a default one to match the Customizer template.
|
||||
*/
|
||||
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.button.removeClass( 'hidden' );
|
||||
this.element.iris( 'toggle' );
|
||||
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.button.addClass( 'hidden' );
|
||||
this.element.iris( 'toggle' );
|
||||
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 );
|
||||
},
|
||||
/**
|
||||
|
||||
@ -99,21 +99,21 @@ 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>
|
||||
<# } #>
|
||||
<# 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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 );
|
||||
|
||||
Loading…
Reference in New Issue
Block a user