From 74aee29baffc3d8d50ac67775da2dfc1a999ad5b Mon Sep 17 00:00:00 2001
From: Zach Arend <zachzach@google.com>
Date: Wed, 27 Apr 2022 23:35:07 +0000
Subject: [PATCH] fix(material-experimental/mdc-checkbox): remove extra a11y
 tree node for the <label/>

In the mdc checkbox component, moves the click handler on the label to
its parent, the .mdc-checkbox. 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 | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/material-experimental/mdc-checkbox/checkbox.html b/src/material-experimental/mdc-checkbox/checkbox.html
index 7e28c481479f..4c0689898efb 100644
--- a/src/material-experimental/mdc-checkbox/checkbox.html
+++ b/src/material-experimental/mdc-checkbox/checkbox.html
@@ -37,9 +37,9 @@
       [matRippleDisabled]="disableRipple || disabled"
       [matRippleCentered]="true"></div>
   </div>
-  <label #label
-         [for]="inputId"
-         (click)="$event.stopPropagation()">
-    <ng-content></ng-content>
-  </label>
+  <span (click)="$event.stopPropagation()">
+    <label #label [for]="inputId">
+      <ng-content></ng-content>
+    </label>
+  </span>
 </div>