From 8e07684b119859b259c51948ba4d8e2ad7d387c9 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Wed, 17 Jul 2024 20:59:57 +0000
Subject: [PATCH 1/2] fix(material/chips): increase chip remove touch target
 size

Fixes Angular Components Chips component accessibility issue
where the touch target is too small. Updates the chips' remove
button ::after margin and padding styles to create a larger
touch target to meet the minimum 48px x 48px size.

Fixes b/286959517
---
 src/material/chips/chip.scss | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
index 7e99bacad768..3cfede42b530 100644
--- a/src/material/chips/chip.scss
+++ b/src/material/chips/chip.scss
@@ -534,7 +534,7 @@ $_avatar-trailing-padding: 8px;
     }
 
     &::after {
-      @include token-utils.create-token-slot(background, trailing-action-state-layer-color);
+      @include token-utils.create-token-slot(background-color, trailing-action-state-layer-color);
     }
 
     &:hover::after {
@@ -548,7 +548,7 @@ $_avatar-trailing-padding: 8px;
 
   .mat-mdc-chip-selected .mat-mdc-chip-remove::after,
   .mat-mdc-chip-highlighted .mat-mdc-chip-remove::after {
-    @include token-utils.create-token-slot(background, selected-trailing-action-state-layer-color);
+    @include token-utils.create-token-slot(background-color, selected-trailing-action-state-layer-color);
   }
 }
 
@@ -691,7 +691,9 @@ $_avatar-trailing-padding: 8px;
 
   // Used as a state overlay.
   &::after {
-    $offset: 2px;
+    $_touch-target-size: 48px;
+    $_ripple-size: 24px;
+    $offset: 3px;
     content: '';
     display: block;
     opacity: 0;
@@ -701,6 +703,11 @@ $_avatar-trailing-padding: 8px;
     left: 8px - $offset;
     right: 8px - $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;
   }
 
   .mat-icon {

From 3d3a6592f71bd70e875d375d5c16a60be4bb1dbc Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Wed, 17 Jul 2024 21:57:34 +0000
Subject: [PATCH 2/2] refactor(material/chips): fix lint errors

Updates previous fix to correct lint error due to changing some
lines from background to targeting background-color specifically.
---
 src/material/chips/chip.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
index 3cfede42b530..18b8e711209b 100644
--- a/src/material/chips/chip.scss
+++ b/src/material/chips/chip.scss
@@ -548,7 +548,8 @@ $_avatar-trailing-padding: 8px;
 
   .mat-mdc-chip-selected .mat-mdc-chip-remove::after,
   .mat-mdc-chip-highlighted .mat-mdc-chip-remove::after {
-    @include token-utils.create-token-slot(background-color, selected-trailing-action-state-layer-color);
+    @include token-utils.create-token-slot(background-color,
+      selected-trailing-action-state-layer-color);
   }
 }