fix(material-experimental/mdc-radio): add accessible touch targets (#…

…22994)

Sets up accessible touch targets on the MDC-based radio button.

Also hides the touch targets on the two lowest densities. This is something I forgot to do in #22892.

Fixes #22991.

(cherry picked from commit 150d5af)

src/material-experimental/mdc-checkbox/_checkbox-theme.scss

@@ -125,6 +125,12 @@
       $query: mdc-helpers.$mat-base-styles-query
     );
   }
+
+  @if ($density-scale == -2 or $density-scale == 'minimum') {
+    .mat-mdc-checkbox-touch-target {
+      display: none;
+    }
+  }
 }
 
 @mixin theme($theme-or-color-config) {

src/material-experimental/mdc-radio/_radio-theme.scss

@@ -58,6 +58,12 @@
   .mat-mdc-radio-button .mdc-radio {
     @include mdc-radio-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
   }
+
+  @if ($density-scale == -2 or $density-scale == 'minimum') {
+    .mat-mdc-radio-touch-target {
+      display: none;
+    }
+  }
 }
 
 @mixin theme($theme-or-color-config) {

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

@@ -1,6 +1,8 @@
 <div class="mdc-form-field" #formField
      [class.mdc-form-field--align-end]="labelPosition == 'before'">
   <div class="mdc-radio" [ngClass]="_classes">
+    <!-- Render this element first so the input is on top. -->
+    <div class="mat-mdc-radio-touch-target" (click)="_onInputInteraction($event)"></div>
     <input #input class="mdc-radio__native-control" type="radio"
            [id]="inputId"
            [checked]="checked"
@@ -12,7 +14,7 @@
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"
            [attr.aria-describedby]="ariaDescribedby"
-           (change)="_onInputChange($event)">
+           (change)="_onInputInteraction($event)">
     <div class="mdc-radio__background">
       <div class="mdc-radio__outer-circle"></div>
       <div class="mdc-radio__inner-circle"></div>

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

@@ -1,6 +1,7 @@
 @use '@material/radio/radio' as mdc-radio;
 @use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '@material/form-field' as mdc-form-field;
+@use '@material/touch-target' as mdc-touch-target;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y';
 @use '../../material/core/style/layout-common';
@@ -25,6 +26,19 @@
   @include mdc-radio.without-ripple($query: animation);
 }
 
+// Element used to provide a larger tap target for users on touch devices.
+.mat-mdc-radio-touch-target {
+  @include mdc-touch-target.touch-target(
+    $set-width: true,
+    $query: mdc-helpers.$mat-base-styles-query);
+
+  [dir='rtl'] & {
+    left: 0;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+}
+
 // Note that this creates a square box around the circle, however it's consistent with
 // how IE/Edge treat native radio buttons in high contrast mode. We can't turn the border
 // into a dotted one, because it's too thick which causes the circles to look off.

src/material/radio/radio.html

@@ -16,7 +16,7 @@
         [attr.aria-label]="ariaLabel"
         [attr.aria-labelledby]="ariaLabelledby"
         [attr.aria-describedby]="ariaDescribedby"
-        (change)="_onInputChange($event)"
+        (change)="_onInputInteraction($event)"
         (click)="_onInputClick($event)">
 
     <!-- The ripple comes after the input so that we can target it with a CSS

src/material/radio/radio.ts

@@ -588,24 +588,23 @@ export abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase imple
     event.stopPropagation();
   }
 
-  /**
-   * Triggered when the radio button received a click or the input recognized any change.
-   * Clicking on a label element, will trigger a change event on the associated input.
-   */
-  _onInputChange(event: Event) {
+  /** Triggered when the radio button receives an interaction from the user. */
+   _onInputInteraction(event: Event) {
     // We always have to stop propagation on the change event.
     // Otherwise the change event, from the input element, will bubble up and
     // emit its event object to the `change` output.
     event.stopPropagation();
 
-    const groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value;
-    this.checked = true;
-    this._emitChangeEvent();
+    if (!this.checked && !this.disabled) {
+      const groupValueChanged = this.radioGroup && this.value !== this.radioGroup.value;
+      this.checked = true;
+      this._emitChangeEvent();
 
-    if (this.radioGroup) {
-      this.radioGroup._controlValueAccessorChangeFn(this.value);
-      if (groupValueChanged) {
-        this.radioGroup._emitChangeEvent();
+      if (this.radioGroup) {
+        this.radioGroup._controlValueAccessorChangeFn(this.value);
+        if (groupValueChanged) {
+          this.radioGroup._emitChangeEvent();
+        }
       }
     }
   }

tools/public_api_guard/material/radio.d.ts

@@ -25,8 +25,8 @@ export declare abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBa
     constructor(radioGroup: _MatRadioGroupBase<_MatRadioButtonBase>, elementRef: ElementRef, _changeDetector: ChangeDetectorRef, _focusMonitor: FocusMonitor, _radioDispatcher: UniqueSelectionDispatcher, animationMode?: string, _providerOverride?: MatRadioDefaultOptions | undefined, tabIndex?: string);
     _isRippleDisabled(): boolean;
     _markForCheck(): void;
-    _onInputChange(event: Event): void;
     _onInputClick(event: Event): void;
+    _onInputInteraction(event: Event): void;
     protected _setDisabled(value: boolean): void;
     focus(options?: FocusOptions, origin?: FocusOrigin): void;
     ngAfterViewInit(): void;