From d5c3e0dd1b2f78fbde2d42d74df487ca8504bc68 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 20 Jul 2026 17:41:01 +0200
Subject: [PATCH] fix(material/radio): avoid making the touch target a focus
 stop

Some screen readers detect which elements have `click` listeners and make them a focus stop, even if they're `aria-hidden`. These changes rework the radio button so it doesn't have to rely on a `click` listener on the touch target by wrapping the `input` in the `label` instead.
---
 goldens/material/core/index.api.md            |  2 +-
 goldens/material/radio/index.api.md           |  1 -
 .../internal-form-field.scss                  | 12 ++++---
 .../internal-form-field.ts                    |  3 +-
 src/material/radio/radio.html                 | 31 +++++++++----------
 src/material/radio/radio.scss                 | 15 ++++-----
 src/material/radio/radio.ts                   | 11 -------
 7 files changed, 30 insertions(+), 45 deletions(-)

diff --git a/goldens/material/core/index.api.md b/goldens/material/core/index.api.md
index 6a1b9cd40528..a5bd1221c626 100644
--- a/goldens/material/core/index.api.md
+++ b/goldens/material/core/index.api.md
@@ -162,7 +162,7 @@ export const MATERIAL_ANIMATIONS: InjectionToken<AnimationsConfig>;
 export class _MatInternalFormField {
     labelPosition: 'before' | 'after';
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<_MatInternalFormField, "div[mat-internal-form-field]", never, { "labelPosition": { "alias": "labelPosition"; "required": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<_MatInternalFormField, "[mat-internal-form-field]", never, { "labelPosition": { "alias": "labelPosition"; "required": true; }; }, {}, never, ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatInternalFormField, never>;
 }
diff --git a/goldens/material/radio/index.api.md b/goldens/material/radio/index.api.md
index c3f04b0c930b..8e9933b6f6cc 100644
--- a/goldens/material/radio/index.api.md
+++ b/goldens/material/radio/index.api.md
@@ -77,7 +77,6 @@ export class MatRadioButton implements OnInit, AfterViewInit, DoCheck, OnDestroy
     ngOnInit(): void;
     _noopAnimations: boolean;
     _onInputInteraction(event: Event): void;
-    _onTouchTargetClick(event: Event): void;
     radioGroup: MatRadioGroup;
     get required(): boolean;
     set required(value: boolean);
diff --git a/src/material/core/internal-form-field/internal-form-field.scss b/src/material/core/internal-form-field/internal-form-field.scss
index fb2191d05b34..d46f1d1b1348 100644
--- a/src/material/core/internal-form-field/internal-form-field.scss
+++ b/src/material/core/internal-form-field/internal-form-field.scss
@@ -6,7 +6,8 @@
   align-items: center;
   vertical-align: middle;
 
-  & > label {
+  & > label,
+  & > .mat-internal-form-field-label {
     margin-left: 0;
     margin-right: auto;
     padding-left: 4px;
@@ -14,7 +15,8 @@
     order: 0;
   }
 
-  [dir='rtl'] & > label {
+  [dir='rtl'] & > label,
+  [dir='rtl'] & > .mat-internal-form-field-label {
     margin-left: auto;
     margin-right: 0;
     padding-left: 0;
@@ -23,7 +25,8 @@
 }
 
 .mdc-form-field--align-end {
-  & > label {
+  & > label,
+  & > .mat-internal-form-field-label {
     margin-left: auto;
     margin-right: 0;
     padding-left: 0;
@@ -31,7 +34,8 @@
     order: -1;
   }
 
-  [dir='rtl'] .mdc-form-field--align-end & label {
+  [dir='rtl'] .mdc-form-field--align-end & label,
+  [dir='rtl'] .mdc-form-field--align-end & .mat-internal-form-field-label {
     margin-left: 0;
     margin-right: auto;
     padding-left: 4px;
diff --git a/src/material/core/internal-form-field/internal-form-field.ts b/src/material/core/internal-form-field/internal-form-field.ts
index 5442c4f80ae2..db494457d6e1 100644
--- a/src/material/core/internal-form-field/internal-form-field.ts
+++ b/src/material/core/internal-form-field/internal-form-field.ts
@@ -14,8 +14,7 @@ import {Component, Input, ViewEncapsulation} from '@angular/core';
  * @docs-private
  */
 @Component({
-  // Use a `div` selector to match the old markup closer.
-  selector: 'div[mat-internal-form-field]',
+  selector: '[mat-internal-form-field]',
   template: '<ng-content></ng-content>',
   styleUrl: 'internal-form-field.css',
   encapsulation: ViewEncapsulation.None,
diff --git a/src/material/radio/radio.html b/src/material/radio/radio.html
index 6067b2022e0f..f7546b17e11e 100644
--- a/src/material/radio/radio.html
+++ b/src/material/radio/radio.html
@@ -1,10 +1,7 @@
-<div mat-internal-form-field [labelPosition]="labelPosition" #formField>
-  <div class="mdc-radio" [class.mdc-radio--disabled]="disabled">
+<label mat-internal-form-field [labelPosition]="labelPosition" [for]="inputId" #formField>
+  <span 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)="_onTouchTargetClick($event)"
-      aria-hidden="true"></div>
+    <span class="mat-mdc-radio-touch-target"></span>
     <!--
       Note that we set `aria-invalid="false"` on the input, because otherwise some screen readers
       will read out "required, invalid data" for each radio button that hasn't been checked.
@@ -25,19 +22,19 @@
            [attr.aria-describedby]="ariaDescribedby"
            [attr.aria-disabled]="disabled && disabledInteractive ? 'true' : null"
            (change)="_onInputInteraction($event)">
-    <div class="mdc-radio__background" aria-hidden="true">
-      <div class="mdc-radio__outer-circle"></div>
-      <div class="mdc-radio__inner-circle"></div>
-    </div>
-    <div mat-ripple class="mat-radio-ripple mat-focus-indicator"
+    <span class="mdc-radio__background" aria-hidden="true">
+      <span class="mdc-radio__outer-circle"></span>
+      <span class="mdc-radio__inner-circle"></span>
+    </span>
+    <span mat-ripple class="mat-radio-ripple mat-focus-indicator"
          [matRippleTrigger]="_rippleTrigger.nativeElement"
          [matRippleDisabled]="_isRippleDisabled()"
          [matRippleCentered]="true"
          aria-hidden="true">
-      <div class="mat-ripple-element mat-radio-persistent-ripple"></div>
-    </div>
-  </div>
-  <label class="mdc-label" [for]="inputId">
+      <span class="mat-ripple-element mat-radio-persistent-ripple"></span>
+    </span>
+  </span>
+  <span class="mat-internal-form-field-label mdc-label">
     <ng-content></ng-content>
-  </label>
-</div>
+  </span>
+</label>
diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss
index e5440a137d64..9aac73119483 100644
--- a/src/material/radio/radio.scss
+++ b/src/material/radio/radio.scss
@@ -12,14 +12,10 @@ $_is-external-build: true;
   @include radio-common.radio-structure(true);
   @include radio-common.radio-noop-animations();
 
-  // Clicking the label toggles the radio, but MDC does not include any styles that inform the
-  // user of this. Therefore we add the pointer cursor on top of MDC's styles.
-  label {
-    cursor: pointer;
-
-    // TODO(crisbeto): disable internally due to a large amount of breakages.
-    // Prevent the label from taking up space when it's empty.
-    @if ($_is-external-build) {
+  // TODO(crisbeto): disable internally due to a large amount of breakages.
+  // Prevent the label from taking up space when it's empty.
+  @if ($_is-external-build) {
+    .mat-internal-form-field-label {
       &:empty {
         display: none;
       }
@@ -51,9 +47,10 @@ $_is-external-build: true;
     font-size: token-utils.slot(radio-label-text-size, $fallbacks);
     letter-spacing: token-utils.slot(radio-label-text-tracking, $fallbacks);
     font-weight: token-utils.slot(radio-label-text-weight, $fallbacks);
+    cursor: pointer;
   }
 
-  .mdc-radio--disabled + label {
+  .mdc-radio--disabled + .mat-internal-form-field-label {
     color: token-utils.slot(radio-disabled-label-color, $fallbacks);
   }
 
diff --git a/src/material/radio/radio.ts b/src/material/radio/radio.ts
index 911800951b25..b5cc58cb27b2 100644
--- a/src/material/radio/radio.ts
+++ b/src/material/radio/radio.ts
@@ -709,17 +709,6 @@ export class MatRadioButton implements OnInit, AfterViewInit, DoCheck, OnDestroy
     }
   }
 
-  /** Triggered when the user clicks on the touch target. */
-  _onTouchTargetClick(event: Event) {
-    this._onInputInteraction(event);
-
-    if (!this.disabled || this.disabledInteractive) {
-      // 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) {