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`
+
+ `,
+ );
+
+ 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) => (
@@ -1805,7 +1806,7 @@ export class Combobox