fix(material-experimental/mdc-checkbox): remove extra a11y tree node … …for the <label/>

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

@@ -1,5 +1,6 @@
 <div class="mdc-form-field"
-     [class.mdc-form-field--align-end]="labelPosition == 'before'">
+     [class.mdc-form-field--align-end]="labelPosition == 'before'"
+     (click)="_preventBubblingFromLabel($event)">
   <div #checkbox class="mdc-checkbox">
     <!-- Render this element first so the input is on top. -->
     <div class="mat-mdc-checkbox-touch-target" (click)="_onInputClick()"></div>
@@ -38,9 +39,13 @@
       [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 #label
-         [for]="inputId"
-         (click)="$event.stopPropagation()">
+         [for]="inputId">
     <ng-content></ng-content>
   </label>
 </div>

src/material-experimental/mdc-checkbox/checkbox.spec.ts

@@ -309,7 +309,20 @@ describe('MDC-based MatCheckbox', () => {
       );
     }));
 
-    it('should not trigger the click event multiple times', fakeAsync(() => {
+    it('should trigger the click once when clicking on the <input/>', fakeAsync(() => {
+      spyOn(testComponent, 'onCheckboxClick');
+
+      expect(inputElement.checked).toBe(false);
+
+      inputElement.click();
+      fixture.detectChanges();
+      flush();
+
+      expect(inputElement.checked).toBe(true);
+      expect(testComponent.onCheckboxClick).toHaveBeenCalledTimes(1);
+    }));
+
+    it('should trigger the click event once when clicking on the label', fakeAsync(() => {
       // By default, when clicking on a label element, a generated click will be dispatched
       // on the associated input element.
       // Since we're using a label element and a visual hidden input, this behavior can led
@@ -1037,7 +1050,7 @@ describe('MatCheckboxDefaultOptions', () => {
 /** Simple component for testing a single checkbox. */
 @Component({
   template: `
-  <div (click)="parentElementClicked = true" (keyup)="parentElementKeyedUp = true">
+  <div (click)="parentElementClicked = true" (keyup)="parentElementKeyedUp = true" (click)="onCheckboxClick($event)">
     <mat-checkbox
         [id]="checkboxId"
         [required]="isRequired"
@@ -1048,7 +1061,6 @@ describe('MatCheckboxDefaultOptions', () => {
         [color]="checkboxColor"
         [disableRipple]="disableRipple"
         [value]="checkboxValue"
-        (click)="onCheckboxClick($event)"
         (change)="onCheckboxChange($event)">
       Simple checkbox
     </mat-checkbox>

src/material-experimental/mdc-checkbox/checkbox.ts

@@ -116,4 +116,17 @@ export class MatCheckbox
   _onInputClick() {
     super._handleInputClick();
   }
+
+  /**
+   *  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
+   *  the click event on the `<label/>` propagates, the browsers dispatches click on the associated
+   *  `<input/>`. By preventing clicks on the label by bubbling, we ensure only one click event
+   *  bubbles when the label is clicked.
+   */
+  _preventBubblingFromLabel(event: MouseEvent) {
+    if (!!event.target && this._labelElement.nativeElement.contains(event.target as HTMLElement)) {
+      event.stopPropagation();
+    }
+  }
 }

src/material/checkbox/checkbox.spec.ts

@@ -296,12 +296,7 @@ describe('MatCheckbox', () => {
       expect(checkboxNativeElement.classList).toContain('mat-checkbox-label-before');
     });
 
-    it('should not trigger the click event multiple times', () => {
-      // By default, when clicking on a label element, a generated click will be dispatched
-      // on the associated input element.
-      // Since we're using a label element and a visual hidden input, this behavior can led
-      // to an issue, where the click events on the checkbox are getting executed twice.
-
+    it('should trigger the click event once when clicking on the label', () => {
       spyOn(testComponent, 'onCheckboxClick');
 
       expect(inputElement.checked).toBe(false);

src/material/checkbox/checkbox.ts

@@ -183,6 +183,9 @@ export abstract class _MatCheckboxBase<E>
   /** The native `<input type="checkbox">` element */
   @ViewChild('input') _inputElement: ElementRef<HTMLInputElement>;
 
+  /** The native `<label>` element */
+  @ViewChild('label') _labelElement: ElementRef<HTMLInputElement>;
+
   /** Reference to the ripple instance of the checkbox. */
   @ViewChild(MatRipple) ripple: MatRipple;
 

tools/public_api_guard/material/checkbox.md

@@ -108,6 +108,7 @@ export abstract class _MatCheckboxBase<E> extends _MatCheckboxMixinBase implemen
     get inputId(): string;
     // (undocumented)
     _isRippleDisabled(): boolean;
+    _labelElement: ElementRef<HTMLInputElement>;
     labelPosition: 'before' | 'after';
     name: string | null;
     // (undocumented)