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

In the mdc checkbox component, removes the click handler on <label/>
and handles stoping propgation of clicks on the label in the label's
parent. This removes the extra a11y tree node on the label and fixes
TalkBack having an extra navigation stop (#14385).

A11y tree before this commit. It has an un-necessary node, which
coresponds to the `<label>` element.
```
- Generic
 - Checkbox, "Field A"
 - Textlabel, "Field A"
```

A11y tree with this commit applied
```
- Generic
 - Checkbox, "Field A"
```

fixes #14385

Author: zarend

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

@@ -1,5 +1,5 @@
 <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)="_onClick()"></div>
@@ -37,9 +37,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

@@ -306,7 +306,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
@@ -1034,7 +1047,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"
@@ -1045,7 +1058,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

@@ -388,4 +388,14 @@ export class MatCheckbox
       nativeCheckbox.nativeElement.indeterminate = value;
     }
   }
+
+  /**
+   *  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 prevent bubbling of clicks from the label, we ensure only only click event bubbles when the label is clicked.
+   *
+   **/
+  protected preventBubblingFromLabel(event: MouseEvent) {
+    if (event.target instanceof HTMLElement && this._label.nativeElement.contains(event.target)) {
+      event.stopPropagation();
+    }
+  }
 }