dimsum-e2e-tests 3.70.0-next.45 → 3.70.0-next.47

package/ds-data-table-async/DSDataTableCO.js

@@ -135,6 +135,8 @@ export default class DataTableCO extends PageObject {
 
   static allFiltersV2 = new Urlbuilder(PATH_E2E_DATATABLE_FILTERS_V2, 'all-filters-v-2');
 
+  static pillLabelCustomization = new Urlbuilder(PATH_E2E_DATATABLE_FILTERS_V2, 'pill-label-customization-test');
+
   // ADVANCED
 
   static groupByCol = new Urlbuilder(PATH_E2E_DATATABLE_ADVANCED, 'group-by-column');
@@ -198,6 +200,10 @@ export default class DataTableCO extends PageObject {
     'grouping-with-hidden-and-resizable-columns',
   );
 
+  static resizerSeparatorMode = new Urlbuilder(PATH_E2E_DATATABLE_COLUMN, 'resizer-separator-mode-test');
+
+  static resizerSliderMode = new Urlbuilder(PATH_E2E_DATATABLE_COLUMN, 'resizer-slider-mode-test');
+
   // Text Wrapping
 
   static textWrapTruncColumn = new Urlbuilder(PATH_E2E_DATATABLE_TEXT_WRAPPING, 'text-wrap-truncate-column');

package/ds-data-table-async/components/FilterBarCO.js

@@ -70,6 +70,13 @@ export default class FilterBarCO extends PageObject {
 
   static getPillCloseButtonByIndex = async (index) => getElementByIndex(this.getAllPillCloseButtons, index);
 
+  // Label pill wrapper exposes role="group" + aria-label = the pill label text (pillLabel || Header).
+  static getLabelPillByName = async (name) => $(`[role="group"][aria-label="${name}"]`);
+
+  // SVG icon inside a label pill (found by its accessible name) — asserts a custom pill renderer drew
+  // its own icon. The label pill wrapper is the role="group" element; its descendant <svg> is the icon.
+  static getPillIconByName = async (name) => $(`[role="group"][aria-label="${name}"] svg`);
+
   static async getFilterBarDropDownOption(label) {
     return $(`[role=option][label="${label}"]`);
   }

package/ds-data-table-async/components/HeaderCO.js

@@ -51,7 +51,11 @@ export default class HeaderCO extends PageObject {
 
   static getHeadersWrapper = async () => $('[data-testid="ds-datatable-head-wrapper"]');
 
-  static getResizeHandler = async (index) => $$('[data-testid="column"],[aria-label="Resize column"]')[index];
+  // PUI-17784: resize handle changed from <input type="range" aria-label="Resize column"> to a
+  // <button role="application" aria-labelledby> with dynamic "Resize {column} column" naming; the old
+  // selector never matched data-testid="column" (unverified in d2) and stopped matching aria-label after
+  // that fix.
+  static getResizeHandler = async (index) => $$('[data-testid="ds-datatable-resizer"]')[index];
 
   static getFilterBtnByIndex = async (index) => $$('[data-testid="data-table-filter-menu-button"] button')[index];
 
@@ -60,6 +64,16 @@ export default class HeaderCO extends PageObject {
     return headerCell.$('[data-testid="data-table-sort-button"]');
   };
 
+  // PUI-17786: a11y accessors for the resize handle. Targets the same [data-testid="ds-datatable-resizer"]
+  // as the getResizeHandler selector fix (separate PR); kept distinct so these a11y specs run standalone.
+  static getResizer = async (index) => $$('[data-testid="ds-datatable-resizer"]')[index];
+
+  static getResizerAccessibleName = async (resizer) => {
+    const labelledById = await resizer.getAttribute('aria-labelledby');
+    if (!labelledById) return null;
+    return (await $(`#${labelledById}`)).getProperty('textContent');
+  };
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DataTable', example, 'ds-data-table');

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/resizable/DSDataTable.resizerA11y.axe-core.func.spec.js

@@ -0,0 +1,46 @@
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { HeaderCO } from '../components';
+import { axeCoreCheck } from '../../helpers';
+
+// Axe-core for the resizable-column a11y modes (PUI-17786 / PUI-17784). The resize handle is
+// aria-hidden until its header is "entered" (child-navigation mode), so each test enters the header
+// first to expose the resizer to the accessibility tree before scanning.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18750 - DSDataTable:: resizer separator role a11y - Axe-Core', () => {
+    before(async () => {
+      const errorOnGo = await DSDataTableCO.resizerSeparatorMode.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+
+    it('01: should have no accessibility violations with the separator resizer exposed', async () => {
+      const header = await HeaderCO.getHeaderCellByIndex(1);
+      await header.click();
+      await browser.keys(Key.Return);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-18751 - DSDataTable:: resizer slider role a11y - Axe-Core', () => {
+    before(async () => {
+      const errorOnGo = await DSDataTableCO.resizerSliderMode.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+
+    it('01: should have no accessibility violations with the slider resizer exposed', async () => {
+      const header = await HeaderCO.getHeaderCellByIndex(1);
+      await header.click();
+      await browser.keys(Key.Return);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-data-table-async/resizable/DSDataTable.resizerA11y.func.spec.js

@@ -0,0 +1,108 @@
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { HeaderCO } from '../components';
+
+// Tests for the resizable-column a11y contract from PUI-17786 / PUI-17784.
+// The "50" bug (PUI-15786): the resizer was an <input type="range"> whose default value (50) was
+// announced next to the column name. The fix exposes the handle as role="separator" (default) or
+// role="slider" with a bounded aria-value* set and an accessible name "Resize {Header} column".
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18748 - DSDataTable:: resizer separator role a11y - Func', () => {
+    before(async () => {
+      const errorOnGo = await DSDataTableCO.resizerSeparatorMode.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+
+    it('01: should expose separator role, bounded value and accessible name (no range/"50")', async () => {
+      const resizer = await HeaderCO.getResizer(1);
+      await expect(resizer).toBeExisting();
+      await expect(resizer).toHaveAttribute('role', 'separator');
+      await expect(resizer).toHaveAttribute('aria-orientation', 'vertical');
+      await expect(resizer).toHaveAttribute('aria-valuemin', '70');
+      await expect(resizer).toHaveAttribute('aria-valuemax', '600');
+
+      // Validate the value by SHAPE, not a fixed number: the width is not deterministic across
+      // layouts. The point is that it is a real, bounded width (the fix) and NOT the stray "50"
+      // the old <input type="range"> announced.
+      const valueNow = await resizer.getAttribute('aria-valuenow'); // current width as string, e.g. "150"
+      expect(/^\d+$/.test(valueNow)).toBe(true); // digits only: a real value, not empty/null/"150px"
+      expect(Number(valueNow)).toBeGreaterThanOrEqual(70); // >= aria-valuemin (70): the "50" guard
+      const valueText = await resizer.getAttribute('aria-valuetext'); // SR text, e.g. "150 pixels"
+      expect(/^\d+ pixels$/.test(valueText)).toBe(true); // must read "<width> pixels"
+
+      // Accessible name comes from aria-labelledby, not aria-label (regression guard).
+      expect(await resizer.getAttribute('aria-label')).toBe(null);
+      const name = await HeaderCO.getResizerAccessibleName(resizer);
+      expect(name).toContain('Resize Name column');
+
+      // "50" regression: the handle must not be a native range input.
+      expect((await resizer.getTagName()).toLowerCase()).not.toBe('input');
+      expect(await resizer.getAttribute('type')).not.toBe('range');
+    });
+
+    it('02: should update aria-valuenow when resizing with the keyboard', async () => {
+      const nameHeader = await HeaderCO.getHeaderCellByIndex(1);
+      await nameHeader.click();
+      // Enter on the header focuses its resize handle directly (no drag/filter/sort child to precede it).
+      await browser.keys(Key.Return);
+      const resizer = await HeaderCO.getResizer(1);
+      await expect(resizer).toBeFocused();
+
+      const before = Number(await resizer.getAttribute('aria-valuenow'));
+      await browser.keys(Key.ArrowRight);
+      await browser.waitUntil(async () => Number(await resizer.getAttribute('aria-valuenow')) > before, {
+        timeout: 5000,
+        timeoutMsg: 'aria-valuenow did not increase after ArrowRight',
+      });
+    });
+  });
+
+  describe('PUI-18749 - DSDataTable:: resizer slider role a11y - Func', () => {
+    before(async () => {
+      const errorOnGo = await DSDataTableCO.resizerSliderMode.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+
+    it('01: should expose slider role, horizontal orientation and bounded value', async () => {
+      const resizer = await HeaderCO.getResizer(1);
+      await expect(resizer).toBeExisting();
+      await expect(resizer).toHaveAttribute('role', 'slider');
+      await expect(resizer).toHaveAttribute('aria-orientation', 'horizontal');
+      await expect(resizer).toHaveAttribute('aria-valuemin', '70');
+      await expect(resizer).toHaveAttribute('aria-valuemax', '600');
+
+      // Validate the value by SHAPE, not a fixed number (see separator spec above).
+      const valueNow = await resizer.getAttribute('aria-valuenow'); // current width as string, e.g. "150"
+      expect(/^\d+$/.test(valueNow)).toBe(true); // digits only: a real value, not empty/null/"150px"
+      expect(Number(valueNow)).toBeGreaterThanOrEqual(70); // >= aria-valuemin (70): the "50" guard
+
+      // Accessible name comes from aria-labelledby, not aria-label (regression guard).
+      expect(await resizer.getAttribute('aria-label')).toBe(null);
+      const name = await HeaderCO.getResizerAccessibleName(resizer);
+      expect(name).toContain('Resize Name column');
+    });
+
+    it('02: should update aria-valuenow when resizing with the keyboard', async () => {
+      const nameHeader = await HeaderCO.getHeaderCellByIndex(1);
+      await nameHeader.click();
+      // Enter on the header focuses its resize handle directly (no drag/filter/sort child to precede it).
+      await browser.keys(Key.Return);
+      const resizer = await HeaderCO.getResizer(1);
+      await expect(resizer).toBeFocused();
+
+      const before = Number(await resizer.getAttribute('aria-valuenow'));
+      await browser.keys(Key.ArrowRight);
+      await browser.waitUntil(async () => Number(await resizer.getAttribute('aria-valuenow')) > before, {
+        timeout: 5000,
+        timeoutMsg: 'aria-valuenow did not increase after ArrowRight',
+      });
+    });
+  });
+}

package/ds-form-combobox-single/aria-busy-loading/DSComboboxSingle.aria-busy-loading.axe-core.func.spec.js

@@ -24,7 +24,7 @@ if (
       const listbox = await DSComboboxSingleCO.getComboListbox();
       await listbox.waitForExist();
 
-      const result = await axeCoreCheck();
+      const result = await axeCoreCheck({ extraDisabledRules: ['scrollable-region-focusable'] });
       expect(result.length).toBe(0);
     });
   });

package/ds-form-date-time-picker/DSControlledDateTimePickerCO.js

@@ -281,6 +281,13 @@ export default class DSDateTimePickerCO extends PageObject {
   static getCalendarSelectedFocusedDay = async () =>
     $(`[data-testid="ds-controlled-date-time-picker-calendar-selected-focused-day"]`);
 
+  // Non-current-month day cells only carry the `notCurrentMonth` wrapper class (they share the
+  // generic calendar-day data-testid), so this class is the only distinguishing selector. The grid
+  // renders leading/trailing spillover cells that are hidden, so index 0 is a hidden filler — use
+  // index 1 for the first visible non-current-month day. PUI-14872.
+  static getCalendarNotCurrentMonthDayByIndex = async (index = 0) =>
+    $$(`.notCurrentMonth button[data-testid="ds-controlled-date-time-picker-calendar-day"]`)[index];
+
   // TIMEWHEEL
   static getTimeWheelHeaderLabel = async () =>
     $(`[data-testid="ds-controlled-date-time-picker-timewheel-header-label"]`);

package/ds-form-date-time-picker/date-time-full/DateTimeFull.axe-core.func.spec.js

@@ -1,7 +1,7 @@
 /* eslint-disable prettier/prettier */
 /* eslint-disable max-len */
 /* eslint-disable max-lines */
-import { axeCoreCheck } from '../../helpers';
+import { axeCoreCheck, mouseOver } from '../../helpers';
 import DateTimePickerCO from '../DSControlledDateTimePickerCO';
 
 if (
@@ -21,5 +21,12 @@ if (
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
     });
+    it('02: should pass axe-core color-contrast while hovering a non-current-month day', async () => {
+      const notCurrentMonthDay = await DateTimePickerCO.getCalendarNotCurrentMonthDayByIndex(1);
+      await notCurrentMonthDay.waitForDisplayed();
+      await mouseOver(notCurrentMonthDay);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
   });
 }

package/ds-form-date-time-picker/date-time-full/DateTimePicker.DateTimeFull.visual.spec.js

@@ -45,5 +45,14 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       );
       await expect(snapshot).toEqual(0);
     });
+    it('05: should keep readable contrast when hovering a non-current-month day', async () => {
+      const notCurrentMonthDay = await DateTimePickerCO.getCalendarNotCurrentMonthDayByIndex(1);
+      await notCurrentMonthDay.waitForDisplayed();
+      await mouseOver(notCurrentMonthDay);
+      const snapshot = await browser.checkSnapshot(
+        DateTimePickerCO.snapshotPath('date-time-full-not-current-month-day-hover'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
   });
 }

package/ds-hooks/DSHookCO.js

@@ -1,20 +1,9 @@
 /* eslint-disable import/no-relative-packages */
-import {
-  PATH_HOOKS,
-  PATH_HOOKS_BLUR_OUT,
-  PATH_HOOKS_FIRST_FOCUS_IN,
-  PATH_E2E_HOOKS,
-  PATH_E2E_USE_FONT_SIZE_DETECTOR,
-  PATH_E2E_USE_FONT_SIZE_MEDIA,
-} from '../paths';
+import { PATH_HOOKS, PATH_E2E_HOOKS, PATH_E2E_USE_FONT_SIZE_DETECTOR, PATH_E2E_USE_FONT_SIZE_MEDIA } from '../paths';
 import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
 
 export default class DSHookCO extends PageObject {
   // Desktop
-  static blurOut = new Urlbuilder(PATH_HOOKS_BLUR_OUT, 'basic');
-
-  static firstFocusIn = new Urlbuilder(PATH_HOOKS_FIRST_FOCUS_IN, 'basic');
-
   static specificFocus = new Urlbuilder(PATH_HOOKS, 'use-on-specific-focus');
 
   static useDsTree = new Urlbuilder(PATH_E2E_HOOKS, 'use-ds-tree-test');
@@ -33,16 +22,6 @@ export default class DSHookCO extends PageObject {
 
   static getBtnByIndex = async (index) => getElementByIndex(this.getBtns, index);
 
-  static async getH3s() {
-    return $$('div h3');
-  }
-
-  // mostly used
-  static getInfo = async () => getElementByIndex(this.getH3s, 3);
-
-  // used for first focus in story
-  static getInfo2 = async () => getElementByIndex(this.getH3s, 4);
-
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('Hook', example);

package/ds-menu-button/slots/DSMenuButton.slots.axe-core.func.spec.js

@@ -0,0 +1,28 @@
+import { axeCoreCheck } from '../../helpers';
+import DSMenuButtonCO from '../DSMenuButtonCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-17845 - DSMenuButton:: Slots - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuButtonCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render slots story with custom theme and pass axe-core scan with menu open', async () => {
+      const triggerBtn = await DSMenuButtonCO.getSlotsOpinionatedButtonRoot();
+      await triggerBtn.waitForDisplayed();
+      await triggerBtn.click();
+
+      const flyoutRoot = await DSMenuButtonCO.getSlotsFlyoutMenuRoot();
+      await flyoutRoot.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-menu-button/slots/DSMenuButton.slots.func.spec.js

@@ -36,5 +36,24 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(floatingWrapper).toHaveAttribute('data-testid', 'im dsFlyoutmenuFloatingWrapper data');
       await expect(menuItem).toHaveAttribute('data-testid', 'im dsMenuitemMenuItemWrapper data');
     });
+
+    it('03: should apply per-item attributes from the item-slot function to each menu item', async () => {
+      const firstItem = await DSMenuButtonCO.getSlotsMenuItemWrappers(0);
+      const secondItem = await DSMenuButtonCO.getSlotsMenuItemWrappers(1);
+      const thirdItem = await DSMenuButtonCO.getSlotsMenuItemWrappers(2);
+
+      await expect(firstItem).toHaveAttribute(
+        'data-menu-item-wrapper',
+        'menu item wrapper for item with label Action 1',
+      );
+      await expect(secondItem).toHaveAttribute(
+        'data-menu-item-wrapper',
+        'menu item wrapper for item with label Action 2',
+      );
+      await expect(thirdItem).toHaveAttribute(
+        'data-menu-item-wrapper',
+        'menu item wrapper for item with label Action 3',
+      );
+    });
   });
 }

package/ds-shuttle-v2/explicit-selection-ui/DSShuttleV2.explicit-selection-ui.visual.spec.js

@@ -11,12 +11,15 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
 
     it('01: should display unselected checkboxes and disabled checkboxes on prevented items', async () => {
+      const firstSelectable = await DSShuttleV2CO.getItemWrapper(0); // "Source 0.0" — selectable
+      await firstSelectable.waitForDisplayed();
       const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
 
     it('02: should display checked checkboxes and the BAB after selecting selectable items', async () => {
       const firstSelectable = await DSShuttleV2CO.getItemWrapper(0); // "Source 0.0" — selectable
+      await firstSelectable.waitForDisplayed();
       await firstSelectable.click();
       const secondSelectable = await DSShuttleV2CO.getItemWrapper(2); // "Source 0.2" — selectable
       await secondSelectable.click();