fix(material/radio): input not focused when clicking on touch target (#26618)

Fixes that the radio button's internal `input` wasn't receiving focus when the touch target is clicked.

Fixes #26487.

Author: crisbeto

src/material/radio/radio.html

@@ -2,7 +2,7 @@
      [class.mdc-form-field--align-end]="labelPosition == 'before'">
   <div class="mdc-radio" [class.mdc-radio--disabled]="disabled">
     <!-- Render this element first so the input is on top. -->
-    <div class="mat-mdc-radio-touch-target" (click)="_onInputInteraction($event)"></div>
+    <div class="mat-mdc-radio-touch-target" (click)="_onTouchTargetClick($event)"></div>
     <input #input class="mdc-radio__native-control" type="radio"
            [id]="inputId"
            [checked]="checked"

src/material/radio/radio.spec.ts

@@ -807,6 +807,15 @@ describe('MDC-based MatRadio', () => {
       }
     });
 
+    it('should focus on underlying input element when clicking on the touch target', () => {
+      const input = radioDebugElements[0].nativeElement.querySelector('input');
+      expect(document.activeElement).not.toBe(input);
+
+      radioDebugElements[0].nativeElement.querySelector('.mat-mdc-radio-touch-target').click();
+      fixture.detectChanges();
+      expect(document.activeElement).toBe(input);
+    });
+
     it('should not change focus origin if origin not specified', () => {
       fruitRadioInstances[0].focus(undefined, 'mouse');
       fruitRadioInstances[1].focus();

src/material/radio/radio.ts

@@ -611,6 +611,17 @@ export abstract class _MatRadioButtonBase
     }
   }
 
+  /** Triggered when the user clicks on the touch target. */
+  _onTouchTargetClick(event: Event) {
+    this._onInputInteraction(event);
+
+    if (!this.disabled) {
+      // Normally the input should be focused already, but if the click
+      // comes from the touch target, then we might have to focus it ourselves.
+      this._inputElement.nativeElement.focus();
+    }
+  }
+
   /** Sets the disabled state and marks for check if a change occurred. */
   protected _setDisabled(value: boolean) {
     if (this._disabled !== value) {

tools/public_api_guard/material/radio.md

@@ -86,6 +86,7 @@ export abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase imple
     // (undocumented)
     _onInputClick(event: Event): void;
     _onInputInteraction(event: Event): void;
+    _onTouchTargetClick(event: Event): void;
     radioGroup: _MatRadioGroupBase<_MatRadioButtonBase>;
     get required(): boolean;
     set required(value: BooleanInput);