fix(cdk/overlay): not setting correct opacity in high contrast mode o…

…n Firefox (#21896)

The backdrop styles were never switches to the `cdk-high-contrast` mixin which means that
they won't work on Firefox. These changes switch to using the mixin and update the docs.

Fixes #21890.

CODING_STANDARDS.md

@@ -208,7 +208,7 @@ specific error being caught and why it cannot be prevented.
 * Except for `@Input` properties, use `is` and `has` prefixes for boolean properties / methods.
 
 ##### Observables
-* Don't suffix observables with `$`. 
+* Don't suffix observables with `$`.
 
 ##### Classes
 Classes should be named based on what they're responsible for. Names should capture what the code
@@ -333,7 +333,7 @@ The latter is equivalent for the component, but makes it easier override when ne
 #### Support styles for Windows high-contrast mode
 This is a low-effort task that makes a big difference for low-vision users. Example:
 ```css
-@media screen and (-ms-high-contrast: active) {
+@include cdk-high-contrast(active, off) {
   .unicorn-motocycle {
     border: 1px solid #fff !important;
   }

src/cdk/overlay/BUILD.bazel

@@ -41,7 +41,10 @@ sass_library(
 sass_binary(
     name = "overlay_prebuilt_scss",
     src = "overlay-prebuilt.scss",
-    deps = [":overlay_scss_lib"],
+    deps = [
+        ":overlay_scss_lib",
+        "//src/cdk/a11y:a11y_scss_lib",
+    ],
 )
 
 ng_test_library(

src/cdk/overlay/_overlay.scss

@@ -1,3 +1,5 @@
+@import '../a11y/a11y';
+
 // We want overlays to always appear over user content, so set a baseline
 // very high z-index for the overlay container, which is where we create the new
 // stacking context for all overlays.
@@ -84,7 +86,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
       // to making it opaque using `opacity`. Note that we can't use the `cdk-high-contrast`
       // mixin, because we can't normalize the import path to the _a11y.scss both for the
       // source and when this file is distributed. See #10908.
-      @media screen and (-ms-high-contrast: active) {
+      @include cdk-high-contrast(active, off) {
         opacity: 0.6;
       }
     }