From c543db57a61fd6841373028689be7cbcc21f9593 Mon Sep 17 00:00:00 2001
From: Zach Arend <zarend@users.noreply.github.com>
Date: Sun, 22 May 2022 19:58:57 -0700
Subject: [PATCH] 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 (angular#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 angular#14385
---
 .../mdc-checkbox/checkbox.html                 | 11 ++++++++---
 .../mdc-checkbox/checkbox.spec.ts              | 18 +++++++++++++++---
 .../mdc-checkbox/checkbox.ts                   | 13 +++++++++++++
 src/material/checkbox/checkbox.spec.ts         |  7 +------
 src/material/checkbox/checkbox.ts              |  3 +++
 tools/public_api_guard/material/checkbox.md    |  1 +
 6 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/material-experimental/mdc-checkbox/checkbox.html b/src/material-experimental/mdc-checkbox/checkbox.html
index 1f8fb9d66f40..303eb8fc6ddd 100644
--- a/src/material-experimental/mdc-checkbox/checkbox.html
+++ b/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>
diff --git a/src/material-experimental/mdc-checkbox/checkbox.spec.ts b/src/material-experimental/mdc-checkbox/checkbox.spec.ts
index 0e4861a25df6..d3c09398eeb7 100644
--- a/src/material-experimental/mdc-checkbox/checkbox.spec.ts
+++ b/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>
diff --git a/src/material-experimental/mdc-checkbox/checkbox.ts b/src/material-experimental/mdc-checkbox/checkbox.ts
index 7005098f9528..8454b5893a92 100644
--- a/src/material-experimental/mdc-checkbox/checkbox.ts
+++ b/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();
+    }
+  }
 }
diff --git a/src/material/checkbox/checkbox.spec.ts b/src/material/checkbox/checkbox.spec.ts
index 6108131b2a2f..3933ffb0da3a 100644
--- a/src/material/checkbox/checkbox.spec.ts
+++ b/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);
diff --git a/src/material/checkbox/checkbox.ts b/src/material/checkbox/checkbox.ts
index 928458d1f969..f0640c3a2748 100644
--- a/src/material/checkbox/checkbox.ts
+++ b/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;
 
diff --git a/tools/public_api_guard/material/checkbox.md b/tools/public_api_guard/material/checkbox.md
index 6e3e94815d76..046b6943418d 100644
--- a/tools/public_api_guard/material/checkbox.md
+++ b/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)