From b840d8431820162d89679efe416b2f4f9746edde Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Tue, 8 Nov 2022 23:29:59 +0100
Subject: [PATCH] fix(material/chips): show checkmark for selected
 non-selectable chips

Fixes that chips that were selected programmatically, but were set as `selectable="false"` weren't showing the checkmark as intended in https://github.com/angular/components/pull/25890. Also removes some of the logic now that we can assume that the checkmark will always be present.
---
 src/material/chips/chip-option.html      |  2 +-
 src/material/chips/chip-option.ts        | 12 ++----------
 tools/public_api_guard/material/chips.md |  3 ---
 3 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/material/chips/chip-option.html b/src/material/chips/chip-option.html
index 3ea7c065b369..688caa0be05a 100644
--- a/src/material/chips/chip-option.html
+++ b/src/material/chips/chip-option.html
@@ -12,7 +12,7 @@
     [attr.aria-selected]="ariaSelected"
     [attr.aria-label]="ariaLabel"
     role="option">
-    <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic" *ngIf="_hasLeadingGraphic()">
+    <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
       <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
       <span class="mdc-evolution-chip__checkmark">
         <svg class="mdc-evolution-chip__checkmark-svg" viewBox="-2 -3 30 30" focusable="false">
diff --git a/src/material/chips/chip-option.ts b/src/material/chips/chip-option.ts
index 66d9ec3b02b5..0174dcab7e07 100644
--- a/src/material/chips/chip-option.ts
+++ b/src/material/chips/chip-option.ts
@@ -43,12 +43,12 @@ export class MatChipSelectionChange {
   styleUrls: ['chip.css'],
   inputs: ['color', 'disabled', 'disableRipple', 'tabIndex'],
   host: {
-    'class': 'mat-mdc-chip mat-mdc-chip-option mdc-evolution-chip mdc-evolution-chip--filter',
+    'class':
+      'mat-mdc-chip mat-mdc-chip-option mdc-evolution-chip mdc-evolution-chip--filter mdc-evolution-chip--selectable mdc-evolution-chip--with-primary-graphic',
     '[class.mat-mdc-chip-selected]': 'selected',
     '[class.mat-mdc-chip-multiple]': '_chipListMultiple',
     '[class.mat-mdc-chip-disabled]': 'disabled',
     '[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
-    '[class.mdc-evolution-chip--selectable]': 'selectable',
     '[class.mdc-evolution-chip--disabled]': 'disabled',
     '[class.mdc-evolution-chip--selected]': 'selected',
     // This class enables the transition on the checkmark. Usually MDC adds it when selection
@@ -57,7 +57,6 @@ export class MatChipSelectionChange {
     // because they also have an exit animation that we don't care about.
     '[class.mdc-evolution-chip--selecting]': '!_animationsDisabled',
     '[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
-    '[class.mdc-evolution-chip--with-primary-graphic]': '_hasLeadingGraphic()',
     '[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
     '[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
     '[class.mat-mdc-chip-highlighted]': 'highlighted',
@@ -163,13 +162,6 @@ export class MatChipOption extends MatChip implements OnInit {
     }
   }
 
-  _hasLeadingGraphic() {
-    // The checkmark graphic communicates selected state for both single-select and multi-select.
-    // Include checkmark in single-select to fix a11y issue where selected state is communicated
-    // visually only using color (#25886).
-    return this.leadingIcon || this.selectable;
-  }
-
   _setSelectedState(isSelected: boolean, isUserInput: boolean, emitEvent: boolean) {
     if (isSelected !== this.selected) {
       this._selected = isSelected;
diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md
index b67953fb9d6e..70a8056fcd4c 100644
--- a/tools/public_api_guard/material/chips.md
+++ b/tools/public_api_guard/material/chips.md
@@ -28,7 +28,6 @@ import * as i0 from '@angular/core';
 import * as i11 from '@angular/material/core';
 import * as i12 from '@angular/common';
 import { InjectionToken } from '@angular/core';
-import { MatChipAvatar as MatChipAvatar_2 } from '@angular/material/chips';
 import { MatFormField } from '@angular/material/form-field';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatRipple } from '@angular/material/core';
@@ -341,8 +340,6 @@ export class MatChipOption extends MatChip implements OnInit {
     // (undocumented)
     _handlePrimaryActionInteraction(): void;
     // (undocumented)
-    _hasLeadingGraphic(): MatChipAvatar_2;
-    // (undocumented)
     ngOnInit(): void;
     select(): void;
     get selectable(): boolean;