From df76492506da74d57a55b86b9e65fd52def43153 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 30 Jul 2024 13:40:19 +0200
Subject: [PATCH] fix(material/slide-toggle): increase clickable area

Fixes that the clickable area of the slide toggle was only on the `button` itself and the `label` which meant that there was some space above and below the label which isn't clickable.

Fixes #29483.
---
 src/material/slide-toggle/slide-toggle.scss | 44 ++++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
index 2ee4027d2520..f75ed24f5f65 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/src/material/slide-toggle/slide-toggle.scss
@@ -3,6 +3,7 @@
 @use '../core/tokens/m2/mat/switch' as tokens-mat-switch;
 @use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch;
 @use '../core/tokens/token-utils';
+@use '../core/style/vendor-prefixes';
 
 $_mdc-slots: (tokens-mdc-switch.$prefix, tokens-mdc-switch.get-token-slots());
 $_mat-slots: (tokens-mat-switch.$prefix, tokens-mat-switch.get-token-slots());
@@ -12,7 +13,6 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
   align-items: center;
   background: none;
   border: none;
-  cursor: pointer;
   display: inline-flex;
   flex-shrink: 0;
   margin: 0;
@@ -20,15 +20,7 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
   overflow: visible;
   padding: 0;
   position: relative;
-
-  &.mdc-switch--disabled {
-    cursor: default;
-    pointer-events: none;
-  }
-
-  &.mat-mdc-slide-toggle-disabled-interactive {
-    pointer-events: auto;
-  }
+  z-index: 1; // Put the button above the label.
 
   @include token-utils.use-tokens($_mdc-slots...) {
     @include token-utils.create-token-slot(width, track-width);
@@ -503,8 +495,35 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
 }
 
 .mat-mdc-slide-toggle {
+  @include vendor-prefixes.user-select(none);
   display: inline-block;
   -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+  position: relative;
+
+  &:has(.mdc-switch--disabled) {
+    pointer-events: none;
+    cursor: auto;
+  }
+
+  &:has(.mat-mdc-slide-toggle-disabled-interactive) {
+    pointer-events: auto;
+  }
+
+  button, label {
+    cursor: inherit;
+  }
+
+  // Increase the clickable area to cover the entire container.
+  label::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
 
   // Remove the native outline since we use the ripple for focus indication.
   outline: 0;
@@ -564,11 +583,6 @@ $_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc
     }
   }
 
-  // If our slide-toggle is enabled the cursor on label should appear as a pointer.
-  .mdc-switch:enabled + .mdc-label {
-    cursor: pointer;
-  }
-
   // TODO(wagnermaciel): Use our custom token system to emit this css rule.
   .mdc-switch--disabled + label {
     color: var(--mdc-switch-disabled-label-text-color);