From 00bcfac4c7d4fe38c05726c62ee5a9f7cb48f846 Mon Sep 17 00:00:00 2001
From: MadunaThabo <tmaduna@retrorabbit.co.za>
Date: Wed, 21 Aug 2024 10:11:26 +0200
Subject: [PATCH] fix(material/chips): Fix chips touch target to 48px * 48px

Increases the touch target to the chip icon to have 48px *48px

Fixes #29511.
---
 src/material/chips/chip.html |  2 +-
 src/material/chips/chip.scss | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/material/chips/chip.html b/src/material/chips/chip.html
index cc541c48505a..0de837903c54 100644
--- a/src/material/chips/chip.html
+++ b/src/material/chips/chip.html
@@ -15,7 +15,7 @@
 </span>
 
 @if (_hasTrailingIcon()) {
-  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing">
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing mat-mdc-chip-touch-target">
     <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
   </span>
 }
diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
index 78fc2a6eba0c..5ef3c3f5c524 100644
--- a/src/material/chips/chip.scss
+++ b/src/material/chips/chip.scss
@@ -731,3 +731,16 @@ $_avatar-trailing-padding: 8px;
 .mat-mdc-chip-action:focus .mat-mdc-focus-indicator::before {
   content: '';
 }
+
+//Sets the touch target for the chip trailing icons to 48px * 48px
+.mat-mdc-chip-touch-target {
+  >::after {
+    content: '';
+    position: absolute;
+    top: -15px;
+    bottom: -15px; 
+    left: -7px;
+    right: -7px;
+    z-index: -1;
+  }
+}
\ No newline at end of file