fix(material/chips): remove button is too small (#29351)

* fix(material/chip): remove button is too small

Fixes Angular Components Chip component where the touch target of the
remove button of a chip is too small. Updates .mat-mdc-chip-remove to
target more specific styles to override original style of padding: 8px
so that the user has a larger touch target particularly on mobile
devices.

Fixes b/286959517

* refactor(material/chips): remove button is too small

Fixes lint errors from previous commit for Angular Components
Chip component where the remove button touch target is too small,
particularly for touch/mobile devices. Increases padding on all
sides.

Fixes b/286959517

* fix(material/chips): increase chip remove button touch target size

Fixes issue with Angular Component Chip's touch target size by
increasing the padding on chips with a trailing icon that has
an action.

Fixes b/286959517

BREAKING CHANGE:  updates chip remove button touch target to increase accessibility of the button especially on touch/mobile devices.

* refactor(material/chips): chip remove touch target size is insufficient

Updates fix to Autocomplete Component Chips component where the
touch target size is too small and fails minimum accessibility
size of 48x48 px. Addresses nit fixes from PR review.

Fixes b/286959517

BREAKING CHANGE: updates padding size of remove touch target to
satisfy minimum 48x48 accessibility size.

* fix(material/chip): remove button is too small

Fixes Angular Components Chip component where the touch target of the
remove button of a chip is too small. Updates .mat-mdc-chip-remove to
target more specific styles to override original style of padding: 8px
so that the user has a larger touch target particularly on mobile
devices.

Fixes b/286959517

* refactor(material/chips): remove button is too small

Fixes lint errors from previous commit for Angular Components
Chip component where the remove button touch target is too small,
particularly for touch/mobile devices. Increases padding on all
sides.

Fixes b/286959517

* fix(material/chips): increase chip remove button touch target size

Fixes issue with Angular Component Chip's touch target size by
increasing the padding on chips with a trailing icon that has
an action.

Fixes b/286959517

BREAKING CHANGE:  updates chip remove button touch target to increase accessibility of the button especially on touch/mobile devices.

* fix(material/chips): chips remove touch target is too small to be accessible

Updates Angular Components Chips component by increasing its
.mat-mdc-chip-remove::after styles to increase the size of the
touch target to make it more accessible/clickable.

Fixes b/286959517

* refactor(material/chips): fix lint errors

Updates fix for Angular Components Chips component where there
were lint formatting errors.

* refactor(material/chips): replace px with _trailing-icon-size variable

Updates previous Angular Components Chip component fix and makes it
adaptable by swapping the hard-coded 18px offset to equal the
variable for -icon-size.

* refactor(material/chips): updates touch target centering method

Updates previous Angular Component Chip component fix which
added padding to the ::after pseudo-element and attempted to
calculate centering. Changes calculation based on using
 with padding values countered
with margin negative values to center the touch target.

* refactor(material/chips): updates ::after styles and fix lint errors

Updates Angular Component Chips component fix to change ::after
background property changes to be background-color specifically to
avoid overriding background-clip styles. Suppresses lint warning
material/no-prefixes for background-clip since it's majority
compatible with browsers.

Fixes b/286959517

(cherry picked from commit d6aed80)

Author: essjay05

src/material/chips/chip.scss

@@ -538,7 +538,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 {
@@ -552,7 +552,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, selected-trailing-action-state-layer-color);
+    @include token-utils.create-token-slot(background-color,
+      selected-trailing-action-state-layer-color);
   }
 }
 
@@ -695,7 +696,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;
@@ -705,6 +708,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 {