fix(combobox): fix accessibility when an item's heading or label changes

packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts

@@ -1,4 +1,5 @@
-import { describe } from "vitest";
+import { describe, it, expect } from "vitest";
+import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { defaults, disabled, hidden, reflects, renders, slots } from "../../tests/commonTests";
 import { SLOTS } from "./resources";
 
@@ -46,4 +47,43 @@ describe("calcite-combobox-item", () => {
   describe("disabled", () => {
     disabled("calcite-combobox-item", { focusTarget: "none" });
   });
+
+  it("should emit calciteInternalComboboxItemChange", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent("<calcite-combobox-item></calcite-combobox-item>");
+
+    const element = await page.find("calcite-combobox-item");
+
+    const eventSpy = await element.spyOnEvent("calciteInternalComboboxItemChange");
+
+    await page.waitForChanges();
+
+    expect(eventSpy).not.toHaveReceivedEvent();
+
+    element.setProperty("selected", true);
+    await page.waitForChanges();
+
+    expect(eventSpy).toHaveReceivedEventTimes(1);
+
+    element.setProperty("textLabel", "hello");
+    await page.waitForChanges();
+
+    expect(eventSpy).toHaveReceivedEventTimes(2);
+
+    element.setProperty("heading", "hello");
+    await page.waitForChanges();
+
+    expect(eventSpy).toHaveReceivedEventTimes(3);
+
+    element.setProperty("label", "hello");
+    await page.waitForChanges();
+
+    expect(eventSpy).toHaveReceivedEventTimes(4);
+
+    element.setProperty("disabled", true);
+    await page.waitForChanges();
+
+    expect(eventSpy).toHaveReceivedEventTimes(5);
+  });
 });

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();
     }

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"