dimsum-e2e-tests 3.70.0-next.7 → 3.70.0-next.71

package/ds-floating-context/placement/DSFloatingContext.placement.visual.spec.js

@@ -0,0 +1,48 @@
+// Tests for the fix introduced in PUI-14527 (useFloatingContext placement string type mismatch)
+import { mouseOver } from '../../helpers';
+import DSFloatingContextCO from '../DSFloatingContextCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18529 - DSFloatingContext:: useFloatingContext placement directions - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFloatingContextCO.positionsTestURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display tooltip with right placement on hover', async () => {
+      const buttons = await DSFloatingContextCO.getHelpButtons();
+      await mouseOver(buttons[0]);
+      const contents = await DSFloatingContextCO.getFloatingContextContents();
+      await contents[0].waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSFloatingContextCO.snapshotPath('placement-right'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display tooltip with top placement on hover', async () => {
+      const buttons = await DSFloatingContextCO.getHelpButtons();
+      await mouseOver(buttons[1]);
+      const contents = await DSFloatingContextCO.getFloatingContextContents();
+      await contents[0].waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSFloatingContextCO.snapshotPath('placement-top'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('03: should display tooltip with bottom placement on hover', async () => {
+      const buttons = await DSFloatingContextCO.getHelpButtons();
+      await mouseOver(buttons[2]);
+      const contents = await DSFloatingContextCO.getFloatingContextContents();
+      await contents[0].waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSFloatingContextCO.snapshotPath('placement-bottom'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('04: should display tooltip with left placement on hover', async () => {
+      const buttons = await DSFloatingContextCO.getHelpButtons();
+      await mouseOver(buttons[3]);
+      const contents = await DSFloatingContextCO.getFloatingContextContents();
+      await contents[0].waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(DSFloatingContextCO.snapshotPath('placement-left'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-multi/DSComboboxMultiCO.js

@@ -6,6 +6,10 @@ export default class DSComboboxMultiCO extends PageObject {
   // STORIES
   static basicTest = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'basic-test');
 
+  static loadingTest = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'loading-test');
+
+  static skeletonTest = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'skeleton-test');
+
   static applyAriaDisabled = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'apply-aria-disabled-test');
 
   static readOnly = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'read-only-test');
@@ -29,6 +33,14 @@ export default class DSComboboxMultiCO extends PageObject {
 
   static disabled = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'disabled-test');
 
+  static grouped = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'grouped-test');
+
+  static inlineTest = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'inline-test');
+
+  static withTooltip = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'with-tooltip-test');
+
+  static themeFontURL = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'theme-font-family-test');
+
   static controlledMenuStateWithSectionsSlotsTest = new Urlbuilder(
     PATH_E2E_COMBOBOX_MULTI_SLOTS,
     'controlled-menu-state-with-section-slots-test',
@@ -71,14 +83,6 @@ export default class DSComboboxMultiCO extends PageObject {
     return $$('[data-testid="combobox-input"]')[index];
   }
 
-  static async getComboboxHiddenInput() {
-    return $('input[aria-hidden="true"]');
-  }
-
-  static async getComboboxHiddenInputByIndex(index) {
-    return $$('input[aria-hidden="true"]')[index];
-  }
-
   static async getSelectedValues() {
     return $('[data-testid="combobox-selected-values"]');
   }
@@ -128,6 +132,15 @@ export default class DSComboboxMultiCO extends PageObject {
     return $$('[data-testid="ds-pill-close-icon"]')[index];
   }
 
+  static async getPillsByComboboxIndex(index) {
+    const selectedValues = await this.getSelectedValuesByIndex(index);
+    return selectedValues.$$('[data-testid="ds-pill-wrapper"]');
+  }
+
+  static async getPillCloseBtnByPillLabel(label) {
+    return $(`[data-testid="ds-pill-wrapper"][data-label="${label}"] [data-testid="ds-pill-close-icon"]`);
+  }
+
   // OPTIONS
   static async getOptionByLabel(label) {
     return $(`//li[@data-testid="combobox-option"]//span[contains(text(), "${label}")]/ancestor::li`);
@@ -273,7 +286,7 @@ export default class DSComboboxMultiCO extends PageObject {
   }
 
   static async getComboboxSectionLabelByIndex(index) {
-    return $$('[data-dimsum-slot="dsComboboxSectionLabel"]')[index];
+    return $$('[data-dimsum-parent-slot="dsComboboxSectionLabel"]')[index];
   }
 
   static async getComboboxSectionWrapperSlotByIndex(index) {
@@ -283,4 +296,18 @@ export default class DSComboboxMultiCO extends PageObject {
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DSComboboxMulti', example, 'ds-combobox-multi');
   }
+
+  // The selection wrapper and the selected pills' labels both render through
+  // styled(DSTypography), so the owner slot lands on `data-dimsum-parent-slot`.
+  static async getThemedSelection() {
+    return $('[data-testid="theme-font-sentinel"] [data-dimsum-parent-slot="dsComboboxSelection"]');
+  }
+
+  static async getFallbackSelection() {
+    return $('[data-testid="theme-font-fallback"] [data-dimsum-parent-slot="dsComboboxSelection"]');
+  }
+
+  static async getThemedPillLabel() {
+    return $('[data-testid="theme-font-sentinel"] [data-dimsum-parent-slot="dsPillLabel"]');
+  }
 }

package/ds-form-combobox-multi/aria-busy-loading/DSComboboxMulti.aria-busy-loading.axe-core.func.spec.js

@@ -0,0 +1,55 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+import { axeCoreCheck } from '../../helpers';
+
+// Tests for the fix introduced in PUI-18034
+// (busy listbox with aria-busy + aria-label so screen readers announce the
+// in-progress state via the input's aria-controls linkage; this spec verifies
+// the busy listbox surface passes axe-core).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18471 - ComboboxMulti:: busy listbox while isLoading - axe-core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.loadingTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: busy listbox while isLoading should pass axe-core scan', async () => {
+      const dropdownMenuBtn = await DSComboboxMultiCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const listbox = await DSComboboxMultiCO.getComboListbox();
+      await listbox.waitForExist();
+
+      // `scrollable-region-focusable` is disabled here as a documented false positive:
+      // in the busy/isLoading state the fast-list container is empty, so the region is
+      // not authentically scrollable from a user's perspective — TanStack Virtual leaves
+      // a residual scrollHeight that triggers the rule. The container's tabindex=-1 is a
+      // long-standing Firefox scroll-prevention workaround. The rule remains active for
+      // all other states (open menu with items, read-only, etc.).
+      const result = await axeCoreCheck({ extraDisabledRules: ['scrollable-region-focusable'] });
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-18472 - ComboboxMulti:: busy listbox while isSkeleton - axe-core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.skeletonTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: busy listbox while isSkeleton should pass axe-core scan', async () => {
+      const dropdownMenuBtn = await DSComboboxMultiCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const listbox = await DSComboboxMultiCO.getComboListbox();
+      await listbox.waitForExist();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-form-combobox-multi/aria-busy-loading/DSComboboxMulti.aria-busy-loading.func.spec.js

@@ -0,0 +1,57 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+// Tests for the fix introduced in PUI-18034
+// (carries aria-busy + aria-label on the listbox during loading/skeleton so
+// screen readers announce the in-progress state via the input's aria-controls
+// linkage; replaces the prior racing assertive live region).
+// aria-multiselectable is preserved on the busy listbox.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18447 - ComboboxMulti:: busy listbox while isLoading - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.loadingTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: listbox is aria-busy + aria-multiselectable and aria-controls linked', async () => {
+      const dropdownMenuBtn = await DSComboboxMultiCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const listbox = await DSComboboxMultiCO.getComboListbox();
+      await listbox.waitForExist();
+
+      await expect(listbox).toHaveAttribute('role', 'listbox');
+      await expect(listbox).toHaveAttribute('aria-busy', 'true');
+      await expect(listbox).toHaveAttribute('aria-label', 'Loading options please wait');
+      await expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
+
+      const listboxId = await listbox.getAttribute('id');
+      const input = await DSComboboxMultiCO.getComboboxInput();
+      await expect(input).toHaveAttribute('aria-controls', listboxId);
+    });
+  });
+
+  describe('PUI-18448 - ComboboxMulti:: busy listbox while isSkeleton - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.skeletonTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: listbox is aria-busy + aria-multiselectable with aria-label', async () => {
+      const dropdownMenuBtn = await DSComboboxMultiCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const listbox = await DSComboboxMultiCO.getComboListbox();
+      await listbox.waitForExist();
+
+      await expect(listbox).toHaveAttribute('role', 'listbox');
+      await expect(listbox).toHaveAttribute('aria-busy', 'true');
+      await expect(listbox).toHaveAttribute('aria-label', 'Loading options please wait');
+      await expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
+    });
+  });
+}

package/ds-form-combobox-multi/aria-disabled/DSComboboxMulti.aria-disabled.visual.spec.js

@@ -1,6 +1,7 @@
 /* eslint-disable max-lines */
 import { Key } from 'webdriverio';
 import DSComboboxMultiCO from '../DSComboboxMultiCO';
+import { mouseOver } from '../../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-14364 - ComboboxMulti:: applyAriaDisabled prop - visual', () => {
@@ -10,8 +11,10 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('01: The first aria-disabled combobox should be focused', async () => {
       await browser.eyesOpen();
-      const firstCombobox = await DSComboboxMultiCO.getComboboxByIndex(0);
-      await firstCombobox.click();
+      // the container centre lands on the aria-hidden overlay input, which never focuses the
+      // combobox; the selected-values area is the only pointer target that reliably focuses it
+      const firstComboboxValues = await DSComboboxMultiCO.getSelectedValuesByIndex(0);
+      await firstComboboxValues.click();
       const snapshot = await browser.eyesCheckSnapshot(
         DSComboboxMultiCO.snapshotPath('combobox-multi-aria-disabled-click'),
       );
@@ -43,5 +46,19 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       );
       await expect(snapshot).toEqual(0);
     });
+    // PUI-15476: aria-disabled item text color must change to n600 on hover
+    it('04: listbox with aria-disabled item hovered should display n600 text color', async () => {
+      await browser.eyesOpen();
+      const secondCombobox = await DSComboboxMultiCO.getComboboxWrapperByIndex(1);
+      await secondCombobox.click();
+      const menuList = await DSComboboxMultiCO.getMenuList();
+      await menuList.waitForDisplayed();
+      const ariaDisabledOption = await DSComboboxMultiCO.getOptionByIndex(1);
+      await mouseOver(ariaDisabledOption);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-aria-disabled-item-hovered'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
   });
 }

package/ds-form-combobox-multi/disabled/DSComboboxMulti.disabled.axe-core.func.spec.js

@@ -0,0 +1,24 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+import { axeCoreCheck } from '../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18473 - ComboboxMulti:: disabled - axe-core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: disabled combobox should pass axe-core scan', async () => {
+      const combobox = await DSComboboxMultiCO.getCombobox();
+      await combobox.waitForExist();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-form-combobox-multi/disabled/DSComboboxMulti.disabled.mouse.func.spec.js

@@ -11,10 +11,8 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     it('01: combobox multi disabled should not be focused - clicking Input', async () => {
       const combobox = await DSComboboxMultiCO.getCombobox();
       const input = await DSComboboxMultiCO.getComboboxInput();
-      const hiddenInput = await DSComboboxMultiCO.getComboboxHiddenInput();
       await combobox.click();
       await expect(input).not.toBeFocused();
-      await expect(hiddenInput).not.toBeFocused();
     });
     it('02: listbox should not be displayed when combobox is disabled', async () => {
       await browser.keys(Key.ArrowDown);

package/ds-form-combobox-multi/disabled/DSComboboxMulti.disabled.visual.spec.js

@@ -0,0 +1,22 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+// Tests for the fixes in PUI-15502 (disabled input hint/value + pill font color =
+// neutral-600) and PUI-15578 (dropdown chevron fill = neutral-400 in disabled state).
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18573 - ComboboxMulti:: Disabled -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display disabled combobox with dimmed pill text and chevron', async () => {
+      const combobox = await DSComboboxMultiCO.getCombobox();
+      await combobox.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-disabled-input'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-multi/grouped/DSComboboxMulti.grouped.visual.spec.js

@@ -0,0 +1,42 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+// Tests for the fixes introduced in PUI-15487 (group/section label styled per the
+// b3-strong spec — bold, neutral color, 32px row) and PUI-15473 (menu item idle
+// label color resolves to neutral-700; disabled options fall through to the muted
+// disabledOption color). The open grouped menu surfaces all of these at once.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18571 - ComboboxMulti:: Grouped -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.grouped.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display grouped menu with section labels, idle and disabled option text', async () => {
+      const menuList = await DSComboboxMultiCO.getMenuList();
+      await menuList.waitForDisplayed();
+
+      const sectionLabel = await DSComboboxMultiCO.getComboboxSectionLabelByIndex(0);
+      await sectionLabel.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-grouped-menu'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display grouped menu with a selected option checked', async () => {
+      const option = await DSComboboxMultiCO.getOptionByIndex(0);
+      await option.click();
+
+      // multi select keeps the menu open — the selected option renders its checked
+      // styling in place.
+      const menuList = await DSComboboxMultiCO.getMenuList();
+      await menuList.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-grouped-menu-selected'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-multi/inline/DSComboboxMulti.inline.visual.spec.js

@@ -0,0 +1,21 @@
+/* eslint-disable max-lines */
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // Tests for the fix introduced in PUI-15481 (inline padding 8px top/bottom — was 10px)
+  describe('PUI-18560 - ComboboxMulti:: inline config padding - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.inlineTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: inline combobox should render with the corrected 8px padding', async () => {
+      await browser.eyesOpen();
+      const pillDropdownBtn = await DSComboboxMultiCO.getPillDropDownBtn();
+      await pillDropdownBtn.click();
+      const menuList = await DSComboboxMultiCO.getMenuList();
+      await menuList.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSComboboxMultiCO.snapshotPath('combobox-multi-inline-padding'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-multi/pills/DSComboboxMulti.pills.func.spec.js

@@ -0,0 +1,59 @@
+import { Key } from 'webdriverio';
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+// Reproduces PUI-17870 on the exact surface it was reported on: the SECOND combobox of the
+// `apply-aria-disabled-test` story, whose container is enabled while its two selected values carry
+// per-item state — "Padme Amidala (pill aria-disabled)" (applyAriaDisabled) and
+// "Han Solo (disabled)" (disabled). Both pills stay type `removable`, so their remove button is
+// rendered, and neither must be removable. Fix originally shipped with PUI-17861.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18843 - ComboboxMulti:: per-item disabled and aria-disabled pills - Func', () => {
+    const ARIA_DISABLED_PILL = 'Padme Amidala (pill aria-disabled)';
+    const DISABLED_PILL = 'Han Solo (disabled)';
+
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.applyAriaDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should reflect each per-item state on its own remove button', async () => {
+      const ariaDisabledCloseBtn = await DSComboboxMultiCO.getPillCloseBtnByPillLabel(ARIA_DISABLED_PILL);
+      await ariaDisabledCloseBtn.waitForDisplayed();
+      const disabledCloseBtn = await DSComboboxMultiCO.getPillCloseBtnByPillLabel(DISABLED_PILL);
+      const pills = await DSComboboxMultiCO.getPillsByComboboxIndex(1);
+
+      await expect(pills.length).toEqual(2);
+      await expect(ariaDisabledCloseBtn).toHaveAttribute('aria-disabled', 'true');
+      await expect(ariaDisabledCloseBtn).toBeEnabled();
+      await expect(disabledCloseBtn).toBeDisabled();
+    });
+
+    it('02: should not remove the disabled pill when its remove button is clicked', async () => {
+      const disabledCloseBtn = await DSComboboxMultiCO.getPillCloseBtnByPillLabel(DISABLED_PILL);
+      await disabledCloseBtn.click();
+
+      const pills = await DSComboboxMultiCO.getPillsByComboboxIndex(1);
+      const disabledCloseBtnAfterClick = await DSComboboxMultiCO.getPillCloseBtnByPillLabel(DISABLED_PILL);
+
+      await expect(pills.length).toEqual(2);
+      await expect(disabledCloseBtnAfterClick).toBeExisting();
+    });
+
+    it('03: should not remove the aria-disabled pill when its remove button is clicked', async () => {
+      const ariaDisabledCloseBtn = await DSComboboxMultiCO.getPillCloseBtnByPillLabel(ARIA_DISABLED_PILL);
+      await ariaDisabledCloseBtn.click();
+
+      // The guarded remove handler returns before stopping propagation, so the click reaches the
+      // combobox and opens its menu — expected, the container itself is not disabled.
+      const menuList = await DSComboboxMultiCO.getMenuList();
+      await menuList.waitForDisplayed();
+      await browser.keys(Key.Escape);
+
+      const pills = await DSComboboxMultiCO.getPillsByComboboxIndex(1);
+      const ariaDisabledCloseBtnAfterClick = await DSComboboxMultiCO.getPillCloseBtnByPillLabel(ARIA_DISABLED_PILL);
+
+      await expect(pills.length).toEqual(2);
+      await expect(ariaDisabledCloseBtnAfterClick).toBeExisting();
+    });
+  });
+}

package/ds-form-combobox-multi/pills/DSComboboxMulti.pills.visual.spec.js

@@ -0,0 +1,39 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+import { mouseOver } from '../../helpers';
+
+// Reproduces the visual half of PUI-17870 on the surface it was reported on: the SECOND combobox of
+// the `apply-aria-disabled-test` story, whose container is enabled while its two selected values
+// carry per-item state. Both pills keep their remove button, and neither must paint the hover
+// background nor the brand icon color that an enabled pill does. Fix shipped with PUI-17861.
+// Applitools Eyes is used instead of Percy on purpose: Percy serializes the DOM and re-renders it
+// without a pointer, so a CSS-only `:hover` state would be lost from the snapshot.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18844 - ComboboxMulti:: per-item pill remove button hover - Visual', () => {
+    const ARIA_DISABLED_PILL = 'Padme Amidala (pill aria-disabled)';
+    const DISABLED_PILL = 'Han Solo (disabled)';
+
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.applyAriaDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should keep the aria-disabled pill remove button dimmed with no hover background', async () => {
+      await browser.eyesOpen();
+      const closeBtn = await DSComboboxMultiCO.getPillCloseBtnByPillLabel(ARIA_DISABLED_PILL);
+      await closeBtn.waitForDisplayed();
+      await mouseOver(closeBtn);
+      const snapshotName = 'combobox-multi-pill-remove-hover-aria-disabled';
+      const snapshot = await browser.eyesCheckSnapshot(DSComboboxMultiCO.snapshotPath(snapshotName));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should keep the disabled pill remove button dimmed with no hover background', async () => {
+      await browser.eyesOpen();
+      const closeBtn = await DSComboboxMultiCO.getPillCloseBtnByPillLabel(DISABLED_PILL);
+      await mouseOver(closeBtn);
+      const snapshotName = 'combobox-multi-pill-remove-hover-disabled';
+      const snapshot = await browser.eyesCheckSnapshot(DSComboboxMultiCO.snapshotPath(snapshotName));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-multi/skeleton/DSComboboxMulti.skeleton.visual.spec.js

@@ -0,0 +1,25 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+// Tests for the fix introduced in PUI-15485 (skeleton menu items render with the
+// correct region fill — neutral-080 — and a 1px corner radius per the menu spec).
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18572 - ComboboxMulti:: Skeleton -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.skeletonTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display skeleton menu items with region fill and corner radius', async () => {
+      const dropdownMenuBtn = await DSComboboxMultiCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const skeletonMenuItem = await DSComboboxMultiCO.getComboboxSkeletonMenuItem();
+      await skeletonMenuItem.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-skeleton-menu'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-multi/theme-font/DSComboboxMulti.theme-font.func.spec.js

@@ -0,0 +1,38 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+// Tests the theme-driven font-family mechanism covered by the combobox theming spike PUI-18214
+// (the selection wrapper and the selected pills' labels render through DSTypography, which reads
+// theme.fonts.default, falling back to proxima-nova). Theme-agnostic: uses a sentinel font,
+// never the dsConsumer POC theme values, so it survives any future theme change.
+// Out of scope on purpose: the native <input> that holds typed text mirrors b2 as raw CSS and
+// declares no font-family, so it does NOT follow theme.fonts.default (measured under the sentinel
+// theme it still computes proxima-nova, i.e. the inherited page font, while the selection text
+// switches). Asserting it here would lock in that gap; it is reported separately instead.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18974 - ComboboxMulti:: theme font-family wiring - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.themeFontURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should read selection and pill font-family from theme with proxima-nova fallback', async () => {
+      const themed = await DSComboboxMultiCO.getThemedSelection();
+      await themed.waitForDisplayed();
+      const themedFont = (await themed.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(themedFont).toContain('sentinelfont');
+
+      const themedPill = await DSComboboxMultiCO.getThemedPillLabel();
+      const themedPillFont = (await themedPill.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(themedPillFont).toContain('sentinelfont');
+
+      const fallback = await DSComboboxMultiCO.getFallbackSelection();
+      const fallbackFont = (await fallback.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(fallbackFont).toContain('proxima-nova');
+    });
+  });
+}

package/ds-form-combobox-multi/with-tooltip/DSComboboxMulti.with-tooltip.axe-core.func.spec.js

@@ -0,0 +1,39 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+import DSTooltipV3CO from '../../ds-tooltip-v3/DSTooltipV3CO';
+import { axeCoreCheck, mouseOver } from '../../helpers';
+
+// Remediation for PUI-18660: the accessible path to the truncated values is the DSTooltipV3 wrapping
+// the aria-disabled combobox, so the axe scan must cover the tooltip while it is OPEN (its DOM only
+// exists then) — not just the resting markup.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18814 - ComboboxMulti:: aria-disabled truncated values tooltip - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.withTooltip.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no violations at rest (aria-disabled combobox + describedby wiring)', async () => {
+      const combobox = await DSComboboxMultiCO.getComboboxWrapper();
+      await combobox.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+
+    it('02: should have no violations with the tooltip open over the combobox', async () => {
+      const combobox = await DSComboboxMultiCO.getComboboxWrapper();
+      await mouseOver(combobox);
+
+      const tooltip = await DSTooltipV3CO.getTooltip();
+      await tooltip.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-form-combobox-multi/with-tooltip/DSComboboxMulti.with-tooltip.func.spec.js

@@ -0,0 +1,39 @@
+import { Key } from 'webdriverio';
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+import DSTooltipV3CO from '../../ds-tooltip-v3/DSTooltipV3CO';
+import { mouseOver } from '../../helpers';
+
+// Remediation for PUI-18660: the combobox no longer renders its own truncation tooltip. In an
+// aria-disabled combobox the menu cannot be opened, so the only accessible path to the full,
+// truncated selected values is the consumer-provided DSTooltipV3 wrapping the combobox.
+const FULL_VALUE = 'Luke Skywalker too long this text is super long';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18813 - ComboboxMulti:: aria-disabled truncated values tooltip - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.withTooltip.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should not display the tooltip before hover', async () => {
+      const tooltip = await DSTooltipV3CO.getTooltip();
+      await expect(tooltip).not.toBeDisplayed();
+    });
+
+    it('02: should reveal the full selected values via tooltip on hover', async () => {
+      const combobox = await DSComboboxMultiCO.getComboboxWrapper();
+      await mouseOver(combobox);
+
+      const tooltip = await DSTooltipV3CO.getTooltip();
+      await expect(tooltip).toBeDisplayed();
+      await expect(tooltip).toHaveText(expect.stringContaining(FULL_VALUE));
+    });
+
+    it('03: should hide the tooltip on pressing Escape', async () => {
+      await browser.keys(Key.Escape);
+
+      const tooltip = await DSTooltipV3CO.getTooltip();
+      await expect(tooltip).not.toBeDisplayed();
+    });
+  });
+}