fix(material/chips): show checkmark for selected non-selectable chips (…

…#25942)

Fixes that chips that were selected programmatically, but were set as `selectable="false"` weren't showing the checkmark as intended in #25890. Also removes some of the logic now that we can assume that the checkmark will always be present.

(cherry picked from commit 871f8f2)

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">

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;

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;