fix(material/chips): implement touch-target pattern/styles on chip component

Updates Angular Components' Chip component so that chips use a touch-target
span similar to other interactive components like buttons and checkboxes.
This is to ensure that chips meet the minimum touch-target size of 48x48 for
accessibility standards.

Fixes b/537441584

Author: essjay05

src/dev-app/chips/chips-demo.scss

@@ -18,7 +18,7 @@
   }
 
   .mat-mdc-basic-chip {
-    margin: auto 10px;
+    margin: 16px 10px;
   }
 
   mat-chip-grid input {

src/material/chips/_m2-chip.scss

@@ -6,6 +6,11 @@
 @function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -2);
+  $touch-target-display: block;
+
+  @if $density-scale < 0 {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -43,7 +48,8 @@
       chip-container-height: map.get((
         0: 32px,
         -1: 28px,
-        -2: 24px), $density-scale)
+        -2: 24px), $density-scale),
+        chip-touch-target-display: $touch-target-display,
     ),
   );
 }

src/material/chips/_m3-chip.scss

@@ -77,5 +77,6 @@
 
   @return (
     chip-container-height: list.nth((32px, 28px, 24px), $index),
+    chip-touch-target-display: list.nth((block, none, none), $index),
   );
 }

src/material/chips/chip-option.html

@@ -26,6 +26,7 @@
     <span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
       <ng-content></ng-content>
       <span class="mat-mdc-chip-primary-focus-indicator mat-focus-indicator"></span>
+      <span class="mat-mdc-chip-touch-target"></span>
     </span>
   </button>
 </span>

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()) {

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'] & {

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>
 

src/material/chips/chip.scss

@@ -12,6 +12,7 @@ $_graphic-padding: 6px;
 $_trailing-action-padding: 8px;
 $_avatar-leading-padding: 4px;
 $_avatar-trailing-padding: 8px;
+$_touch-target-size: 48px;
 
 $fallbacks: m3-chip.get-tokens();
 
@@ -27,6 +28,18 @@ $fallbacks: m3-chip.get-tokens();
   max-width: 100%;
 }
 
+.mat-mdc-chip-touch-target {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: $_touch-target-size;
+  transform: translateY(-50%);
+  display: token-utils.slot(chip-touch-target-display, $fallbacks);
+  pointer-events: auto;
+  outline: 1px solid purple;
+}
+
 .mdc-evolution-chip__cell,
 .mdc-evolution-chip__action {
   height: 100%;