From b6d18747fc0311a36665bbdc3c42536aaa172761 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Mon, 22 Feb 2016 23:28:43 +0000
Subject: [PATCH] Accessibility: Improve the color contrast ratio for the input
 placeholders.

Also, cleans up a bit the CSS removing rules for elements that don't use
placeholders any more.

Fixes #35777.

git-svn-id: https://develop.svn.wordpress.org/trunk@36619 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/color-picker.css   | 14 +++++++++-----
 src/wp-admin/css/colors/_admin.scss |  6 ------
 src/wp-admin/css/forms.css          | 14 +++++++++++---
 src/wp-admin/css/press-this.css     | 15 ++++++++++++++-
 src/wp-includes/css/admin-bar.css   | 13 -------------
 src/wp-includes/css/media-views.css | 13 +++++++++++--
 6 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/src/wp-admin/css/color-picker.css b/src/wp-admin/css/color-picker.css
index c8ddea7b6e..0ce28adfd8 100644
--- a/src/wp-admin/css/color-picker.css
+++ b/src/wp-admin/css/color-picker.css
@@ -102,17 +102,21 @@
 	width: 65px;
 	font-size: 12px;
 	font-family: monospace;
-	text-align: center;
 	line-height: 16px;
 	margin: 0;
 }
 
-.wp-picker-container input[type="text"].wp-color-picker:focus::-webkit-input-placeholder {
-	color: transparent;
+.wp-color-picker::-webkit-input-placeholder {
+	color: #72777c;
 }
 
-.wp-picker-container input[type="text"].wp-color-picker:-moz-placeholder {
-	color: #999;
+.wp-color-picker::-moz-placeholder {
+	color: #72777c;
+	opacity: 1;
+}
+
+.wp-color-picker:-ms-input-placeholder {
+	color: #72777c;
 }
 
 .wp-picker-container input[type="text"].iris-error {
diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 03c932d604..f03c211d33 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -357,12 +357,6 @@ ul#adminmenu > li.current > a.current:after {
 	background: $adminbar-input-background;
 }
 
-#wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder { color: $menu-text; opacity: 0.7; }
-#wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder { color: $menu-text; opacity: 0.7; }
-#wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder { color: $menu-text; opacity: 0.7; }
-#wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder { color: $menu-text; opacity: 0.7; }
-
-
 /* Admin Bar: my account */
 
 #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index c27d4743c4..73aa0057d3 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -234,9 +234,17 @@ textarea[readonly] {
 	background-color: #eee;
 }
 
-:-moz-placeholder,
-.wp-core-ui :-moz-placeholder {
-   color: #a9a9a9;
+::-webkit-input-placeholder {
+	color: #72777c;
+}
+
+::-moz-placeholder {
+   color: #72777c;
+   opacity: 1;
+}
+
+:-ms-input-placeholder {
+	color: #72777c;
 }
 
 .form-invalid input, .form-invalid input:focus,
diff --git a/src/wp-admin/css/press-this.css b/src/wp-admin/css/press-this.css
index ce1711f524..fddfb091a9 100644
--- a/src/wp-admin/css/press-this.css
+++ b/src/wp-admin/css/press-this.css
@@ -245,6 +245,19 @@ th {
 	padding: 0;
 }
 
+::-webkit-input-placeholder {
+	color: #72777c;
+}
+
+::-moz-placeholder {
+   color: #72777c;
+   opacity: 1;
+}
+
+:-ms-input-placeholder {
+	color: #72777c;
+}
+
 .clearfix:before,
 .clearfix:after {
 	content: "";
@@ -1546,7 +1559,7 @@ html {
 .post-title-placeholder {
 	position: absolute;
 	border: 0;
-	color: #9ea7af;
+	color: #82878c;
 	z-index: -1;
 }
 
diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css
index bab7104ec9..9371a94043 100644
--- a/src/wp-includes/css/admin-bar.css
+++ b/src/wp-includes/css/admin-bar.css
@@ -671,19 +671,6 @@ html:lang(he-il) .rtl #wpadminbar *  {
 	z-index: -1;
 }
 
-#wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder {
-	color: #999;
-}
-#wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder {
-	color: #999;
-}
-#wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder {
-	color: #999;
-}
-#wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder {
-	color: #999;
-}
-
 #wpadminbar #adminbarsearch .adminbar-button {
 	display: none;
 }
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 9e03aa2c44..768b0b51bb 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -114,8 +114,17 @@
 	-webkit-appearance: textfield;
 }
 
-.media-frame :-moz-placeholder {
-	color: #a9a9a9;
+.media-frame ::-webkit-input-placeholder {
+	color: #72777c;
+}
+
+.media-frame ::-moz-placeholder {
+	color: #72777c;
+	opacity: 1;
+}
+
+.media-frame :-ms-input-placeholder {
+	color: #72777c;
 }
 
 .media-frame .hidden {