fix(material/radio): avoid making the touch target a focus stop (#33558)

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.

Author: crisbeto

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>;
 }

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);

src/material/core/internal-form-field/internal-form-field.scss

@@ -6,15 +6,17 @@
   align-items: center;
   vertical-align: middle;
 
-  & > label {
+  & > label,
+  & > .mat-internal-form-field-label {
     margin-left: 0;
     margin-right: auto;
     padding-left: 4px;
     padding-right: 0;
     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,15 +25,17 @@
 }
 
 .mdc-form-field--align-end {
-  & > label {
+  & > label,
+  & > .mat-internal-form-field-label {
     margin-left: auto;
     margin-right: 0;
     padding-left: 0;
     padding-right: 4px;
     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;

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,

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>

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);
   }
 

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) {