From 8940e92b6b0cd9d9c90218c88fe279aa74ecc4ec Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Tue, 20 May 2025 22:24:49 +0000
Subject: [PATCH 1/2] fix(material/slide-toggle): increase slide toggle touch
 target

Updates Angular Components Slide Toggle component and increases
the touch target to meet strict accessibility guidelines of buttons
having a minimum touch target of 48x48 pixels.

Fixes b/265033905
---
 src/material/slide-toggle/slide-toggle.scss | 22 +++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
index addcad65d2f1..a56ab0187027 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/src/material/slide-toggle/slide-toggle.scss
@@ -21,6 +21,27 @@ $fallbacks: m3-slide-toggle.get-tokens();
   padding: 0;
   position: relative;
 
+  &::after {
+    $_touch-target-size: 48px;
+    $_ripple-size: 24px;
+    $offset: 5px;
+  
+    content: '';
+    opacity: 0;
+    display: block;
+    position: absolute;
+    top: 0 - $offset;
+    bottom: 0 - $offset;
+    left: $offset;
+    right: $offset;
+    border-radius: 50%;
+    box-sizing: border-box;
+    padding: calc(($_touch-target-size - $_ripple-size)/2);
+    margin: calc((($_touch-target-size - $_ripple-size)/2) * -1);
+    // stylelint-disable material/no-prefixes
+    background-clip: content-box;
+  }
+
   width: token-utils.slot(slide-toggle-track-width, $fallbacks);
 
   &.mdc-switch--disabled {
@@ -367,6 +388,7 @@ $fallbacks: m3-slide-toggle.get-tokens();
   &::after {
     content: '';
     opacity: 0;
+  
 
     .mdc-switch--disabled & {
       display: none;

From 4416dec9ec4bed52b379ded24d76a095c6e9f3d3 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Wed, 21 May 2025 15:56:36 +0000
Subject: [PATCH 2/2] refactor(material/slide-toggle): fix lint errors

Updates previous changes to remove empty whitespaces causing
lint errors.
---
 src/material/slide-toggle/slide-toggle.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
index a56ab0187027..897fb5de98c0 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/src/material/slide-toggle/slide-toggle.scss
@@ -25,7 +25,7 @@ $fallbacks: m3-slide-toggle.get-tokens();
     $_touch-target-size: 48px;
     $_ripple-size: 24px;
     $offset: 5px;
-  
+
     content: '';
     opacity: 0;
     display: block;
@@ -388,7 +388,6 @@ $fallbacks: m3-slide-toggle.get-tokens();
   &::after {
     content: '';
     opacity: 0;
-  
 
     .mdc-switch--disabled & {
       display: none;