fix(material-experimental/mdc-slide-toggle): strong focus indication not visible (#19048)

In #18895 a `border-radius: 50%` was added to the ripple host element of the MDC-based slide toggle in order to support different densities. The problem is that the ripple element is also used to draw a rectangle in strong focus indication mode. These changes move the strong focus indication to the `.mdc-switch__thumb-underlay` and switch the base focus indication to use `::after` instead of `::before`.

Author: crisbeto

src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss

@@ -30,7 +30,7 @@
     // MDC's switch doesn't support a `color` property. We add support
     // for it by adding a CSS class for accent and warn style.
     .mat-mdc-slide-toggle {
-      .mdc-switch__thumb-underlay::before, .mat-ripple-element {
+      .mdc-switch__thumb-underlay::after, .mat-ripple-element {
         background: $mdc-switch-toggled-off-ripple-color;
       }
 
@@ -51,18 +51,18 @@
 
     // The ripple color matches the palette only when it's checked.
     .mat-mdc-slide-toggle-checked {
-      .mdc-switch__thumb-underlay::before, .mat-ripple-element {
+      .mdc-switch__thumb-underlay::after, .mat-ripple-element {
         background: $primary;
       }
 
       &.mat-accent {
-        .mdc-switch__thumb-underlay::before, .mat-ripple-element {
+        .mdc-switch__thumb-underlay::after, .mat-ripple-element {
           background: $accent;
         }
       }
 
       &.mat-warn {
-        .mdc-switch__thumb-underlay::before, .mat-ripple-element {
+        .mdc-switch__thumb-underlay::after, .mat-ripple-element {
           background: $warn;
         }
       }

src/material-experimental/mdc-slide-toggle/slide-toggle.html

@@ -2,8 +2,8 @@
      [class.mdc-form-field--align-end]="labelPosition == 'before'">
   <div class="mdc-switch" #switch>
     <div class="mdc-switch__track"></div>
-    <div class="mdc-switch__thumb-underlay">
-      <div class="mat-mdc-slide-toggle-ripple mat-mdc-focus-indicator" mat-ripple
+    <div class="mdc-switch__thumb-underlay mat-mdc-focus-indicator">
+      <div class="mat-mdc-slide-toggle-ripple" mat-ripple
         [matRippleTrigger]="switch"
         [matRippleDisabled]="disableRipple || disabled"
         [matRippleCentered]="true"

src/material-experimental/mdc-slide-toggle/slide-toggle.scss

@@ -14,7 +14,7 @@
   display: inline-block;
 
   // The ripple needs extra specificity so the base ripple styling doesn't override its `position`.
-  .mat-mdc-slide-toggle-ripple, .mdc-switch__thumb-underlay::before {
+  .mat-mdc-slide-toggle-ripple, .mdc-switch__thumb-underlay::after {
     @include mat-fill;
 
     // Disable pointer events for the ripple container so that it doesn't eat the mouse events meant
@@ -26,19 +26,21 @@
   // The MDC switch styles related to the hover state are intertwined with the MDC ripple styles.
   // We currently don't use the MDC ripple due to size concerns, therefore we need to add some
   // additional styles to restore the hover state.
-  .mdc-switch__thumb-underlay::before {
+  // We use `::after`, rather than `::before`, because `::before` is used by the
+  // generic strong focus indication styles.
+  .mdc-switch__thumb-underlay::after {
     border-radius: 50%;
     content: '';
     opacity: 0;
   }
 
-  .mdc-switch:hover .mdc-switch__thumb-underlay::before {
+  .mdc-switch:hover .mdc-switch__thumb-underlay::after {
     opacity: map-get($mdc-ripple-dark-ink-opacities, hover);
     transition: mdc-switch-transition-enter(opacity, 0, 75ms);
   }
 
   // Needs a little more specificity so the :hover styles don't override it.
-  &.mat-mdc-slide-toggle-focused .mdc-switch .mdc-switch__thumb-underlay::before {
+  &.mat-mdc-slide-toggle-focused .mdc-switch .mdc-switch__thumb-underlay::after {
     opacity: map-get($mdc-ripple-dark-ink-opacities, focus);
   }
 
@@ -57,7 +59,7 @@
   //  conditionally add them. Consider the size cost when deciding whether to switch.
   &._mat-animation-noopable {
     .mdc-switch__thumb-underlay,
-    .mdc-switch__thumb-underlay::before {
+    .mdc-switch__thumb-underlay::after {
       transition: none;
     }
   }

src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts

@@ -299,11 +299,8 @@ describe('MDC-based MatSlideToggle without forms', () => {
     });
 
     it('should have a focus indicator', () => {
-      const slideToggleRippleNativeElement =
-          slideToggleElement.querySelector('.mat-mdc-slide-toggle-ripple')!;
-
-      expect(slideToggleRippleNativeElement.classList.contains('mat-mdc-focus-indicator'))
-          .toBe(true);
+      const underlayElement = slideToggleElement.querySelector('.mdc-switch__thumb-underlay')!;
+      expect(underlayElement.classList.contains('mat-mdc-focus-indicator')).toBe(true);
     });
   });