SITES-10934: Color alone is used to convey information.

coral-component-colorinput/src/scripts/ColorInput.js

@@ -814,6 +814,8 @@ const ColorInput = Decorator(class extends BaseFormField(BaseComponent(HTMLEleme
     this._elements.colorPreview.style.backgroundColor = currentColor ? currentColor.rgbaValue : '';
     this.classList.toggle('_coral-ColorInput--novalue', isValueEmpty);
 
+    this._elements.colorPreviewLabel.textContent = currentColor ? this._color.value : '';
+
     // Update preview in overlay
     const preview = this._elements.overlay.querySelector('._coral-ColorInput-preview');
     if (preview) {

coral-component-colorinput/src/scripts/ColorInputSwatch.js

@@ -15,6 +15,7 @@ import BaseColorInputAbstractSubview from './BaseColorInputAbstractSubview';
 import Color from './Color';
 import '../../../coral-component-button';
 import colorButton from '../templates/colorButton';
+import colorLabel from '../templates/colorLabel';
 import {commons, i18n, transform} from '../../../coral-utils';
 import {Decorator} from '../../../coral-decorator';
 
@@ -39,6 +40,7 @@ const ColorInputSwatch = Decorator(class extends BaseColorInputAbstractSubview(B
     // Templates
     this._elements = {};
     colorButton.call(this._elements);
+    colorLabel.call(this._elements);
   }
 
   /**
@@ -107,10 +109,12 @@ const ColorInputSwatch = Decorator(class extends BaseColorInputAbstractSubview(B
     if (cssColorValue) {
       this._elements.colorButton.style.backgroundColor = cssColorValue;
       this._elements.colorButton.label.textContent = hexColorValue;
+      this._elements.colorLabel.textContent = hexColorValue;
       this.setAttribute('data-value', hexColorValue);
     } else {
       this._elements.colorButton.classList.add('_coral-ColorInput-swatch-novalue');
       this._elements.colorButton.label.textContent = i18n.get('unset');
+      this._elements.colorLabel.textContent = i18n.get('unset');;
       this.setAttribute('data-value', '');
     }
   }
@@ -192,7 +196,13 @@ const ColorInputSwatch = Decorator(class extends BaseColorInputAbstractSubview(B
       button.remove();
     }
 
+    const label = this.querySelector('[handle="colorLabel"]');
+    if (label) {
+      label.remove();
+    }
+
     this.appendChild(this._elements.colorButton);
+    this.appendChild(this._elements.colorLabel);
   }
 });
 

coral-component-colorinput/src/styles/index.styl

@@ -50,6 +50,9 @@ $colorinput-button-size = 28px;
 
 $colorinput-input-swatch-size = 38px;
 
+$colorinput-swatch-preview-width = 44px;
+$colorinput-swatch-preview-height = 57px;
+
 $colorinput-slider-width = 160px;
 $colorinput-slider-margin = 5px 16px 0 16px;
 
@@ -141,6 +144,7 @@ coral-colorinput-item {
 ._coral-ColorInput-swatch {
   display: block;
   float: left;
+  text-align: center;
   padding: $colorinput-swatch-top-padding $colorinput-swatch-left-right-padding 0;
 
   /* All buttons inside the colorinput are square */
@@ -185,12 +189,17 @@ coral-colorinput-item {
       }
     }
   }
+
+  label {
+    display block;
+  }
 }
 
 ._coral-ColorInput-buttonWrapper {
   position: absolute;
   right: $colorinput-button-wrapper-offset;
   top: $colorinput-button-wrapper-offset;
+  text-align: center;
 
   // set opacity < 1 to create new stacking context (for checker image to work)
   opacity: .999;
@@ -233,11 +242,11 @@ coral-colorinput-item {
 
 // Swatch variant
 ._coral-ColorInput--swatch {
-  width: $colorinput-input-swatch-size;
-  height: $colorinput-input-swatch-size;
+  width: $colorinput-swatch-preview-width;
+  height: $colorinput-swatch-preview-height;
 
   // makes sure the width stays no matter the parent's configuration
-  max-width: $colorinput-input-swatch-size;
+  max-width: $colorinput-swatch-preview-width;
 
   ._coral-ColorInput-input {
     position: absolute;

coral-component-colorinput/src/templates/base.html

@@ -21,14 +21,15 @@
 <input handle="input" is="coral-textfield" class="_coral-ColorInput-input" type="text" value="" role="combobox" aria-autocomplete="none" aria-haspopup="dialog" aria-expanded="false" aria-controls="{{uid}}" />
 <div class="_coral-ColorInput-buttonWrapper" handle="buttonWrapper" role="presentation">
   <button handle="colorPreview" is="coral-button" variant="_custom" class="_coral-FieldButton _coral-ColorInput-button _coral-ColorInput-preview" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="{{uid}}"></button>
+  <label handle="colorPreviewLabel" type="label"></label>
   <js>
     // Since we don't have a mutation observer anymore to replace content zones magically, we have to do it manually.
     this.colorPreview.label.classList.add('u-coral-screenReaderOnly');
     this.colorPreview.label.innerText = data.i18n.get('Color Picker');
     this.colorPreview.label.id = uid + '-coral-button-label';
   </js>
 </div>
-<coral-popover smart class="_coral-ColorInput-overlay" role="dialog" focusonshow="on" trapfocus="on" handle="overlay" breadthoffset="50%r - 50%p" placement="bottom" id="{{uid}}" aria-label="{{data.i18n.get('Color Picker')}}">
+<coral-popover smart class="_coral-ColorInput-overlay" role="dialog" focusonshow="on" trapfocus="on" handle="overlay" breadthoffset="50%r - 50%p" lengthoffset="20" placement="bottom" id="{{uid}}" aria-label="{{data.i18n.get('Color Picker')}}">
   <coral-colorinput-colorproperties handle="propertiesView"></coral-colorinput-colorproperties>
   <coral-colorinput-swatches handle="swatchesView"></coral-colorinput-swatches>
 </coral-popover>

coral-component-colorinput/src/templates/colorLabel.html

@@ -0,0 +1 @@
+<label handle="colorLabel" type="label"></label>