fix(material/datepicker): range picker placeholders not hidden in high contrast mode

Fixes that the placeholders were showing up behind the label in high contrast mode.

Author: crisbeto

src/material/datepicker/date-range-input.scss

@@ -1,5 +1,6 @@
 @use '../core/style/variables';
 @use '../core/style/vendor-prefixes';
+@use '../../cdk/a11y';
 
 $date-range-input-separator-spacing: 4px;
 $date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spacing});
@@ -80,6 +81,12 @@ $date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spaci
       color: transparent !important;
       -webkit-text-fill-color: transparent;
       transition: none;
+
+      @include a11y.high-contrast(active, off) {
+        // In high contrast mode the browser will render the
+        // placeholder despite the `color: transparent` above.
+        opacity: 0;
+      }
     }
   }
 }