From 0477022d2c467753a0d6d94236745bc9cbf5c067 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 26 Jan 2022 00:37:56 +0100
Subject: [PATCH] fix(material/slide-toggle): remove divs nested inside label
 (#21224)

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.

(cherry picked from commit d1cd928714c2d6e3de75f9469ce58b06aad6353c)
---
 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 d1ee1a490523..c00d1406ea3f 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,27 +10,27 @@
            [checked]="checked"
            [disabled]="disabled"
            [attr.name]="name"
-           [attr.aria-checked]="checked.toString()"
+           [attr.aria-checked]="checked"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"
            [attr.aria-describedby]="ariaDescribedby"
            (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: _noopAnimations ? 0 : 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 5a68bf0df822..f84cf16a2629 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/src/material/slide-toggle/slide-toggle.scss
@@ -121,6 +121,7 @@ $bar-track-width: $bar-width - $thumb-size;
   height: $thumb-size;
   width: $thumb-size;
   border-radius: 50%;
+  display: block;
 }
 
 // Horizontal bar for the slide-toggle.