From b163a254f0e6df0608a5f6ba2b93bd34b907bf9b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 25 Oct 2021 09:01:39 +0200
Subject: [PATCH] fix(material/chips): add selected indication in high contrast
 mode

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.
---
 src/material-experimental/mdc-chips/chip-option.ts | 1 +
 src/material-experimental/mdc-chips/chips.scss     | 8 ++++++++
 src/material/chips/chips.scss                      | 5 +++++
 3 files changed, 14 insertions(+)

diff --git a/src/material-experimental/mdc-chips/chip-option.ts b/src/material-experimental/mdc-chips/chip-option.ts
index 119124a2112a..551619e2fc2a 100644
--- a/src/material-experimental/mdc-chips/chip-option.ts
+++ b/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',
diff --git a/src/material-experimental/mdc-chips/chips.scss b/src/material-experimental/mdc-chips/chips.scss
index 8ef7df07f689..a54134b604a3 100644
--- a/src/material-experimental/mdc-chips/chips.scss
+++ b/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;
diff --git a/src/material/chips/chips.scss b/src/material/chips/chips.scss
index 00e171e358f2..4dfeb723ea42 100644
--- a/src/material/chips/chips.scss
+++ b/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 {