Index: src/wp-admin/css/color-picker.css =================================================================== --- src/wp-admin/css/color-picker.css (revision 39927) +++ src/wp-admin/css/color-picker.css (working copy) @@ -6,43 +6,24 @@ display: none; } -.wp-color-result { - background-color: #f7f7f7; - border: 1px solid #ccc; - -webkit-border-radius: 3px; - border-radius: 3px; - cursor: pointer; - display: inline-block; - height: 22px; +/* Needs higher specificiity. */ +.wp-picker-container .wp-color-result { + 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; - -webkit-box-shadow: 0 1px 0 #ccc; - box-shadow: 0 1px 0 #ccc; + padding: 0 0 0 30px; } -.wp-color-result:after { +.wp-color-result-text { background: #f7f7f7; -webkit-border-radius: 0 2px 2px 0; 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, @@ -59,14 +40,6 @@ 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 { display: inline-block; outline: 0; @@ -83,8 +56,8 @@ vertical-align: top; } -.wp-picker-container .button { - margin-left: 6px; +.wp-picker-container .wp-picker-clear { + margin-left: 2px; } .wp-picker-container .iris-square-slider .ui-slider-handle:focus { @@ -133,4 +106,4 @@ box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8); -} \ No newline at end of file +} Index: src/wp-admin/css/customize-controls.css =================================================================== --- src/wp-admin/css/customize-controls.css (revision 39927) +++ src/wp-admin/css/customize-controls.css (working copy) @@ -893,15 +893,6 @@ 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; Index: src/wp-admin/js/color-picker.js =================================================================== --- src/wp-admin/js/color-picker.js (revision 39927) +++ src/wp-admin/js/color-picker.js (working copy) @@ -3,10 +3,10 @@ var ColorPicker, // html stuff - _before = '', + _before = '', _after = '
', _wrap = '
', - _button = ''; + _button = ''; // jQuery UI Widget constructor ColorPicker = { @@ -66,20 +66,38 @@ self.initialValue = el.val(); - // Set up HTML structure, hide things - 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 ); + // Add CSS class to the input field. + el.addClass( 'wp-color-picker' ); + // Find the input field wrapper element and store it. + self.inputWrapper = el.closest( '.wp-picker-input-wrap' ); + // Wrap the input field wrapper in the container _wrap element. + self.inputWrapper.wrap( _wrap ); + // Store the container _wrap element. + self.wrap = el.closest( '.wp-picker-container' ); + // Set up the toggle button and insert it at the beginning of the container _wrap element. + self.toggler = $( _before ).prependTo( self.wrap ).css( { backgroundColor: self.initialValue } ) + // Set up the toggle button text. + self.toggler.find( '.wp-color-result-text' ).text( wpColorPickerL10n.pick ); + // Insert the color picker holder at the end of the container _wrap element. + self.pickerContainer = $( _after ).appendTo( self.wrap ); + // Store the Default/Clear button. self.button = $( _button ); + // Set up the Default/Clear button. if ( self.options.defaultColor ) { - self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString ); + self.button + .addClass( 'wp-picker-default' ) + .val( wpColorPickerL10n.defaultString ) + .attr( 'aria-label', wpColorPickerL10n.defaultAriaLabel ); } else { - self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear ); + self.button + .addClass( 'wp-picker-clear' ) + .val( wpColorPickerL10n.clear ) + .attr( 'aria-label', wpColorPickerL10n.clearAriaLabel );; } - el.wrap( '' ).after(self.button); + // Append the Default/Clear button to the input field wrapper element. + self.inputWrapper.append( self.button ); el.iris( { target: self.pickerContainer, @@ -131,14 +149,6 @@ } }); - // open a keyboard-focused closed picker with space or enter - self.toggler.on( 'keyup', function( event ) { - if ( event.keyCode === 13 || event.keyCode === 32 ) { - event.preventDefault(); - self.toggler.trigger( 'click' ).next().focus(); - } - }); - self.button.click( function( event ) { var me = $( this ); if ( me.hasClass( 'wp-picker-clear' ) ) { @@ -153,17 +163,21 @@ }); }, 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 ); }, 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 ); }, // $("#input").wpColorPicker('color') returns the current color Index: src/wp-includes/customize/class-wp-customize-color-control.php =================================================================== --- src/wp-includes/customize/class-wp-customize-color-control.php (revision 39927) +++ src/wp-includes/customize/class-wp-customize-color-control.php (working copy) @@ -103,21 +103,23 @@ } defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically. } #> -