review fixes

Esri · Jan 14, 2025 · 5cbe681 · 5cbe681
1 parent cbdd83c
commit 5cbe681
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 43 deletions.
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
@@ -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("<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);
-  });
 });
diff --git 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
@@ -1785,7 +1785,7 @@ export class Combobox
                 this.renderAllSelectedIndicatorChipCompact(),
               ]}
             <label
-              class="screen-readers-only"
+              class={CSS.screenReadersOnly}
               htmlFor={`${inputUidPrefix}${guid}`}
               id={`${labelUidPrefix}${guid}`}
             >
@@ -1806,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
@@ -13,6 +13,7 @@ export const CSS = {
   placeholderIcon: "placeholder-icon",
   selectedIcon: "selected-icon",
   floatingUIContainer: "floating-ui-container",
+  screenReadersOnly: "screen-readers-only",
 };
 
 export const IDS = {