fix(material-experimental/mdc-slider): not usable in high contrast mode (#17164)

Fixes the MDC slider track not being visible in high contrast mode and the thumb label just floating on top of the slider.

Author: crisbeto

src/material-experimental/mdc-slider/BUILD.bazel

@@ -26,6 +26,7 @@ sass_library(
     name = "mdc_slider_scss_lib",
     srcs = glob(["**/_*.scss"]),
     deps = [
+        "//src/cdk/a11y:a11y_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
     ],
 )

src/material-experimental/mdc-slider/slider.scss

@@ -1,5 +1,6 @@
 @import '@material/slider/mixins';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../cdk/a11y/a11y';
 
 $mat-slider-min-size: 128px !default;
 $mat-slider-horizontal-margin: 8px !default;
@@ -24,6 +25,21 @@ $mat-slider-horizontal-margin: 8px !default;
   // the slider to automatically expand horizontally for backwards compatibility.
   width: auto;
   min-width: $mat-slider-min-size - (2 * $mat-slider-horizontal-margin);
+
+  @include cdk-high-contrast {
+    // The slider track isn't visible in high contrast mode so we work
+    // around it by setting an outline and removing the height to make it look solid.
+    .mdc-slider__track-container {
+      height: 0;
+      outline: solid 2px;
+      margin-top: 1px;
+    }
+
+    // Adds an outline around the thumb label so it doesn't just float on top of the slider.
+    .mdc-slider__pin-value-marker {
+      outline: solid 1px;
+    }
+  }
 }
 
 // In order to make it possible for developers to disable animations for a  slider,