fix(adobe#165): placeholder text color contrast

Expected Behavior

Placeholder text for Search, Select, Textarea and Textfield components should comply with WCAG 2.1 AA contrast ratio requirements with a contrast ratio between the foreground text color and the background color or at least 4.5:1.

Actual Behavior:

Currently, Coral-Spectrum uses var(--spectrum-global-color-gray-600); from Spectrum-CSS, for the ::placeholder text color in Search, Select, Textarea and Textfield components, which results in placeholder text with a contrast ratio of 3:1, which does not comply with WCAG 2.1 AA contrast ratio requirements.

Spectrum-CSS includes a fix for this in v3.0.1, (see adobe/spectrum-css@011ca54), updating Coral-Spectrum to use this version of Spectrum-CSS is not trivial.

A simpler suggested fix would be to change the value in Coral-Spectrum to use var(--spectrum-global-color-gray-700); to satisfy the requirement.

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

@@ -79,3 +79,19 @@ coral-select-item {
     opacity: 0.01;
   }
 }
+
+.coral--dark ._coral-Dropdown-label.is-placeholder {
+  color: var(--spectrum-dark-global-color-gray-700);
+}
+
+.coral--darkest ._coral-Dropdown-label.is-placeholder {
+  color: var(--spectrum-darkest-global-color-gray-700);
+}
+
+.coral--light ._coral-Dropdown-label.is-placeholder {
+  color: var(--spectrum-light-global-color-gray-700);
+}
+
+.coral--lightest ._coral-Dropdown-label.is-placeholder {
+  color: var(--spectrum-lightest-global-color-gray-700);
+}

coral-component-textfield/examples/index.html

@@ -67,6 +67,11 @@ <h2 class="coral--Heading--S">Default</h2>
         <input type="text" is="coral-textfield" aria-label="text input">
       </div>
 
+      <h2 class="coral--Heading--S">Placeholder</h2>
+      <div class="markup">
+        <input type="text" is="coral-textfield" placeholder="Placeholder" aria-label="text input">
+      </div>
+
       <h2 class="coral--Heading--S">Disabled</h2>
       <div class="markup">
         <input type="text" is="coral-textfield" disabled aria-label="text input">

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

@@ -23,3 +23,21 @@
 @require '@adobe/spectrum-css/dist/components/inputgroup/multiStops/lightest.css';
 @require '@adobe/spectrum-css/dist/components/inputgroup/multiStops/dark.css';
 @require '@adobe/spectrum-css/dist/components/inputgroup/multiStops/darkest.css';
+
+@require '../../../coral-theme-spectrum/src/styles/vars.css';
+
+.coral--dark ._coral-Textfield::placeholder {
+  color: var(--spectrum-dark-global-color-gray-700);
+}
+
+.coral--darkest ._coral-Textfield::placeholder {
+  color: var(--spectrum-darkest-global-color-gray-700);
+}
+
+.coral--light ._coral-Textfield::placeholder {
+  color: var(--spectrum-light-global-color-gray-700);
+}
+
+.coral--lightest ._coral-Textfield::placeholder {
+  color: var(--spectrum-lightest-global-color-gray-700);
+}