From 33583e7e0a0823042b30cd84b21511bbdfbd9ecf Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 14 Jan 2025 14:24:11 -0800
Subject: [PATCH] fix(combobox): fix accessibility when an item's heading or
 label changes (#11289)

**Related Issue:** #11301

## Summary

- update the accessible elements when an items `heading` or `label`
changes
- use `label` as an ariaLabel on the accessible element.
---
 .../combobox-item/combobox-item.tsx           |  4 +-
 .../src/components/combobox/combobox.e2e.ts   | 56 +++++++++++++++++++
 .../src/components/combobox/combobox.tsx      |  5 +-
 .../src/components/combobox/resources.ts      |  1 +
 4 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
index 7d1aaaf93fc..4c44e0ff5ad 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
@@ -168,7 +168,9 @@ export class ComboboxItem extends LitElement implements InteractiveComponent {
     if (
       (changes.has("disabled") && this.hasUpdated) ||
       (changes.has("selected") && this.hasUpdated) ||
-      (changes.has("textLabel") && this.hasUpdated)
+      (changes.has("textLabel") && this.hasUpdated) ||
+      (changes.has("heading") && this.hasUpdated) ||
+      (changes.has("label") && this.hasUpdated)
     ) {
       this.calciteInternalComboboxItemChange.emit();
     }
diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
index 87e0957d53c..d1c7495cc06 100644
--- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -731,6 +731,62 @@ describe("calcite-combobox", () => {
     });
   });
 
+  it("should update screen reader list items", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(
+      html`<calcite-combobox>
+        <calcite-combobox-item id="item-0" value="item-0"></calcite-combobox-item>
+      </calcite-combobox>`,
+    );
+
+    const item = await page.find("calcite-combobox-item");
+    let a11yItem = await page.find(`calcite-combobox >>> ul.${CSS.screenReadersOnly} li`);
+
+    expect(a11yItem).not.toBeNull();
+    expect(await a11yItem.getProperty("ariaSelected")).toBe("false");
+    expect(await a11yItem.getProperty("ariaLabel")).toBe(null);
+    expect(await a11yItem.getProperty("textContent")).toBe("");
+
+    item.setProperty("selected", true);
+    await page.waitForChanges();
+    await page.waitForTimeout(DEBOUNCE.nextTick);
+    a11yItem = await page.find(`calcite-combobox >>> ul.${CSS.screenReadersOnly} li`);
+
+    expect(await a11yItem.getProperty("ariaSelected")).toBe("true");
+
+    const label = "label";
+    item.setProperty("label", label);
+    await page.waitForChanges();
+    await page.waitForTimeout(DEBOUNCE.nextTick);
+    a11yItem = await page.find(`calcite-combobox >>> ul.${CSS.screenReadersOnly} li`);
+
+    expect(await a11yItem.getProperty("ariaLabel")).toBe(label);
+
+    const textLabel = "textLabel";
+    item.setProperty("textLabel", textLabel);
+    await page.waitForChanges();
+    await page.waitForTimeout(DEBOUNCE.nextTick);
+    a11yItem = await page.find(`calcite-combobox >>> ul.${CSS.screenReadersOnly} li`);
+
+    expect(await a11yItem.getProperty("textContent")).toBe(textLabel);
+
+    const heading = "heading";
+    item.setProperty("heading", heading);
+    await page.waitForChanges();
+    await page.waitForTimeout(DEBOUNCE.nextTick);
+    a11yItem = await page.find(`calcite-combobox >>> ul.${CSS.screenReadersOnly} li`);
+
+    expect(await a11yItem.getProperty("textContent")).toBe(heading);
+
+    item.setProperty("disabled", true);
+    await page.waitForChanges();
+    await page.waitForTimeout(DEBOUNCE.nextTick);
+    a11yItem = await page.find(`calcite-combobox >>> ul.${CSS.screenReadersOnly} li`);
+
+    expect(a11yItem).toBeNull();
+  });
+
   it("should control max items displayed", async () => {
     const maxItems = 7;
     const page = await newE2EPage();
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index a4607ea935e..c4abe0d66de 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1679,6 +1679,7 @@ export class Combobox
   private renderListBoxOptions(): JsxNode {
     return this.filteredItems.map((item) => (
       <li
+        ariaLabel={item.label}
         ariaSelected={item.selected}
         id={item.guid ? `${itemUidPrefix}${item.guid}` : null}
         role="option"
@@ -1784,7 +1785,7 @@ export class Combobox
                 this.renderAllSelectedIndicatorChipCompact(),
               ]}
             <label
-              class="screen-readers-only"
+              class={CSS.screenReadersOnly}
               htmlFor={`${inputUidPrefix}${guid}`}
               id={`${labelUidPrefix}${guid}`}
             >
@@ -1805,7 +1806,7 @@ export class Combobox
         <ul
           aria-labelledby={`${labelUidPrefix}${guid}`}
           ariaMultiSelectable="true"
-          class="screen-readers-only"
+          class={CSS.screenReadersOnly}
           id={`${listboxUidPrefix}${guid}`}
           role="listbox"
           tabIndex={-1}
diff --git a/packages/calcite-components/src/components/combobox/resources.ts b/packages/calcite-components/src/components/combobox/resources.ts
index 83d0418613d..00275b72149 100644
--- a/packages/calcite-components/src/components/combobox/resources.ts
+++ b/packages/calcite-components/src/components/combobox/resources.ts
@@ -13,6 +13,7 @@ export const CSS = {
   placeholderIcon: "placeholder-icon",
   selectedIcon: "selected-icon",
   floatingUIContainer: "floating-ui-container",
+  screenReadersOnly: "screen-readers-only",
 };
 
 export const IDS = {