From 16298efb62f632351f85222786453abea4bdec4f Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Wed, 10 Jul 2024 08:43:16 -0700
Subject: [PATCH] fix: add `aria-disabled="true"` to disabled & alwaysFocused
 chips

PiperOrigin-RevId: 651035761
---
 chips/internal/assist-chip.ts      |  3 +++
 chips/internal/assist-chip_test.ts | 11 +++++++++++
 chips/internal/filter-chip.ts      |  3 +++
 chips/internal/filter-chip_test.ts | 11 +++++++++++
 chips/internal/input-chip.ts       |  3 +++
 chips/internal/input-chip_test.ts  | 11 +++++++++++
 6 files changed, 42 insertions(+)

diff --git a/chips/internal/assist-chip.ts b/chips/internal/assist-chip.ts
index d6dcf7ed8f..344b4fe21a 100644
--- a/chips/internal/assist-chip.ts
+++ b/chips/internal/assist-chip.ts
@@ -60,6 +60,9 @@ export class AssistChip extends Chip {
         class="primary action"
         id="button"
         aria-label=${ariaLabel || nothing}
+        aria-disabled=${this.disabled && this.alwaysFocusable
+          ? 'true'
+          : nothing}
         ?disabled=${this.disabled && !this.alwaysFocusable}
         type="button"
         >${content}</button
diff --git a/chips/internal/assist-chip_test.ts b/chips/internal/assist-chip_test.ts
index fbf15218f0..75c748cc46 100644
--- a/chips/internal/assist-chip_test.ts
+++ b/chips/internal/assist-chip_test.ts
@@ -45,5 +45,16 @@ describe('Assist chip', () => {
         .withContext('should not have any disabled styling or behavior')
         .toBeNull();
     });
+
+    it('should use aria-disabled when disabled and alwaysFocusable', async () => {
+      const chip = await setupTest();
+      chip.disabled = true;
+      chip.alwaysFocusable = true;
+      await chip.updateComplete;
+
+      expect(chip.renderRoot.querySelector('button[aria-disabled="true"]'))
+        .withContext('should have aria-disabled="true"')
+        .not.toBeNull();
+    });
   });
 });
diff --git a/chips/internal/filter-chip.ts b/chips/internal/filter-chip.ts
index bd0f07922d..aa1781ed06 100644
--- a/chips/internal/filter-chip.ts
+++ b/chips/internal/filter-chip.ts
@@ -61,6 +61,9 @@ export class FilterChip extends MultiActionChip {
         id="button"
         aria-label=${ariaLabel || nothing}
         aria-pressed=${this.selected}
+        aria-disabled=${this.disabled && this.alwaysFocusable
+          ? 'true'
+          : nothing}
         ?disabled=${this.disabled && !this.alwaysFocusable}
         @click=${this.handleClick}
         >${content}</button
diff --git a/chips/internal/filter-chip_test.ts b/chips/internal/filter-chip_test.ts
index ae894b1be8..56b0d19fa3 100644
--- a/chips/internal/filter-chip_test.ts
+++ b/chips/internal/filter-chip_test.ts
@@ -99,5 +99,16 @@ describe('Filter chip', () => {
         .withContext('chip.selected reverts to true')
         .toBeTrue();
     });
+
+    it('should use aria-disabled when disabled and alwaysFocusable', async () => {
+      const {chip} = await setupTest();
+      chip.disabled = true;
+      chip.alwaysFocusable = true;
+      await chip.updateComplete;
+
+      expect(chip.renderRoot.querySelector('button[aria-disabled="true"]'))
+        .withContext('should have aria-disabled="true"')
+        .not.toBeNull();
+    });
   });
 });
diff --git a/chips/internal/input-chip.ts b/chips/internal/input-chip.ts
index 16616e9693..d515b872af 100644
--- a/chips/internal/input-chip.ts
+++ b/chips/internal/input-chip.ts
@@ -94,6 +94,9 @@ export class InputChip extends MultiActionChip {
         class="primary action"
         id="button"
         aria-label=${ariaLabel || nothing}
+        aria-disabled=${this.disabled && this.alwaysFocusable
+          ? 'true'
+          : nothing}
         ?disabled=${this.disabled && !this.alwaysFocusable}
         type="button"
         >${content}</button
diff --git a/chips/internal/input-chip_test.ts b/chips/internal/input-chip_test.ts
index e295c071a7..b7b281dafb 100644
--- a/chips/internal/input-chip_test.ts
+++ b/chips/internal/input-chip_test.ts
@@ -45,5 +45,16 @@ describe('Input chip', () => {
         .withContext('should not have any disabled styling or behavior')
         .toBeNull();
     });
+
+    it('should use aria-disabled when disabled and alwaysFocusable', async () => {
+      const chip = await setupTest();
+      chip.disabled = true;
+      chip.alwaysFocusable = true;
+      await chip.updateComplete;
+
+      expect(chip.renderRoot.querySelector('button[aria-disabled="true"]'))
+        .withContext('should have aria-disabled="true"')
+        .not.toBeNull();
+    });
   });
 });