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)="filterLabelClicks($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>
@@ -38,8 +38,7 @@
       [matRippleCentered]="true"></div>
   </div>
   <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,15 @@ export class MatCheckbox
       nativeCheckbox.nativeElement.indeterminate = value;
     }
   }
+
+  // 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.
+
+  protected filterLabelClicks(event: MouseEvent) {
+    if (event.target instanceof HTMLElement && this._label.nativeElement.contains(event.target)) {
+      event.stopPropagation();
+    }
+  }
 }