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

package/ds-data-table-async/filter-menu-close/DSDataTable.filter-menu-close.func.spec.js

@@ -0,0 +1,77 @@
+import DSDataTableCO from '../DSDataTableCO';
+import { HeaderCO, FiltersCO } from '../components';
+
+// Tests for the fix introduced in PUI-18785 (an open per-column filter menu did not close when the
+// user clicked that column's header cell, grabbed its drag-and-drop handle, or grabbed its resize
+// handle — the filter popover's floating reference is the whole header cell, so the click-outside
+// detection never saw any of those interactions as "outside", and the menu could be dragged around
+// the table while open).
+//
+// The SortByColumn story is the repro combination named in the defect: per-column filters +
+// dragAndDropColumns + isResizeable on the same table.
+//
+// The target is the Country column: it is filterable but canSort is false, so a header click has
+// only the filter to close and never also triggers a sort — the assertions stay about the menu and
+// nothing else. That also makes FiltersCO.openFilterPopperByColumnName safe to use here even though
+// it clicks the header cell to reveal the affordance; hovering instead is not portable, because in
+// Safari the filter button stays aria-hidden/tabindex="-1" and never becomes interactable.
+//
+// Deviation from the ticket, asserted deliberately: PUI-18785's Expected Results asked that a
+// column "should not be draggable while its filter menu is open". The shipped fix instead closes
+// the menu and lets the same single gesture continue into the drag/resize, so these tests assert
+// that shipped behavior — the menu closes, and the interaction is not swallowed just to close it.
+const COUNTRY_COLUMN = 'country';
+const COUNTRY_COLUMN_INDEX = 3;
+
+const openCountryFilterMenu = async () => {
+  await FiltersCO.openFilterPopperByColumnName(COUNTRY_COLUMN);
+  await expect(await FiltersCO.getFilterMenuContent()).toBeDisplayed();
+};
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18887 - DSDataTable:: filter menu closes on header, drag and resize - Func', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSDataTableCO.sortByColumn.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+
+    it('01: clicking the column header closes an open filter menu and keeps the trigger', async () => {
+      await openCountryFilterMenu();
+
+      const countryHeader = await HeaderCO.getHeaderCellByText(COUNTRY_COLUMN);
+      await countryHeader.click();
+
+      await expect(await FiltersCO.getFilterMenuContent()).not.toBeDisplayed();
+      // Closing the menu must not take its own trigger with it. An over-broad fix that removed the
+      // whole filter affordance would still satisfy the assertion above, so the trigger is checked
+      // explicitly. Existence rather than visibility: the filter button is toggled with display:none
+      // by the header's own affordance logic, so a visibility assertion would be testing that
+      // unrelated hover/active state instead of the fix.
+      const filterBtn = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(countryHeader, 0);
+      await expect(filterBtn).toBeExisting();
+    });
+
+    it('02: activating the column drag handle closes an open filter menu', async () => {
+      await openCountryFilterMenu();
+
+      const countryHeader = await HeaderCO.getHeaderCellByText(COUNTRY_COLUMN);
+      const dragHandle = await HeaderCO.getHeaderCellDragHandler(countryHeader);
+      await dragHandle.click();
+
+      await expect(await FiltersCO.getFilterMenuContent()).not.toBeDisplayed();
+    });
+
+    it('03: grabbing the column resize handle closes an open filter menu', async () => {
+      await openCountryFilterMenu();
+
+      // A real press-move-release on the 4px handle, which is what fires onResizeStart. Asserting
+      // the resize itself is out of scope here — that is PUI-18764's job; this test only proves the
+      // press reaches the resizer and closes the menu.
+      const resizer = await HeaderCO.getResizeHandler(COUNTRY_COLUMN_INDEX);
+      await resizer.dragAndDrop({ x: 30, y: 0 });
+
+      await expect(await FiltersCO.getFilterMenuContent()).not.toBeDisplayed();
+    });
+  });
+}

package/ds-data-table-async/filter-popover-boundary/DSDataTable.filter-popover-boundary.func.spec.js

@@ -0,0 +1,98 @@
+import DSDataTableCO from '../DSDataTableCO';
+import { FiltersCO } from '../components';
+
+// Tests for the fix introduced in PUI-17187 (the filter trigger lives inside DataTable's own
+// horizontally-scrollable container, but the popover only clipped against the browser viewport, so
+// once its column scrolled near the table's edge the popover kept tracking the trigger's raw screen
+// position and spilled out over the rest of the page). The fix passes the scroll container as
+// ds-floating-context's boundaryElement, which clamps the popover to the table and hides it — without
+// closing it — once the trigger is fully scrolled away.
+//
+// The Pui17136FilterWidthCollapse story is the repro named in the defect: a 400px-wide table with
+// colsLayoutStyle="fixed" and nine filterable columns, so there is real horizontal overflow.
+//
+// The Name column is targeted rather than the ticket's Number range column: it sits near the left
+// edge, so scrolling right drives it against the table's OWN left edge, which is the geometry the
+// fix is about, and it is reachable without scrolling first. Both columns exercise the same
+// boundaryElement math.
+const TARGET_COLUMN = 'name';
+
+// The popover repositions on a debounce, so every geometry assertion polls rather than sampling once.
+const SETTLE_TIMEOUT = 5000;
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18888 - DSDataTable:: filter popover clamped to the table on horizontal scroll - Func', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSDataTableCO.filterWidthCollapse.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+      await FiltersCO.openFilterPopperByColumnName(TARGET_COLUMN);
+      await expect(await FiltersCO.getFilterMenuContent()).toBeDisplayed();
+    });
+
+    it('01: should keep the popover inside the table bounds while its column is clipped', async () => {
+      const geometry = await DSDataTableCO.getColumnScrollGeometry(TARGET_COLUMN);
+      expect(geometry).not.toBe(null);
+
+      // Leave a 20px sliver of the column visible at the scrollport's left edge: the trigger is
+      // partially clipped by the table itself, which is exactly the PUI-17187 repro state.
+      const partiallyClipped = Math.min(geometry.colRight - 20, geometry.maxScrollLeft);
+      expect(partiallyClipped).toBeGreaterThan(0);
+      await DSDataTableCO.setScrollableContainerScrollLeft(partiallyClipped);
+
+      await browser.waitUntil(
+        async () => {
+          const rects = await DSDataTableCO.getFilterPopoverBoundaryRects();
+          if (!rects) return false;
+          // 1px of tolerance for sub-pixel layout rounding.
+          return rects.popoverLeft >= rects.containerLeft - 1 && rects.popoverRight <= rects.containerRight + 1;
+        },
+        {
+          timeout: SETTLE_TIMEOUT,
+          timeoutMsg: 'filter popover was not clamped inside the table scrollport after horizontal scroll',
+        },
+      );
+    });
+
+    it('02: should hide the popover without closing it once its column scrolls out of view', async () => {
+      const geometry = await DSDataTableCO.getColumnScrollGeometry(TARGET_COLUMN);
+      expect(geometry).not.toBe(null);
+
+      // Precondition, asserted rather than assumed: the table must be able to scroll far enough to
+      // push the column past its left edge. If it cannot, clamping to maxScrollLeft would leave the
+      // column visible and the hide assertion below would fail with a misleading message.
+      expect(geometry.maxScrollLeft).toBeGreaterThan(geometry.colRight);
+      await DSDataTableCO.setScrollableContainerScrollLeft(geometry.colRight + 1);
+
+      await browser.waitUntil(
+        async () => {
+          const rects = await DSDataTableCO.getFilterPopoverBoundaryRects();
+          return Boolean(rects) && rects.opacity === '0' && rects.pointerEvents === 'none';
+        },
+        {
+          timeout: SETTLE_TIMEOUT,
+          timeoutMsg: 'filter popover was not hidden after its column scrolled out of view',
+        },
+      );
+
+      // Hidden, not closed: the popover is still mounted, so scrolling back restores it instead of
+      // the user having to reopen the filter. getFilterPopoverBoundaryRects returning a value at all
+      // already proves the node is in the DOM; assert it explicitly so the intent is not implicit.
+      await expect(await FiltersCO.getFilterMenuContent()).toBeExisting();
+
+      await DSDataTableCO.setScrollableContainerScrollLeft(0);
+
+      await browser.waitUntil(
+        async () => {
+          const rects = await DSDataTableCO.getFilterPopoverBoundaryRects();
+          return Boolean(rects) && rects.opacity === '1' && rects.pointerEvents === 'auto';
+        },
+        {
+          timeout: SETTLE_TIMEOUT,
+          timeoutMsg: 'filter popover did not reappear after scrolling its column back into view',
+        },
+      );
+      await expect(await FiltersCO.getFilterMenuContent()).toBeDisplayed();
+    });
+  });
+}

package/ds-data-table-async/filters/DSDataTable.filters-creatable-active-descendant.func.spec.js

@@ -0,0 +1,51 @@
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { FiltersCO } from '../components';
+import { type } from '../../helpers';
+
+// Tests for the fix introduced in PUI-15735. The Name column derives its filter options from the
+// *filtered* data, so a value created in the filter is dropped from the options on the next render;
+// getFirstOption() used to focus it anyway, leaving aria-activedescendant pointing at a dead id.
+const describeActiveDescendant = ({ activeDescendant, optionIds }) => {
+  if (activeDescendant === null) return 'input-missing';
+  if (activeDescendant === '') return 'none';
+  return optionIds.includes(activeDescendant) ? 'rendered-option' : `orphan:${activeDescendant}`;
+};
+
+const VALID_ACTIVE_DESCENDANT = /^(none|rendered-option)$/;
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18882 - DSDataTable:: creatable filter aria-activedescendant validity - Func', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filteredCreatable.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: reopening the filter after an Enter-created option keeps the id valid', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name');
+      await type('Juan');
+      await browser.keys(Key.Enter);
+      // Reopening is the regression path for the getFirstOption() half: it runs when the menu
+      // mounts, and by then the created value is gone from the Name column's derived options.
+      await FiltersCO.openFilterPopperByColumnName('name');
+      const state = await DSDataTableCO.getFilterActiveDescendantState();
+      await expect(describeActiveDescendant(state)).toMatch(VALID_ACTIVE_DESCENDANT);
+    });
+    it('02: creating an option by mouse click clears the stale focus target', async () => {
+      // The multi-select creatable column, not the single-select one: selecting in a single-select
+      // filter closes the popper, leaving no input to read, and reopening would let the
+      // getFirstOption() guard mask this half of the fix. Multi-select keeps the menu open, so the
+      // assertion lands on the state handleOnCreateClick's setFocusOptionIdx('') is responsible for.
+      await FiltersCO.openFilterPopperByColumnName('position');
+      await type('Zulu dev');
+      await (await FiltersCO.getFilterMultiSelectMenuItem(0)).click();
+      const state = await DSDataTableCO.getFilterActiveDescendantState();
+      await expect(describeActiveDescendant(state)).toMatch(VALID_ACTIVE_DESCENDANT);
+    });
+  });
+}

package/ds-data-table-async/filters/DSDataTable.filters-creatable.func.spec.js

@@ -4,8 +4,13 @@ import { Key } from 'webdriverio';
 import DSDataTableCO from '../DSDataTableCO';
 import { FilterBarCO, FiltersCO, RowCO } from '../components';
 import { type } from '../../helpers';
+import { getInputSelection } from '../helpers';
 import DSComboboxCO from '../../ds-controlled-form/ds-combobox/DSComboboxCO';
 
+// A value the Name column's data never contains, so only the creatable affordance is listed and
+// the input keeps the full string for the caret/selection assertions.
+const TYPED_FILTER_TEXT = 'aloha';
+
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-9203 - DataTable, Filter, Creatable single select filter', () => {
     before('loading page', async () => {
@@ -114,4 +119,54 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(newOption).toEqual('New option');
     });
   });
+  // Tests for the fix introduced in PUI-15851 (a wrapper-level mousedown preventDefault() in the
+  // combobox's `inline` mode suppressed the browser's native caret placement and word selection,
+  // and a second click on the focused input blurred it, clearing the value and closing the menu).
+  //
+  // PUI-15851 was reopened and moved to 27.2: the fix traded away click-to-close on the combobox
+  // control (PUI-18919), a behavior ratified in PUI-15737 / PUI-15753 and encoded as QA acceptance
+  // criteria in PUI-15741 / PUI-15748. Until that interaction is redefined, the expectations below
+  // are not a stable contract, so this describe is describe.skip'd and PUI-18881 is back to a
+  // non-automated state.
+  //
+  // The rollback is PR #8307 (fix/PUI-18919, open against next as of 27.1). It reverts #8233
+  // wholesale: the wrapper-level mousedown preventDefault() is restored for clicks on the input,
+  // as is the hidden-span width measurement and the click handler that blurs the input on a second
+  // click. So once it merges all three cases below go red, not just case 03 — the caret and
+  // word-selection behavior they assert stops existing again. That is why the whole describe is
+  // skipped rather than case 03 alone. The cases are kept in tree rather than deleted because 01
+  // and 02 are not the disputed part and should be the starting point for the 27.2 coverage; only
+  // 03 (a second click keeps the value, focus and open menu) has to be re-written, once 27.2
+  // settles what a pointer click on the filter search input should do.
+  describe.skip('PUI-18881 - DSDataTable:: filter search input mouse caret and selection - Func', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filteredCreatable.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+      await FiltersCO.openFilterPopperByColumnName('name');
+      await type(TYPED_FILTER_TEXT);
+    });
+    it('01: clicking near the left edge moves the caret off the end of the text', async () => {
+      const input = await FiltersCO.getFilterSingleSelectInput();
+      // WDIO click offsets are relative to the element centre, so walk back to ~2px from the left
+      // edge instead of hardcoding a pixel — stays correct if padding or width changes.
+      const { width } = await input.getSize();
+      await input.click({ x: -Math.floor(width / 2) + 2, y: 0 });
+      const { start } = await getInputSelection(input);
+      await expect(start).toBeLessThan(TYPED_FILTER_TEXT.length);
+    });
+    it('02: double-clicking selects the word under the cursor', async () => {
+      const input = await FiltersCO.getFilterSingleSelectInput();
+      await input.doubleClick();
+      const { start, end } = await getInputSelection(input);
+      await expect(end - start).toBeGreaterThan(0);
+    });
+    it('03: a second click on the focused input keeps the value, focus and open menu', async () => {
+      const input = await FiltersCO.getFilterSingleSelectInput();
+      await input.click();
+      await expect(input).toHaveValue(TYPED_FILTER_TEXT);
+      await expect(input).toBeFocused();
+      await expect(await FiltersCO.getFilterSingleSelectPopper()).toBeDisplayed();
+    });
+  });
 }

package/ds-data-table-async/filters/DSDataTable.filters.axe-core.func.spec.js

@@ -76,22 +76,24 @@ if (
       await expect(result.length).toBe(0);
     });
   });
-  // unskip this test after PUI-15735 is fixed
-  describe.skip('PUI-11443 - DataTable, Creatable single select filter - focus after clear input - AxeCore', () => {
-    before('loading page', async () => {
+  // Tests for the fix introduced in PUI-15735 (aria-activedescendant pointed at an id no longer
+  // present in the rendered options after creating and selecting a filter option, tripping axe's
+  // aria-valid-attr-value). Repaired and unskipped under its own pre-existing ticket, PUI-11443.
+  // Only the Enter path is scanned: both create paths converge on the same DOM, and axe asserts a
+  // DOM state. Per-path precision lives in DSDataTable.filters-creatable-active-descendant.
+  describe('PUI-11443 - DSDataTable:: aria validity when creating a filter option - AxeCore', () => {
+    beforeEach('loading page', async () => {
       const errorOnGo = await DSDataTableCO.filteredCreatable.go();
       if (errorOnGo) throw errorOnGo;
       await DSDataTableCO.waitForDataTable();
-    });
-    it('01: should open the popup and generate a creatable option and pass axe-core scan', async () => {
-      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await FiltersCO.openFilterPopperByColumnName('name');
       await type('Juan');
+    });
+    it('01: the creatable affordance shown while typing passes an axe-core scan', async () => {
       const result = await axeCoreCheck();
       await expect(result.length).toBe(0);
     });
-    it('02: should open generate and accept creatable option and pass axe-core scan', async () => {
-      await FiltersCO.openFilterPopperByColumnName('name', 0);
-      await type('Juan');
+    it('02: creating and selecting the option with Enter passes an axe-core scan', async () => {
       await browser.keys(Key.Enter);
       const result = await axeCoreCheck();
       await expect(result.length).toBe(0);

package/ds-data-table-async/filtersV2/DSDataTable.filtersV2-creatablemultiselect.keyboard.func.spec.js

@@ -5,7 +5,7 @@ import { FiltersCO } from '../components';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   // Forward keyboard navigation
-  describe('PUI-XXXXX - DataTable:: Filters V2 - Creatable Multi Select, forward keyboard navigation', () => {
+  describe('PUI-18203 - DataTable:: Filters V2 - Creatable Multi Select, forward keyboard navigation', () => {
     before('loading page', async () => {
       const errorOnGo = await DSDataTableCO.creatableMultiSelectFilterV2.go();
       if (errorOnGo) throw errorOnGo;
@@ -38,7 +38,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
   });
 
   // Backward keyboard navigation
-  describe('PUI-XXXXX - DataTable:: Filters V2 - Creatable Multi Select, backward keyboard navigation', () => {
+  describe('PUI-18204 - DataTable:: Filters V2 - Creatable Multi Select, backward keyboard navigation', () => {
     before('loading page', async () => {
       const errorOnGo = await DSDataTableCO.creatableMultiSelectFilterV2.go();
       if (errorOnGo) throw errorOnGo;

package/ds-data-table-async/filtersV2/DSDataTable.filtersV2-creatableselect.keyboard.func.spec.js

@@ -5,7 +5,7 @@ import { FiltersCO } from '../components';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   // Forward keyboard navigation
-  describe('PUI-XXXXX - DataTable:: Filters V2 - Creatable Select, forward keyboard navigation', () => {
+  describe('PUI-18201 - DataTable:: Filters V2 - Creatable Select, forward keyboard navigation', () => {
     before('loading page', async () => {
       const errorOnGo = await DSDataTableCO.creatableSelectFilterV2.go();
       if (errorOnGo) throw errorOnGo;
@@ -38,7 +38,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
   });
 
   // Backward keyboard navigation
-  describe('PUI-XXXXX - DataTable:: Filters V2 - Creatable Select, backward keyboard navigation', () => {
+  describe('PUI-18202 - DataTable:: Filters V2 - Creatable Select, backward keyboard navigation', () => {
     before('loading page', async () => {
       const errorOnGo = await DSDataTableCO.creatableSelectFilterV2.go();
       if (errorOnGo) throw errorOnGo;

package/ds-data-table-async/filtersV2/DSDataTable.filtersV2.axe-core.func.spec.js

@@ -1,37 +1,53 @@
 import DSDataTableCO from '../DSDataTableCO';
-import { FiltersCO } from '../components';
+import { FilterBarCO, FiltersCO } from '../components';
 import { axeCoreCheck } from '../../helpers';
 
-if (browser.capabilities.browserName === 'chrome') {
-  if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
-    describe('PUI-18108 - DataTable:: Filters V2 - All Filter Types - Axe-Core', () => {
-      before(async () => {
-        const errorOnGo = await DSDataTableCO.allFiltersV2.go();
-        if (errorOnGo) throw errorOnGo;
-        await DSDataTableCO.waitForDataTable();
-      });
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18108 - DataTable:: Filters V2 - All Filter Types - Axe-Core', () => {
+    before(async () => {
+      const errorOnGo = await DSDataTableCO.allFiltersV2.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
 
-      it('01: should have no accessibility violations in default state', async () => {
-        const result = await axeCoreCheck();
-        expect(result.length).toBe(0);
-      });
+    it('01: should have no accessibility violations in default state', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
 
-      it('02: should have no accessibility violations with filter popper open', async () => {
-        await FiltersCO.openFilterPopperByColumnName('id');
-        const footer = await FiltersCO.getFilterFooter();
-        await footer.waitForDisplayed();
-        const result = await axeCoreCheck();
-        expect(result.length).toBe(0);
-      });
+    it('02: should have no accessibility violations with filter popper open', async () => {
+      await FiltersCO.openFilterPopperByColumnName('id');
+      const footer = await FiltersCO.getFilterFooter();
+      await footer.waitForDisplayed();
+      // `scrollable-region-focusable` is a documented axe-core false positive for the filter
+      // popper option list: it reuses the DS combobox listbox (TanStack Virtual + container
+      // tabindex=-1 Firefox scroll workaround), leaving a residual scrollHeight. The options are
+      // fully keyboard-operable through the combobox widget model, so WCAG 2.1.1 is satisfied.
+      // Same disposition as the ds-combobox axe specs; dev team confirmed no real a11y issue.
+      const result = await axeCoreCheck({ extraDisabledRules: ['scrollable-region-focusable'] });
+      expect(result.length).toBe(0);
+    });
 
-      it('03: should have no accessibility violations with applied filter and pills', async () => {
-        const menuItem = await FiltersCO.getFilterSingleSelectMenuItem(0);
-        await menuItem.click();
-        const applyBtn = await FiltersCO.getFilterApplyButton();
-        await applyBtn.click();
-        const result = await axeCoreCheck();
-        expect(result.length).toBe(0);
-      });
+    it('03: should have no accessibility violations with applied filter and pills', async () => {
+      // Self-contained: re-open the single-select ('id') popper (openFilterPopperByColumnName
+      // clicks the header cell first, resetting any leftover popper state), pick an option and
+      // apply so a pill renders, then scan.
+      await FiltersCO.openFilterPopperByColumnName('id');
+      const footer = await FiltersCO.getFilterFooter();
+      await footer.waitForDisplayed();
+      const menuItem = await FiltersCO.getFilterSingleSelectMenuItem(0);
+      await menuItem.click();
+      const applyBtn = await FiltersCO.getFilterApplyButton();
+      await applyBtn.click();
+      const pills = await FilterBarCO.getAllPills();
+      await expect(pills.length).toBeGreaterThan(0);
+      const result = await axeCoreCheck({ extraDisabledRules: ['scrollable-region-focusable'] });
+      expect(result.length).toBe(0);
     });
-  }
+  });
 }

package/ds-data-table-async/filtersV2/pill-label/DSDataTable.pillLabel.axe-core.func.spec.js

@@ -0,0 +1,23 @@
+import DSDataTableCO from '../../DSDataTableCO';
+import { axeCoreCheck } from '../../../helpers';
+
+// Tests for column.pillLabel added in PUI-8318 (custom pill labels must not introduce a11y violations)
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18727 - DSDataTable:: custom filter pill label - Axe-Core', () => {
+    before(async () => {
+      const errorOnGo = await DSDataTableCO.pillLabelCustomization.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+
+    it('01: should have no accessibility violations with custom and default pill labels', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-data-table-async/filtersV2/pill-label/DSDataTable.pillLabel.func.spec.js

@@ -0,0 +1,50 @@
+import DSDataTableCO from '../../DSDataTableCO';
+import { FilterBarCO } from '../../components';
+
+// Tests for column.pillLabel added in PUI-8318 (overrides Header as filter pill label + remove aria-label)
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18726 - DSDataTable:: custom filter pill label - Func', () => {
+    before(async () => {
+      const errorOnGo = await DSDataTableCO.pillLabelCustomization.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+
+    it('01: should use pillLabel over Header on the OOTB pill label and remove aria-labels', async () => {
+      const roleLabel = await FilterBarCO.getLabelPillByName('Role');
+      await expect(roleLabel).toBeDisplayed();
+
+      const removeReact = await FilterBarCO.getPillCloseButtonByName('Remove React dev from Role');
+      await expect(removeReact).toBeExisting();
+
+      const removeFullstack = await FilterBarCO.getPillCloseButtonByName('Remove Fullstack dev from Role');
+      await expect(removeFullstack).toBeExisting();
+    });
+
+    it('02: should fall back to Header when the column has no pillLabel', async () => {
+      const nameLabel = await FilterBarCO.getLabelPillByName('Name');
+      await expect(nameLabel).toBeDisplayed();
+
+      const removeAlice = await FilterBarCO.getPillCloseButtonByName('Remove Alice from Name');
+      await expect(removeAlice).toBeExisting();
+    });
+
+    it('03: should render a fully custom pill (columnHeader + icon) via customPillRenderers', async () => {
+      const compensationLabel = await FilterBarCO.getLabelPillByName('Compensation');
+      await expect(compensationLabel).toBeDisplayed();
+
+      // Custom renderer draws its own icon — proves customPillRenderers replaces the OOTB pill content.
+      const customIcon = await FilterBarCO.getPillIconByName('Compensation');
+      await expect(customIcon).toBeExisting();
+
+      const removeAriaLabel = 'Remove 10000.00 - 90000.00 from Compensation';
+      const removeCompensation = await FilterBarCO.getPillCloseButtonByName(removeAriaLabel);
+      await expect(removeCompensation).toBeExisting();
+    });
+  });
+}

package/ds-data-table-async/filtersV2/pill-label/DSDataTable.pillLabel.visual.spec.js

@@ -0,0 +1,21 @@
+/* eslint-disable wdio/no-pause */
+import DSDataTableCO from '../../DSDataTableCO';
+
+// Visual coverage for PUI-8318 filter pill customizations: the composable filter bar renders the
+// OOTB pills (Role via pillLabel, Name via Header fallback) alongside a fully custom pill
+// (Compensation) with a custom icon and a custom color, produced through customPillRenderers.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18747 - DSDataTable:: custom filter pill rendering - Visual', () => {
+    before(async () => {
+      const errorOnGo = await DSDataTableCO.pillLabelCustomization.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+
+    it('01: should render OOTB and custom pills (icon + color) in the composable filter bar', async () => {
+      await browser.pause(300);
+      const snapshot = await browser.percyCheckScreenshot(DSDataTableCO.snapshotPath('pill-label-custom-pills'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-data-table-async/header-affordances/DSDataTable.header-affordances.func.spec.js

@@ -0,0 +1,92 @@
+import { mouseOver } from '../../helpers';
+import DSDataTableCO from '../DSDataTableCO';
+import { HeaderCO, RowCO } from '../components';
+
+// Coverage for PUI-15154 (fixed): the column-header affordances — DnD drag handle, neutral sort
+// caret and filter icon — stayed visibly stuck after focus/hover left the header (null-vs-null
+// false match in the onBlur guard; missing resetAllHeadersExcept between columns). They must only
+// show while the header has focus or hover. jsdom can't move real focus or hover, so this is
+// verified in a real browser here (the shipped unit test fakes it with synthetic relatedTarget).
+//
+// SortByColumn columns: id(0) name(1, actively sorted) position(2) country(3) salary(4) date(5).
+// position = drag handle + neutral sort caret + filter icon; date = the reported-bug column
+// (drag handle + neutral sort caret, no filter). All columns are draggable.
+const POSITION_COL = 2;
+const DATE_COL = 5;
+
+const expectAffordances = async (colIndex, shown, hasFilter) => {
+  const cell = await HeaderCO.getHeaderCellByIndex(colIndex);
+  const dragHandle = await HeaderCO.getHeaderCellDragHandler(cell);
+  const sortCaret = await HeaderCO.getSortBtnByIndex(colIndex);
+  if (shown) {
+    await expect(dragHandle).toBeExisting();
+    await expect(sortCaret).toBeDisplayed();
+    if (hasFilter) await expect(await HeaderCO.getFilterButtonInHeader(colIndex)).toBeDisplayed();
+  } else {
+    await expect(dragHandle).not.toBeExisting();
+    await expect(sortCaret).not.toBeDisplayed();
+    if (hasFilter) await expect(await HeaderCO.getFilterButtonInHeader(colIndex)).not.toBeDisplayed();
+  }
+};
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18778 - DSDataTable:: header affordance visibility on focus and hover - Func', () => {
+    before(async () => {
+      const errorOnGo = await DSDataTableCO.sortByColumn.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+
+    it('01: focusing a column header shows its drag handle, sort caret and filter icon', async () => {
+      // Focus programmatically: the header cell has onClick=handleSort, so clicking it would also
+      // sort the column, and an actively-sorted column's caret then stays visible regardless of
+      // focus — masking the hide-on-blur behavior under test. Focusing fires onFocus without sorting.
+      await browser.execute((el) => el.focus(), await HeaderCO.getHeaderCellByIndex(POSITION_COL));
+      await expectAffordances(POSITION_COL, true, true);
+    });
+
+    it('02: clicking another column drag handle hides the first column drag handle', async () => {
+      // Marcos #2 (handle-to-handle): reveal + click column A's drag handle, then column B's.
+      // Focusing B's handle clears A via resetAllHeadersExcept, so A's handle no longer stays stuck.
+      const positionHeader = await HeaderCO.getHeaderCellByIndex(POSITION_COL);
+      await mouseOver(positionHeader);
+      const positionHandle = await HeaderCO.getHeaderCellDragHandler(positionHeader);
+      await positionHandle.waitForDisplayed({ timeout: 3000 });
+      await positionHandle.click();
+
+      const dateHeader = await HeaderCO.getHeaderCellByIndex(DATE_COL);
+      await mouseOver(dateHeader);
+      const dateHandle = await HeaderCO.getHeaderCellDragHandler(dateHeader);
+      await dateHandle.waitForDisplayed({ timeout: 3000 });
+      await dateHandle.click();
+
+      // Column A's (position) drag handle is gone; column B's (date) handle is present.
+      const positionCell = await HeaderCO.getHeaderCellByIndex(POSITION_COL);
+      await expect(await HeaderCO.getHeaderCellDragHandler(positionCell)).not.toBeExisting();
+      const dateCell = await HeaderCO.getHeaderCellByIndex(DATE_COL);
+      await expect(await HeaderCO.getHeaderCellDragHandler(dateCell)).toBeExisting();
+    });
+
+    it('03: blurring focus away entirely hides the affordances', async () => {
+      // Reported bug: focus leaves with nowhere to land. Ensure the pointer is off any header (so
+      // hover isn't keeping the column visible), then drop focus. onBlur fires with relatedTarget
+      // null and, since date has no filter, filterIconRef is null too: the null-vs-null false match
+      // that used to skip the reset (PUI-15154) must no longer keep the affordances stuck visible.
+      await mouseOver(await RowCO.getRowByIndex(3));
+      await browser.execute(() => {
+        if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
+      });
+      await expectAffordances(DATE_COL, false, false);
+    });
+
+    it('04: hovering a column header shows its drag handle, sort caret and filter icon', async () => {
+      await mouseOver(await HeaderCO.getHeaderCellByIndex(POSITION_COL));
+      await expectAffordances(POSITION_COL, true, true);
+    });
+
+    it('05: moving the mouse away from the header hides the affordances', async () => {
+      await mouseOver(await RowCO.getRowByIndex(3));
+      await expectAffordances(POSITION_COL, false, true);
+    });
+  });
+}