fix(material/chips): adds border on chip-action focus

Updates Angular Material Chips component so that when
mat-mdc-chip-action is focused on a border appears around
either the text of the chip or the action icon, whichever
is being focused. This improves the accessibility by aiding
the user in seeing which element/action is being focused on.

Fixes b/286103414

Author: essjay05

src/material/chips/chip.scss

@@ -659,15 +659,36 @@ $fallbacks: m3-chip.get-tokens();
     left: 0;
     pointer-events: none;
   }
+  
+}
 
+// Targets .mdc-evolution-chip__cell
+.mat-mdc-chip-action .mat-focus-indicator::before,
+// Targets mdc-evolution-chip__icon
+.mat-mdc-chip-action.mat-focus-indicator::before {
   // For the chip element, default inset/offset values are necessary to ensure that
   // the focus indicator is sufficiently contrastive and renders appropriately.
-  .mat-focus-indicator::before {
-    $default-border-width: focus-indicators-private.$default-border-width;
-    $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
-    $offset: calc(#{$border-width} + 2px);
-    margin: calc(#{$offset} * -1);
-  }
+  $default-border-width: focus-indicators-private.$default-border-width;
+  $border-width: var(--mat-focus-indicator-border-width, #{$default-border-width});
+  $offset: calc(#{$border-width} + 2px);
+
+  content: '';
+  display: block;
+  position: absolute;
+  padding: $offset;
+  margin: calc(#{$offset} * -1);
+  border-width: $border-width;
+  border: solid;
+  border-color: var(--mat-focus-indicator-border-color), black;
+  opacity: 0;
+  height: auto;
+}
+
+// The chip has multiple focus targets so we have to put the indicator on
+// a separate element, rather than on the focusable element itself.
+.mat-mdc-chip-action:focus .mat-focus-indicator::before,
+.mat-mdc-chip-action.mat-focus-indicator:focus::before {
+  opacity: 1;
 }
 
 .mat-mdc-chip-edit, .mat-mdc-chip-remove {
@@ -725,12 +746,6 @@ $fallbacks: m3-chip.get-tokens();
   }
 }
 
-// The chip has multiple focus targets so we have to put the indicator on
-// a separate element, rather than on the focusable element itself.
-.mat-mdc-chip-action:focus .mat-focus-indicator::before {
-  content: '';
-}
-
 // Prevents icon from being cut off when text spacing is increased.
 // .mat-mdc-chip-remove selector necessary for remove button with icon.
 // Fixes b/250063405.