feat(material-experimental/mdc-list): add support for strong focus indicators

Adds support for strong focus indicators to the MDC-based list.
Also simplifies SCSS code for the hover/focus/selected styles.

Author: devversion

src/material-experimental/mdc-helpers/_focus-indicators.scss

@@ -73,8 +73,10 @@
   .mat-mdc-slide-toggle-focused .mat-mdc-focus-indicator::before,
   .mat-mdc-radio-button.cdk-focused .mat-mdc-focus-indicator::before,
 
-  // For buttons, render the focus indicator when the parent button is focused.
+  // For buttons and list items, render the focus indicator when the parent
+  // button or list item is focused.
   .mat-mdc-button-base:focus .mat-mdc-focus-indicator::before,
+  .mat-mdc-list-item:focus > .mat-mdc-focus-indicator::before,
 
   // For options, render the focus indicator when the class .mat-mdc-option-active is present.
   .mat-mdc-focus-indicator.mat-mdc-option-active::before,

src/material-experimental/mdc-list/list-base.ts

@@ -80,11 +80,6 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
       this._initInteractiveListItem();
     }
 
-    // Only interactive list items are commonly focusable, but in some situations,
-    // consumers provide a custom tabindex. We still would want to have strong focus
-    // indicator support in such scenarios.
-    this._hostElement.classList.add('mat-mdc-focus-indicator');
-
     // If no type attribute is specified for a host `<button>` element, set it to `button`. If a
     // type attribute is already specified, we do nothing. We do this for backwards compatibility.
     // TODO: Determine if we intend to continue doing this for the MDC-based list.

src/material-experimental/mdc-list/list-item.html

@@ -15,3 +15,9 @@
 </span>
 
 <ng-content select="mat-divider"></ng-content>
+
+<!--
+  Strong focus indicator element. MDC uses the `::before` pseudo element for the default
+  focus/hover/selected state, so we need a separate element.
+-->
+<div class="mat-mdc-focus-indicator"></div>

src/material-experimental/mdc-list/list-option.html

@@ -50,3 +50,9 @@
 
 <!-- Divider -->
 <ng-content select="mat-divider"></ng-content>
+
+<!--
+  Strong focus indicator element. MDC uses the `::before` pseudo element for the default
+  focus/hover/selected state, so we need a separate element.
+-->
+<div class="mat-mdc-focus-indicator"></div>

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

@@ -97,14 +97,18 @@
   }
 }
 
-// MDC's state styles are included with their ripple which we don't use. Instead we add
-// the focus and hover styles ourselves using this pseudo-element
+// MDC's hover and focus state styles are included with their ripple which we don't use.
+// Instead we add the focus, hover and selected styles ourselves using this pseudo-element
 .mat-mdc-list-item-interactive::before {
+  @include mat-fill();
   content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
   opacity: 0;
 }
+
+// The MDC-based list items already use the `::before` pseudo element for the standard
+// focus/selected/hover state. Hence, we need to have a separate list-item spanning
+// element that can be used for strong focus indicators.
+.mat-mdc-list-item > .mat-mdc-focus-indicator {
+  @include mat-fill();
+  pointer-events: none;
+}