From a022acfa273e52c91dc0291b8c34ccfdb8582f79 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Wed, 22 Jan 2025 03:10:56 +0000
Subject: [PATCH 1/2] fix(material/chips): update chip-row disabled chip to be
 focused

Updates chip-row element of Angular Components Chip Component to
be focusable even if the chip is disabled. This allows the chip
to be accessed via screenreader and read aloud as a disabled chip.

Fixes b/380373844
---
 src/material/chips/chip-row.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/material/chips/chip-row.ts b/src/material/chips/chip-row.ts
index 5d819224fca7..34408bae2e9d 100644
--- a/src/material/chips/chip-row.ts
+++ b/src/material/chips/chip-row.ts
@@ -114,7 +114,7 @@ export class MatChipRow extends MatChip implements AfterViewInit {
 
   /** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */
   _handleFocus() {
-    if (!this._isEditing && !this.disabled) {
+    if (!this._isEditing) {
       this.focus();
     }
   }

From d110db9783524dbf8965b299ed96d2bc4816208e Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Wed, 22 Jan 2025 18:34:09 +0000
Subject: [PATCH 2/2] refactor(material/chips): updating chips dev-app to add
 disabled input chips

Updates previous chips dev-app demo to include disabled input chips to mimic
the XAP demo for a11y testing purposes.
---
 src/dev-app/chips/chips-demo.html | 68 +++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html
index 6011d84cd86c..50d20beaa68b 100644
--- a/src/dev-app/chips/chips-demo.html
+++ b/src/dev-app/chips/chips-demo.html
@@ -225,6 +225,74 @@ <h4>Options</h4>
     </mat-card-content>
   </mat-card>
 
+  <mat-card>
+    <mat-toolbar color="primary">Disabled Input Chips</mat-toolbar>
+
+    <mat-card-content>
+      <p>
+        The <code>&lt;mat-chip-grid&gt;</code> component pairs with the <code>matChipInputFor</code> directive
+        to convert user input text into chips.
+        They can be used inside a <code>&lt;mat-form-field&gt;</code>.
+      </p>
+
+      <h4>Input is last child of chip grid</h4>
+
+      <mat-form-field class="demo-has-chip-list">
+        <mat-label>New Contributor...</mat-label>
+        <mat-chip-grid #chipGrid1 [(ngModel)]="selectedPeople" required>
+          @for (person of people; track person) {
+            <mat-chip-row
+              [disabled]="true"
+              [editable]="editable"
+              (removed)="remove(person)"
+              (edited)="edit(person, $event)">
+              {{person.name}}
+              <button matChipRemove aria-label="Remove contributor">
+                <mat-icon>close</mat-icon>
+              </button>
+            </mat-chip-row>
+          }
+          <input
+                 [matChipInputFor]="chipGrid1"
+                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                 [matChipInputAddOnBlur]="addOnBlur"
+                 (matChipInputTokenEnd)="add($event)" />
+        </mat-chip-grid>
+      </mat-form-field>
+
+      <h4>Input is next sibling child of chip grid</h4>
+
+      <mat-form-field>
+        <mat-label>New Contributor...</mat-label>
+        <mat-chip-grid #chipGrid2 [(ngModel)]="selectedPeople" required>
+          @for (person of people; track person) {
+            <mat-chip-row disabled (removed)="remove(person)">
+              {{person.name}}
+              <button matChipRemove aria-label="Remove contributor">
+                <mat-icon>close</mat-icon>
+              </button>
+            </mat-chip-row>
+          }
+        </mat-chip-grid>
+        <input [matChipInputFor]="chipGrid2"
+               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+               [matChipInputAddOnBlur]="addOnBlur"
+               (matChipInputTokenEnd)="add($event)" />
+      </mat-form-field>
+
+      <p>
+        The example above has overridden the <code>[separatorKeys]</code> input to allow for
+        <code>ENTER</code>, <code>COMMA</code> and <code>SEMICOLON</code> keys.
+      </p>
+
+      <h4>Options</h4>
+      <p>
+        <mat-checkbox name="addOnBlur" [(ngModel)]="addOnBlur">Add on Blur</mat-checkbox>
+      </p>
+
+    </mat-card-content>
+  </mat-card>
+
   <mat-card>
     <mat-toolbar color="primary">Miscellaneous</mat-toolbar>
     <mat-card-content>