From 911eda4c8e830d63dc90986078c330dc6c681258 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sat, 5 Dec 2020 17:34:21 +0100
Subject: [PATCH] fix(material/slide-toggle): remove divs nested inside label

We made similar adjustments to other components that had `div`
elements inside the control `label` (#20990, #20986), but we never
fixed it for the slide toggle.
---
 src/material/slide-toggle/slide-toggle.html | 18 +++++++++---------
 src/material/slide-toggle/slide-toggle.scss |  1 +
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/material/slide-toggle/slide-toggle.html b/src/material/slide-toggle/slide-toggle.html
index 6cac9b59b378..717ca68f8467 100644
--- a/src/material/slide-toggle/slide-toggle.html
+++ b/src/material/slide-toggle/slide-toggle.html
@@ -1,5 +1,5 @@
 <label [attr.for]="inputId" class="mat-slide-toggle-label" #label>
-  <div #toggleBar class="mat-slide-toggle-bar"
+  <span #toggleBar class="mat-slide-toggle-bar"
        [class.mat-slide-toggle-bar-no-side-margin]="!labelContent.textContent || !labelContent.textContent.trim()">
 
     <input #input class="mat-slide-toggle-input cdk-visually-hidden" type="checkbox"
@@ -10,26 +10,26 @@
            [checked]="checked"
            [disabled]="disabled"
            [attr.name]="name"
-           [attr.aria-checked]="checked.toString()"
+           [attr.aria-checked]="checked"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"
            (change)="_onChangeEvent($event)"
            (click)="_onInputClick($event)">
 
-    <div class="mat-slide-toggle-thumb-container" #thumbContainer>
-      <div class="mat-slide-toggle-thumb"></div>
-      <div class="mat-slide-toggle-ripple mat-focus-indicator" mat-ripple
+    <span class="mat-slide-toggle-thumb-container" #thumbContainer>
+      <span class="mat-slide-toggle-thumb"></span>
+      <span class="mat-slide-toggle-ripple mat-focus-indicator" mat-ripple
            [matRippleTrigger]="label"
            [matRippleDisabled]="disableRipple || disabled"
            [matRippleCentered]="true"
            [matRippleRadius]="20"
            [matRippleAnimation]="{enterDuration: 150}">
 
-        <div class="mat-ripple-element mat-slide-toggle-persistent-ripple"></div>
-      </div>
-    </div>
+        <span class="mat-ripple-element mat-slide-toggle-persistent-ripple"></span>
+      </span>
+    </span>
 
-  </div>
+  </span>
 
   <span class="mat-slide-toggle-content" #labelContent (cdkObserveContent)="_onLabelTextChange()">
     <!-- Add an invisible span so JAWS can read the label -->
diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
index 70c673a64003..627c139101fb 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/src/material/slide-toggle/slide-toggle.scss
@@ -118,6 +118,7 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
   height: $mat-slide-toggle-thumb-size;
   width: $mat-slide-toggle-thumb-size;
   border-radius: 50%;
+  display: block;
 }
 
 // Horizontal bar for the slide-toggle.