Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Search][Select][Textarea][Textfield] Correct placeholder text color contrast #165

Open
majornista opened this issue Apr 9, 2021 · 1 comment
Open

[Search][Select][Textarea][Textfield] Correct placeholder text color contrast #165

majornista opened this issue Apr 9, 2021 · 1 comment
Labels
released

Comments

@majornista
Copy link
Collaborator

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.

Reproduce Scenario (including but not limited to)

Steps to Reproduce

  1. Go to https://opensource.adobe.com/coral-spectrum/examples/#textfield, https://opensource.adobe.com/coral-spectrum/examples/#textarea, https://opensource.adobe.com/coral-spectrum/examples/#select, https://opensource.adobe.com/coral-spectrum/examples/#clock.
  2. Inspect the placeholder text element in the sub-dom for any of the enabled textfield examples that use placeholder.
  3. Observe that the color specified in CSS for the placeholder element has a contrast ratio of 3:1, for the .coral-lightest theme it's rgb(149, 149, 149).

Browser name/version/os

Version 89.0.4389.114 (Official Build) (x86_64) on macOS

Coral Spectrum version

v4.10.16

Sample Code that illustrates the problem (use the Playground if possible)

Coral Spectrum Playground Example:

<!DOCTYPE html>
<html>
<head>
	<title>Placeholder text color contrast example</title>
	<link rel="stylesheet" href="https://opensource.adobe.com/coral-spectrum/playground/dist/css/coral.css"/>
	<script src="https://opensource.adobe.com/coral-spectrum/playground/dist/js/coral.js"></script>
	<style>
		body {
			margin: 1rem
		}
	</style>
</head>
<body class="coral--lightest">
	<p>
		<label for="lifestory" class="coral-FieldLabel">Life Story</label>
		<input id="lifestory" placeholder="Enter your life story" name="field" is="coral-textfield"/>
	</p>
	<p>
		<label for="lifestory2" class="coral-FieldLabel">Life Story</label>
		<textarea id="lifestory2" placeholder="Enter your life story" name="field" is="coral-textarea"></textarea>
	</p>
	<p>
		<label id="country-label" class="coral-FieldLabel">Country</label>
		<coral-select placeholder="Choose an country" labelledBy="country-label">
			<coral-select-item value="tza">Tanzania - United Republic of Tanzania, Northwest</coral-select-item>
			<coral-select-item value="are">United Arab Emirates</coral-select-item>
			<coral-select-item value="gbr">United Kingdom</coral-select-item>
			<coral-select-item value="usa">United States of America and the republic for which it stands, one nation</coral-select-item>
		</coral-select>
	</p>
</body>
</html>

Screenshots (if applicable)

Current behavior:

Current behavior using Gray-600

Desired behavior:

Current behavior using Gray-700
majornista added a commit to majornista/coral-spectrum that referenced this issue Apr 9, 2021
@majornista
fix(adobe#165): placeholder text color contrast
026e61b 
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.
@majornista majornista mentioned this issue Apr 9, 2021
Merged
6 tasks
majornista added a commit that referenced this issue Apr 19, 2021
@majornista
fix(#165): placeholder text color contrast (#166)
710d835 
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.
github-actions bot pushed a commit that referenced this issue Apr 19, 2021
@semantic-release-bot
chore(release): 4.10.18 [skip ci]
7c8a716 
## [4.10.18](v4.10.17...v4.10.18) (2021-04-19)

### Bug Fixes

* **#165:** placeholder text color contrast ([#166](#166)) ([710d835](710d835)), closes [#165](#165)
@github-actions
Copy link

🎉 This issue has been resolved in version 4.10.18 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@majornista