fix(material-experimental/mdc-radio): strong focus indicator not work…

…ing (#19091)

We recently added strong focus indication for the MDC-based radio, but
accidentally used the strong-focus indication class from
`@angular/material`.

This means that strong focus indiciation won't work if only the
focus indicator styles from `mdc-helpers` are used. This came up
in the audit of classes for the MDC migration.

(cherry picked from commit 3c99efc)

src/material-experimental/mdc-helpers/_mdc-helpers.scss

@@ -259,7 +259,7 @@ $mat-typography-level-mappings: (
   // the hidden input is focused (slightly different for each control).
   .mdc-checkbox__native-control:focus ~ .mat-mdc-focus-indicator::before,
   .mat-mdc-slide-toggle-focused .mat-mdc-focus-indicator::before,
-  .mat-mdc-radio-button.cdk-focused .mat-focus-indicator::before,
+  .mat-mdc-radio-button.cdk-focused .mat-mdc-focus-indicator::before,
 
   // For all other components, render the focus indicator on focus.
   .mat-mdc-focus-indicator:focus::before {

src/material-experimental/mdc-radio/radio.html

@@ -18,7 +18,7 @@
       <div class="mdc-radio__inner-circle"></div>
     </div>
     <div class="mdc-radio__ripple"></div>
-    <div mat-ripple class="mat-radio-ripple mat-focus-indicator"
+    <div mat-ripple class="mat-radio-ripple mat-mdc-focus-indicator"
          [matRippleTrigger]="formField"
          [matRippleDisabled]="_isRippleDisabled()"
          [matRippleCentered]="true"

src/material-experimental/mdc-radio/radio.spec.ts

@@ -399,7 +399,7 @@ describe('MDC-based MatRadio', () => {
           radioNativeElements.map(element => element.querySelector('.mat-radio-ripple')!);
 
       expect(radioRippleNativeElements
-          .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true);
+          .every(element => element.classList.contains('mat-mdc-focus-indicator'))).toBe(true);
     });
 
   });