diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts index c601131b6f1..93ab1a303be 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts +++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts @@ -1,5 +1,4 @@ -import { describe, it, expect } from "vitest"; -import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting"; +import { describe } from "vitest"; import { defaults, disabled, hidden, reflects, renders, slots } from "../../tests/commonTests"; import { SLOTS } from "./resources"; @@ -47,43 +46,4 @@ describe("calcite-combobox-item", () => { describe("disabled", () => { disabled("calcite-combobox-item", { focusTarget: "none" }); }); - - it("should emit calciteInternalComboboxItemChange", async () => { - const page = await newE2EPage(); - - await page.setContent(""); - - 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); - }); }); 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 cb09774c20c..c4abe0d66de 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -1785,7 +1785,7 @@ export class Combobox this.renderAllSelectedIndicatorChipCompact(), ]}