fix(material-experimental/mdc-checkbox): remove extra a11y tree node …

…for the <label/> (#24907)

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

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)