fix(material/select): add selected indication in high contrast mode (#…

…25237)

Currently we don't indicate which `mat-option` is selected in single-selection mode to high contrast users. These changes add a small indicator similar to the one in `mat-selection-list`.

(cherry picked from commit 5c8c7e8)

src/material-experimental/mdc-core/option/option.scss

@@ -1,5 +1,6 @@
 @use '@angular/cdk';
 @use '@angular/material' as mat;
+@use '@angular/cdk';
 @use '@material/list/evolution-mixins' as mdc-list-mixins;
 @use '@material/list/evolution-variables' as mdc-list-variables;
 @use 'sass:map';
@@ -26,15 +27,6 @@
   $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
   min-height: map.get($height-config, default);
 
-  // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
-  // element that will stretch the option to the correct height. See:
-  // https://connect.microsoft.com/IE/feedback/details/802625
-  &::after {
-    display: inline-block;
-    min-height: inherit;
-    content: '';
-  }
-
   &.mdc-list-item--disabled {
     // This is the same as `mdc-list-mixins.list-disabled-opacity` which
     // we can't use directly, because it comes with some selectors.
@@ -89,6 +81,29 @@
     text-decoration: inherit;
     text-transform: inherit;
   }
+
+  @include cdk.high-contrast(active, off) {
+    // In single selection mode, the selected option is indicated by changing its
+    // background color, but that doesn't work in high contrast mode. We add an
+    // alternate indication by rendering out a circle.
+    &.mdc-list-item--selected:not(.mat-mdc-option-multiple)::after {
+      $size: 10px;
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: mdc-list-variables.$side-padding;
+      transform: translateY(-50%);
+      width: $size;
+      height: 0;
+      border-bottom: solid $size;
+      border-radius: $size;
+    }
+
+    [dir='rtl'] &.mdc-list-item--selected:not(.mat-mdc-option-multiple)::after {
+      right: auto;
+      left: mdc-list-variables.$side-padding;
+    }
+  }
 }
 
 .mat-mdc-option-active {

src/material/core/option/option.scss

@@ -53,6 +53,27 @@
     &[aria-disabled='true'] {
       opacity: 0.5;
     }
+
+    // In single selection mode, the selected option is indicated by changing its
+    // background color, but that doesn't work in high contrast mode. We add an
+    // alternate indication by rendering out a circle.
+    &.mat-selected:not(.mat-option-multiple)::after {
+      $size: 10px;
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: menu-common.$side-padding;
+      transform: translateY(-50%);
+      width: $size;
+      height: 0;
+      border-bottom: solid $size;
+      border-radius: $size;
+    }
+
+    [dir='rtl'] &.mat-selected:not(.mat-option-multiple)::after {
+      right: auto;
+      left: menu-common.$side-padding;
+    }
   }
 }