fix(material/chips): add selected indication in high contrast mode (#…

…23828)

Currently the single-selection chip shows that it's selected by changing its background color, but that doesn't work in high contrast mode. These changes add a thicker outline when the chip is selected.

(cherry picked from commit 2c637d3)

src/material-experimental/mdc-chips/chip-option.ts

@@ -50,6 +50,7 @@ export class MatChipSelectionChange {
     '[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
     '[class.mat-mdc-chip-with-trailing-icon]': 'trailingIcon || removeIcon',
     '[class.mat-mdc-chip-selected]': 'selected',
+    '[class.mat-mdc-chip-multiple]': '_chipListMultiple',
     '[id]': 'id',
     '[tabIndex]': 'tabIndex',
     '[attr.disabled]': 'disabled || null',

src/material-experimental/mdc-chips/chips.scss

@@ -141,6 +141,14 @@ $chip-margin: 4px;
   }
 }
 
+// Single-selection chips show their selected state using a background color which won't be visible
+// in high contrast mode. This isn't necessary in multi-selection since there's a checkmark.
+.mat-mdc-chip-selected:not(.mat-mdc-chip-multiple) {
+  @include a11y.high-contrast(active, off) {
+    outline-width: 3px;
+  }
+}
+
 .mat-mdc-chip-row-focusable-text-content,
 .mat-mdc-chip-remove-icon {
   display: flex;

src/material/chips/chips.scss

@@ -98,6 +98,11 @@ $chip-remove-size: 18px;
       // Use 2px here since the dotted outline is a little thinner.
       outline: dotted 2px;
     }
+
+    // Seleted state is shown using a background color which isn't visible in high contrast mode.
+    &.mat-chip-selected {
+      outline-width: 3px;
+    }
   }
 
   &.mat-chip-disabled {