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