fix(material/checkbox): avoid making the touch target a focus stop (#33584)

Along the same lines as #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 checkbox 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/checkbox/index.api.md

@@ -63,7 +63,6 @@ export class MatCheckbox implements AfterViewInit, OnChanges, ControlValueAccess
     get inputId(): string;
     // (undocumented)
     _isRippleDisabled(): boolean;
-    _labelElement: ElementRef<HTMLInputElement>;
     labelPosition: 'before' | 'after';
     name: string | null;
     // (undocumented)
@@ -94,8 +93,6 @@ export class MatCheckbox implements AfterViewInit, OnChanges, ControlValueAccess
     _onInteractionEvent(event: Event): void;
     _onLabelTextChange(): void;
     _onTouched: () => any;
-    // (undocumented)
-    _onTouchTargetClick(): void;
     _preventBubblingFromLabel(event: MouseEvent): void;
     // (undocumented)
     registerOnChange(fn: (value: any) => void): void;

src/material/checkbox/checkbox.html

@@ -1,10 +1,11 @@
-<div mat-internal-form-field [labelPosition]="labelPosition" (click)="_preventBubblingFromLabel($event)">
-  <div #checkbox class="mdc-checkbox">
+<label
+  mat-internal-form-field
+  [labelPosition]="labelPosition"
+  [for]="inputId"
+  (click)="_preventBubblingFromLabel($event)">
+  <span #checkbox class="mdc-checkbox">
     <!-- Render this element first so the input is on top. -->
-    <div
-      class="mat-mdc-checkbox-touch-target"
-      (click)="_onTouchTargetClick()"
-      aria-hidden="true"></div>
+    <span class="mat-mdc-checkbox-touch-target" aria-hidden="true"></span>
     <input #input
            type="checkbox"
            class="mdc-checkbox__native-control"
@@ -28,30 +29,26 @@
            (blur)="_onBlur()"
            (click)="_onInputClick()"
            (change)="_onInteractionEvent($event)"/>
-    <div class="mdc-checkbox__ripple" aria-hidden="true"></div>
-    <div class="mdc-checkbox__background" aria-hidden="true">
+    <span class="mdc-checkbox__ripple" aria-hidden="true"></span>
+    <span class="mdc-checkbox__background" aria-hidden="true">
       <svg class="mdc-checkbox__checkmark"
            focusable="false"
            viewBox="0 0 24 24">
         <path class="mdc-checkbox__checkmark-path"
               fill="none"
               d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
       </svg>
-      <div class="mdc-checkbox__mixedmark"></div>
-    </div>
-    <div class="mat-mdc-checkbox-ripple mat-focus-indicator"
+      <span class="mdc-checkbox__mixedmark"></span>
+    </span>
+    <span class="mat-mdc-checkbox-ripple mat-focus-indicator"
       mat-ripple
       aria-hidden="true"
       [matRippleTrigger]="checkbox"
       [matRippleDisabled]="disableRipple || disabled"
-      [matRippleCentered]="true"></div>
-  </div>
-  <!--
-    Avoid putting a click handler on the <label/> to fix duplicate navigation stop on Talk Back
-    (#14385). Putting a click handler on the <label/> caused this bug because the browser produced
-    an unnecessary accessibility tree node.
-  -->
-  <label class="mdc-label" #label [for]="inputId">
+      [matRippleCentered]="true"></span>
+  </span>
+
+  <span #label class="mat-internal-form-field-label mdc-label">
     <ng-content></ng-content>
-  </label>
-</div>
+  </span>
+</label>

src/material/checkbox/checkbox.scss

@@ -44,6 +44,9 @@ $fallbacks: m3-checkbox.get-tokens();
 
     label {
       cursor: default;
+    }
+
+    .mat-internal-form-field-label {
       color: token-utils.slot(checkbox-disabled-label-color, $fallbacks);
 
       @include cdk.high-contrast {
@@ -54,7 +57,7 @@ $fallbacks: m3-checkbox.get-tokens();
 
   // The MDC styles result in extra padding if the label is present but empty. To fix this we hide
   // the label when it is empty.
-  label:empty {
+  .mat-internal-form-field-label:empty {
     display: none;
   }
 

src/material/checkbox/checkbox.ts

@@ -205,9 +205,6 @@ export class MatCheckbox
   /** The native `<input type="checkbox">` element */
   @ViewChild('input') _inputElement!: ElementRef<HTMLInputElement>;
 
-  /** The native `<label>` element */
-  @ViewChild('label') _labelElement!: ElementRef<HTMLInputElement>;
-
   /** Tabindex for the checkbox. */
   @Input({transform: (value: unknown) => (value == null ? undefined : numberAttribute(value))})
   tabIndex: number;
@@ -515,16 +512,6 @@ export class MatCheckbox
     this._handleInputClick();
   }
 
-  _onTouchTargetClick() {
-    this._handleInputClick();
-
-    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();
-    }
-  }
-
   /**
    *  Prevent click events that come from the `<label/>` element from bubbling. This prevents the
    *  click handler on the host from triggering twice when clicking on the `<label/>` element. After
@@ -533,7 +520,7 @@ export class MatCheckbox
    *  bubbles when the label is clicked.
    */
   _preventBubblingFromLabel(event: MouseEvent) {
-    if (!!event.target && this._labelElement.nativeElement.contains(event.target as HTMLElement)) {
+    if (event.target && this._inputElement && event.target !== this._inputElement.nativeElement) {
       event.stopPropagation();
     }
   }