fix(input): floating label text fails a11y contrast audit (#11497)

add special handling for Firefox placeholders
add `::placeholder` to the list of pseudos
remove duplicate `::-webkit-input-placeholder`
add `::-ms-input-placeholder` for Edge
fix demo a11y issues

Relates to #11475

Author: Splaktar

src/components/input/demoBasicUsage/index.html

@@ -26,7 +26,7 @@
 
           <md-input-container>
             <label>Enter date</label>
-            <md-datepicker ng-model="user.submissionDate"></md-datepicker>
+            <md-datepicker ng-model="user.submissionDate" aria-label="Enter date"></md-datepicker>
           </md-input-container>
         </div>
 
@@ -48,7 +48,7 @@
         </md-input-container>
 
         <md-input-container md-no-float class="md-block">
-          <input ng-model="user.address2" placeholder="Address 2">
+          <input ng-model="user.address2" placeholder="Address 2" aria-label="Address 2">
         </md-input-container>
 
         <div layout-gt-sm="row">

src/components/input/demoErrorsAdvanced/style.css

@@ -11,7 +11,7 @@
     transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
 
     /* Set our own color */
-    color: grey;
+    color: rgba(0, 0, 0, 0.54);
 }
 
 /* NOTE: Check the demo's HTML to see some additional RTL support CSS */

src/components/input/demoIcons/index.html

@@ -11,17 +11,18 @@
 
     <md-input-container md-no-float class="md-block">
       <md-icon md-svg-src="img/icons/ic_phone_24px.svg"></md-icon>
-      <input ng-model="user.phone" type="text" placeholder="Phone Number">
+      <input ng-model="user.phone" type="text" placeholder="Phone Number" aria-label="Phone Number">
     </md-input-container>
 
     <md-input-container class="md-block">
       <!-- Use floating placeholder instead of label -->
       <md-icon md-svg-src="img/icons/ic_email_24px.svg" class="email"></md-icon>
-      <input ng-model="user.email" type="email" placeholder="Email (required)" ng-required="true">
+      <input ng-model="user.email" type="email" placeholder="Email (required)" ng-required="true"
+             aria-label="Email (required)">
     </md-input-container>
 
     <md-input-container md-no-float class="md-block">
-      <input ng-model="user.address" type="text" placeholder="Address" >
+      <input ng-model="user.address" type="text" placeholder="Address" aria-label="Address">
       <md-icon md-svg-src="img/icons/ic_place_24px.svg" style="display:inline-block;"></md-icon>
     </md-input-container>
 

src/components/input/input-theme.scss

@@ -1,6 +1,6 @@
 md-input-container.md-THEME_NAME-theme {
   .md-input {
-    @include input-placeholder-color('\'{{foreground-3}}\'');
+    @include input-placeholder-color('\'{{foreground-2}}\'');
     color: '{{foreground-1}}';
     border-color: '{{foreground-4}}';
   }
@@ -11,7 +11,7 @@ md-input-container.md-THEME_NAME-theme {
 
   label,
   .md-placeholder {
-    color: '{{foreground-3}}';
+    color: '{{foreground-2}}';
   }
 
   label.md-required:after {

src/core/style/mixins.scss

@@ -15,8 +15,11 @@
 }
 
 @mixin input-placeholder-color($color) {
-  $pseudos: '::-webkit-input-placeholder', ':-moz-placeholder', '::-moz-placeholder',
-            ':-ms-input-placeholder',  '::-webkit-input-placeholder';
+  $pseudos: '::-webkit-input-placeholder', // For QQ Browser
+            ':-ms-input-placeholder', // For IE
+            '::-ms-input-placeholder', // For Edge
+            '::placeholder';
+  $firefox-pseudos: ':-moz-placeholder', '::-moz-placeholder';
 
   // It is important to export every pseudo within its own block, because otherwise the placeholder
   // won't be set on the most browsers.
@@ -25,6 +28,14 @@
       color: unquote($color);
     }
   }
+  // Firefox reduces the opacity of placeholders so we need to keep them opaque to avoid applying
+  // double the transparency and causing a11y failures due to text contrast.
+  @each $pseudo in $firefox-pseudos {
+    &#{$pseudo} {
+      color: unquote($color);
+      opacity: 1;
+    }
+  }
 }
 
 @mixin pie-clearfix {