From 7d9b972b7d48d75351e3d0189791f60987b800a7 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Wed, 22 Jul 2026 17:30:32 -0700
Subject: [PATCH 1/2] fix(material/chips): update chips minimum touch target to
 48px

Updates Angular Components' Chips component so that chips use a
touch-target span similar to buttons to ensure that chips meet
the minimum touch-target size of 48x48 for accessibility
standards.

Fixes b/537441584
---
 src/dev-app/chips/chips-demo.scss   |  2 +-
 src/material/chips/chip-option.html |  1 +
 src/material/chips/chip-row.html    |  1 +
 src/material/chips/chip-set.scss    |  2 +-
 src/material/chips/chip.html        |  1 +
 src/material/chips/chip.scss        | 23 +++++++++++++++++++++++
 6 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/dev-app/chips/chips-demo.scss b/src/dev-app/chips/chips-demo.scss
index 022cad5fe239..89ff872fec53 100644
--- a/src/dev-app/chips/chips-demo.scss
+++ b/src/dev-app/chips/chips-demo.scss
@@ -18,7 +18,7 @@
   }
 
   .mat-mdc-basic-chip {
-    margin: auto 10px;
+    margin: 8px 10px;
   }
 
   mat-chip-grid input {
diff --git a/src/material/chips/chip-option.html b/src/material/chips/chip-option.html
index a24ad97fd148..7d150b49e644 100644
--- a/src/material/chips/chip-option.html
+++ b/src/material/chips/chip-option.html
@@ -27,6 +27,7 @@
       <ng-content></ng-content>
       <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator"></span>
     </span>
+    <span class="mat-mdc-chip-touch-target"></span>
   </button>
 </span>
 
diff --git a/src/material/chips/chip-row.html b/src/material/chips/chip-row.html
index c1715e7e4344..55ed032a3186 100644
--- a/src/material/chips/chip-row.html
+++ b/src/material/chips/chip-row.html
@@ -31,6 +31,7 @@
 
     <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator" aria-hidden="true"></span>
   </span>
+  <span class="mat-mdc-chip-touch-target"></span>
 </span>
 
 @if (_hasTrailingIcon()) {
diff --git a/src/material/chips/chip-set.scss b/src/material/chips/chip-set.scss
index 3538a9daed9d..87d59ab63fe1 100644
--- a/src/material/chips/chip-set.scss
+++ b/src/material/chips/chip-set.scss
@@ -16,7 +16,7 @@
   }
 
   .mdc-evolution-chip {
-    margin: 4px 0 4px 8px;
+    margin: 8px 0 8px 8px;
   }
 
   [dir='rtl'] & {
diff --git a/src/material/chips/chip.html b/src/material/chips/chip.html
index be514ac35fc8..1d9eb6efd943 100644
--- a/src/material/chips/chip.html
+++ b/src/material/chips/chip.html
@@ -11,6 +11,7 @@
       <ng-content></ng-content>
       <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator"></span>
     </span>
+    <span class="mat-mdc-chip-touch-target"></span>
   </span>
 </span>
 
diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
index 6324868ef8f6..0c379affa2c9 100644
--- a/src/material/chips/chip.scss
+++ b/src/material/chips/chip.scss
@@ -12,6 +12,8 @@ $_graphic-padding: 6px;
 $_trailing-action-padding: 8px;
 $_avatar-leading-padding: 4px;
 $_avatar-trailing-padding: 8px;
+$_touch-target-size: 48px;
+$_touch-target-vertical-padding: 8px;
 
 $fallbacks: m3-chip.get-tokens();
 
@@ -27,6 +29,27 @@ $fallbacks: m3-chip.get-tokens();
   max-width: 100%;
 }
 
+.mat-mdc-standard-chip,
+.mat-mdc-basic-chip,
+.mat-mdc-evolution-chip {
+  /* Ensures basic/unstyled chips also have a 32px min-height baseline */
+  min-height: 32px;
+
+  /* 8px top and bottom margin for 48px touch target separation */
+  margin-top: $_touch-target-vertical-padding;
+  margin-bottom: $_touch-target-vertical-padding;
+}
+
+.mat-mdc-chip-touch-target {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: $_touch-target-size;
+  transform: translateY(-50%);
+  pointer-events: auto;
+}
+
 .mdc-evolution-chip__cell,
 .mdc-evolution-chip__action {
   height: 100%;

From 0a385ea502d13863fe0d3caec89e8129050e5833 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Wed, 22 Jul 2026 17:38:47 -0700
Subject: [PATCH 2/2] refactor(material/chips): fix lint errors

Updates previous changes to fix lint errors.
---
 src/material/chips/chip.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/material/chips/chip.scss b/src/material/chips/chip.scss
index 0c379affa2c9..822686a2e6b5 100644
--- a/src/material/chips/chip.scss
+++ b/src/material/chips/chip.scss
@@ -32,10 +32,10 @@ $fallbacks: m3-chip.get-tokens();
 .mat-mdc-standard-chip,
 .mat-mdc-basic-chip,
 .mat-mdc-evolution-chip {
-  /* Ensures basic/unstyled chips also have a 32px min-height baseline */
+  // Ensures basic/unstyled chips also have a 32px min-height baseline.
   min-height: 32px;
 
-  /* 8px top and bottom margin for 48px touch target separation */
+  // 8px top and bottom margin for 48px touch target separation.
   margin-top: $_touch-target-vertical-padding;
   margin-bottom: $_touch-target-vertical-padding;
 }