fix(material/list): visually indicate active links in HCM (#25679)

For anchor tags inside of a list, draw a circle in HCM mode to indicate
the active link item. This fixes an a11y issue where active list-items
had no visual indication of being active in HCM.

Author: zarend

src/dev-app/list/list-demo.ts

@@ -53,10 +53,10 @@ export class ListDemo {
   ];
 
   links: {name: string; href: string}[] = [
-    {name: 'Inbox', href: '/mdc-list#inbox'},
-    {name: 'Outbox', href: '/mdc-list#outbox'},
-    {name: 'Spam', href: '/mdc-list#spam'},
-    {name: 'Trash', href: '/mdc-list#trash'},
+    {name: 'Inbox', href: '/list#inbox'},
+    {name: 'Outbox', href: '/list#outbox'},
+    {name: 'Spam', href: '/list#spam'},
+    {name: 'Trash', href: '/list#trash'},
   ];
 
   thirdLine = false;

src/material/list/BUILD.bazel

@@ -36,10 +36,19 @@ ng_module(
     ],
 )
 
+sass_library(
+    name = "hcm_indicator_scss_lib",
+    srcs = ["_list-item-hcm-indicator.scss"],
+    deps = [
+        "//:mdc_sass_lib",
+    ],
+)
+
 sass_library(
     name = "list_scss_lib",
     srcs = glob(["**/_*.scss"]),
     deps = [
+        ":hcm_indicator_scss_lib",
         "//:mdc_sass_lib",
         "//src/material/checkbox:checkbox_scss_lib",
         "//src/material/core:core_scss_lib",
@@ -50,6 +59,7 @@ sass_binary(
     name = "list_scss",
     src = "list.scss",
     deps = [
+        ":hcm_indicator_scss_lib",
         "//:mdc_sass_lib",
         "//src/material/core:core_scss_lib",
     ],

src/material/list/_list-item-hcm-indicator.scss

@@ -0,0 +1,30 @@
+@use '@angular/cdk';
+@use '@material/list/evolution-variables' as mdc-list-variables;
+
+// Renders a circle indicator when Windows Hich Constrast mode (HCM) is enabled. In some
+// situations, such as a selected option, the list item communicates the selected state by changing
+// its background color. Since that doesn't work in HCM, this mixin provides an alternative by
+// rendering a circle.
+@mixin private-high-contrast-list-item-indicator() {
+    @include cdk.high-contrast(active, off) {
+        &::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'] {
+            &::after {
+                right: auto;
+                left: mdc-list-variables.$side-padding;
+            }
+        }
+    }
+}

src/material/list/list-option.scss

@@ -1,12 +1,11 @@
 @use 'sass:map';
-@use '@angular/cdk';
 @use '@material/checkbox/checkbox' as mdc-checkbox;
-@use '@material/list/evolution-variables' as mdc-list-variables;
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../checkbox/checkbox-private';
 @use './list-option-trailing-avatar-compat';
+@use './list-item-hcm-indicator';
 
 // For compatibility with the non-MDC list, we support avatars that are shown at the end
 // of the list option. We create a class similar to MDC's `--trailing-icon` one.
@@ -53,25 +52,8 @@
   }
 }
 
-@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.
-  .mat-mdc-list-option.mdc-list-item--selected::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'] .mat-mdc-list-option.mdc-list-item--selected::after {
-    right: auto;
-    left: mdc-list-variables.$side-padding;
-  }
+.mat-mdc-list-option.mdc-list-item--selected {
+  // Improve accessibility for Window High Contrast Mode (HCM) by adding an idicator on the selected
+  // option.
+  @include list-item-hcm-indicator.private-high-contrast-list-item-indicator();
 }

src/material/list/list.scss

@@ -1,11 +1,18 @@
 @use '@material/list/evolution-mixins' as mdc-list;
 @use '../core/style/layout-common';
 @use '../core/mdc-helpers/mdc-helpers';
+@use './list-item-hcm-indicator';
 
 @include mdc-helpers.disable-mdc-fallback-declarations {
   @include mdc-list.without-ripple($query: mdc-helpers.$mdc-base-styles-query);
 }
 
+a.mdc-list-item--activated {
+  // Improve accessibility for Window High Contrast Mode (HCM) by adding an idicator on active
+  // links.
+  @include list-item-hcm-indicator.private-high-contrast-list-item-indicator();
+}
+
 // MDC expects the list element to be a `<ul>`, since we use `<mat-list>` instead we need to
 // explicitly set `display: block`
 .mat-mdc-list-base {