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

…ges (#11289) **Related Issue:** #11301 ## Summary - update the accessible elements when an items `heading` or `label` changes - use `label` as an ariaLabel on the accessible element.
Esri · Jan 14, 2025 · 33583e7 · 33583e7
1 parent 265e5dc
commit 33583e7
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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"
@@ -1784,7 +1785,7 @@ export class Combobox
                 this.renderAllSelectedIndicatorChipCompact(),
               ]}
             <label
-              class="screen-readers-only"
+              class={CSS.screenReadersOnly}
               htmlFor={`${inputUidPrefix}${guid}`}
               id={`${labelUidPrefix}${guid}`}
             >
@@ -1805,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 = {