dimsum-e2e-tests 3.62.1 → 3.70.0-alpha.10

package/ds-global-header/toolbar-item-attributes/GlobalHeader.toolbar-item-attributes.func.spec.js

@@ -0,0 +1,53 @@
+import GlobalHeaderCO from '../GlobalHeaderCO';
+
+// Tests for the contract formalised in PUI-18647: item-level global attributes are forwarded to
+// whatever an out-of-the-box toolbar item renders as its root. The typeless (icon button) item
+// already behaved this way before the refactor — this pins the baseline so the widened contract
+// cannot quietly move it.
+//
+// Also guards the `type` discriminator: it routes the item internally and must never reach the DOM,
+// because `type` is a reserved HTML attribute.
+//
+// Chrome only: every assertion is a DOM attribute or a rendered text value, identical in every
+// engine. The `|| 'Chrome'` arm is mandatory — BrowserStack capitalises browserName, and a
+// lowercase-only guard registers zero tests while still exiting 0.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19016 - GlobalHeader:: typeless toolbar item attributes and onClick - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await GlobalHeaderCO.iconButtonItemURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should forward item-level attributes only to the rendered button', async () => {
+      const button = await GlobalHeaderCO.getGHToolbarItem(0);
+      await button.waitForDisplayed();
+
+      // The story wires data-public at item level only, so the button is the single element that may
+      // carry it. Asserting the whole collection rather than just the button is what catches the
+      // attribute leaking onto an ancestor.
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual(['gh-toolbar-item']);
+
+      await expect(button).toHaveAttribute('data-dimsum-slot', 'dsGlobalheaderMenubarItemButton');
+      // The button's own type, not the toolbar item's routing discriminator.
+      await expect(button).toHaveAttribute('type', 'button');
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+    });
+
+    it('02: should forward the item-level onClick handler to the rendered button', async () => {
+      const clickCount = await GlobalHeaderCO.getClickCount();
+      await expect(clickCount).toHaveText('0');
+
+      await (await GlobalHeaderCO.getGHToolbarItem(0)).click();
+
+      await expect(clickCount).toHaveText('1');
+    });
+  });
+}

package/ds-grid/DSGridCO.js

@@ -43,6 +43,8 @@ export default class DSGridCO extends PageObject {
 
   static breakpointsV2 = new Urlbuilder(PATH_E2E_GRID, 'with-breakpoints-v-2-test');
 
+  static layoutMode = new Urlbuilder(PATH_E2E_GRID, 'with-layout-mode-test');
+
   static getUrl(component = 'basic') {
     return PageObject.getUrl(PATH_E2E_GRID, component);
   }
@@ -70,6 +72,24 @@ export default class DSGridCO extends PageObject {
     return $(`//div[text()="Scrollable Body"]`);
   }
 
+  static async getGridByTestId(testId) {
+    return $(`[data-testid="${testId}"]`);
+  }
+
+  // Computed grid-template-columns, e.g. "640px 640px 640px". Returned as a string so callers can
+  //   compare two grids to each other without depending on the resolved px values.
+  static async getResolvedColumns(testId) {
+    const grid = await this.getGridByTestId(testId);
+    await grid.waitForDisplayed();
+    return String((await grid.getCSSProperty('grid-template-columns')).value);
+  }
+
+  // Number of resolved column tracks. This is the only cross-browser-stable signal of which
+  //   breakpoint definition won, and it never asserts px values.
+  static async getResolvedColumnCount(testId) {
+    return (await this.getResolvedColumns(testId)).trim().split(/\s+/).filter(Boolean).length;
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('Grid', example);

package/ds-grid/layout-mode/DSGrid.layout-mode.func.spec.js

@@ -0,0 +1,51 @@
+import DSGridCO from '../DSGridCO';
+
+// Coverage for the withLayoutMode opt-in shipped in PUI-17417: an opted-in Grid collapses its
+// responsive cols/rows/span OBJECT definitions to the single value selected by the ancestor
+// DSLayoutProvider layoutMode instead of the viewport media-query ladder. The feature has no DOM
+// footprint - the only observable effect is the emitted CSS, since the collapsed array takes the
+// Array.isArray branch of manageCols and emits ONE unconditional grid-template-columns. So we
+// assert the resolved column COUNT (whitespace separated tracks of the computed value), never the
+// px values. Chrome only: a computed CSS read is identical across engines.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18978 - DSGrid:: withLayoutMode breakpoint resolution - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.layoutMode.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should resolve cols from the ancestor layoutMode when opted in', async () => {
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-l')).toEqual(3);
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-m')).toEqual(2);
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-s')).toEqual(1);
+    });
+
+    it('02: should honor an explicit xsmall definition, keeping xs distinct from s', async () => {
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-xs-explicit')).toEqual(1);
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-s-explicit')).toEqual(2);
+    });
+
+    it('03: should resolve xs to the small definition when xsmall is not declared', async () => {
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-xs-backfilled')).toEqual(1);
+    });
+
+    it('04: should ignore the ancestor layoutMode when not opted in', async () => {
+      // Width independent invariant: opting out inside a provider must render exactly what the same
+      //   grid renders with no provider at all. The layoutMode path can never satisfy this.
+      const optedOut = await DSGridCO.getResolvedColumns('ds-grid-opt-out-in-provider');
+      const noProvider = await DSGridCO.getResolvedColumns('ds-grid-opt-out-no-provider');
+      await expect(optedOut).toEqual(noProvider);
+
+      // The failure mode being guarded against is the provider mode s leaking in, which is exactly
+      //   1 column. The correct value is whatever the viewport resolves to (3 above 1024px), so we
+      //   assert more than one column rather than pinning a viewport width.
+      const columnCount = await DSGridCO.getResolvedColumnCount('ds-grid-opt-out-in-provider');
+      await expect(columnCount).toBeGreaterThan(1);
+    });
+  });
+}

package/ds-grid/layout-mode/DSGrid.layout-mode.visual.spec.js

@@ -0,0 +1,22 @@
+import DSGridCO from '../DSGridCO';
+
+// Coverage for the withLayoutMode opt-in shipped in PUI-17417. Every grid in the story shares one
+// responsive cols definition and one viewport width, so this single snapshot is the human readable
+// proof that each grid lays out for the DSLayoutProvider mode of the container it lives in - and
+// that the two opted-out grids stay viewport driven.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18979 - DSGrid:: withLayoutMode breakpoint resolution - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.layoutMode.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display each grid laid out for its own LayoutProvider mode', async () => {
+      const firstGrid = await DSGridCO.getGridByTestId('ds-grid-layout-mode-l');
+      await firstGrid.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(DSGridCO.snapshotPath('layout-mode'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-hooks/DSHook.UseFontSizeMedia.visual.spec.js

@@ -7,6 +7,7 @@ describe('PUI-11669 - UseFontSizeMedia:: Basic ', () => {
     if (errorOnGo) throw errorOnGo;
   });
   it('01: should render correctly initial font size values (4 columns)', async () => {
+    await DSHookCO.waitForColumnCount(4);
     const snapshot = await browser.checkSnapshot(DSHookCO.snapshotPath('use-font-size-media-initial-values'));
     await expect(snapshot).toEqual(0);
   });
@@ -15,12 +16,14 @@ describe('PUI-11669 - UseFontSizeMedia:: Basic ', () => {
     !browser.capabilities?.['bstack:options']?.deviceName?.includes('iPad')
   ) {
     it('02: should increase font size correctly (1 column)', async () => {
-      await DSHookCO.increaseFontSize(10);
+      await DSHookCO.setFontSizeForRatio(DSHookCO.FONT_SIZE_RATIOS.large);
+      await DSHookCO.waitForColumnCount(1);
       const snapshot = await browser.checkSnapshot(DSHookCO.snapshotPath('use-font-size-media-increase-size'));
       await expect(snapshot).toEqual(0);
     });
     it('03: should decrease font size correctly (2 columns)', async () => {
-      await DSHookCO.decreaseFontSize(2);
+      await DSHookCO.setFontSizeForRatio(DSHookCO.FONT_SIZE_RATIOS.medium);
+      await DSHookCO.waitForColumnCount(2);
       const snapshot = await browser.checkSnapshot(DSHookCO.snapshotPath('use-font-size-media-decrease-size'));
       await expect(snapshot).toEqual(0);
     });

package/ds-hooks/DSHook.usetree.func.spec.js

@@ -107,8 +107,9 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const drillFirstItemBtn = await DSHookCO.getDrillThisBtnByIndex(0);
       await drillFirstItemBtn.click();
       const drillFirstChildBtn = await DSHookCO.getDrillThisBtnByIndex(0);
-      const isDisabled = await drillFirstChildBtn.getAttribute('aria-disabled');
-      await expect(isDisabled).toBe('true');
+      // Since PUI-17909 DSButtonV2 renders the native `disabled` attribute and intentionally omits
+      // aria-disabled (that is reserved for applyAriaDisabled/readOnly), so assert the native disabled state.
+      await expect(drillFirstChildBtn).toBeDisabled();
     });
   });
 }

package/ds-hooks/DSHookCO.js

@@ -1,20 +1,21 @@
 /* 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 { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+import { PATH_HOOKS, PATH_E2E_HOOKS, PATH_E2E_USE_FONT_SIZE_DETECTOR, PATH_E2E_USE_FONT_SIZE_MEDIA } from '../paths';
+import { PageObject, Urlbuilder, getElementByIndex, setTextSize } from '../helpers';
+
+// useFontSizeDetector reduces the page to a single number:
+//   ratio = floor(documentElement.clientWidth / heightOf(#DS_FONT_DETECTOR))
+// and useFontsizeMedia buckets it against BREAKPOINTS (ds-hooks-fontsize-detector):
+//   ratio <= 30 -> largeFont | 31..40 -> mediumFont | > 40 -> smallFont
+// The ratio depends on the viewport width, which BrowserStack decides per platform,
+// so a hardcoded font size lands in a different bucket on every browser. Aim at the
+// middle of each bucket instead and let setFontSizeForRatio solve for the px.
+const FONT_DETECTOR_SELECTOR = '[data-testid="DS_FONT_DETECTOR"]';
+const FONT_SIZE_RATIOS = { large: 25, medium: 35, small: 50 };
 
 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 FONT_SIZE_RATIOS = FONT_SIZE_RATIOS;
 
+  // Desktop
   static specificFocus = new Urlbuilder(PATH_HOOKS, 'use-on-specific-focus');
 
   static useDsTree = new Urlbuilder(PATH_E2E_HOOKS, 'use-ds-tree-test');
@@ -33,16 +34,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);
@@ -194,5 +185,47 @@ export default class DSHookCO extends PageObject {
     }
   }
 
+  // Solve for the root font size that puts the detector ratio at targetRatio, then
+  // apply it with setTextSize. The line-height factor is measured live instead of
+  // assumed: #DS_FONT_DETECTOR is a `<p>&nbsp;</p>` appended to body, so its height
+  // tracks the root font size by a constant that depends on the stylesheet.
+  static async setFontSizeForRatio(targetRatio) {
+    const fontSize = await browser.execute(
+      (ratio, detectorSelector) => {
+        const root = document.documentElement;
+        const detector = document.querySelector(detectorSelector);
+        if (!detector) return null;
+        const rootFontSize = parseFloat(window.getComputedStyle(root).fontSize);
+        const lineHeightFactor = detector.getBoundingClientRect().height / rootFontSize;
+        return Math.floor(root.clientWidth / (ratio * lineHeightFactor));
+      },
+      targetRatio,
+      FONT_DETECTOR_SELECTOR,
+    );
+    if (!fontSize) throw new Error(`${FONT_DETECTOR_SELECTOR} not found: useFontSizeDetector never mounted`);
+    await setTextSize(fontSize);
+    return fontSize;
+  }
+
   // utils
+
+  static async getResponsiveGrid() {
+    return $('[data-testid="fontsize-media-responsive-grid"]');
+  }
+
+  static async getColumnCount() {
+    const grid = await this.getResponsiveGrid();
+    const { value } = await grid.getCSSProperty('grid-template-columns');
+    return String(value).trim().split(/\s+/).filter(Boolean).length;
+  }
+
+  // The ResizeObserver behind useFontSizeDetector reports the new detector height a
+  // frame after the font size lands, so the grid reflows after setTextSize returns.
+  // Wait for the reflow instead of snapshotting a half-applied layout.
+  static async waitForColumnCount(expected) {
+    await browser.waitUntil(async () => (await this.getColumnCount()) === expected, {
+      timeout: 10000,
+      timeoutMsg: `expected the responsive grid to reflow to ${expected} column(s)`,
+    });
+  }
 }

package/ds-hooks/useFocusStack/DSHook.useFocusStack.func.spec.js

@@ -0,0 +1,83 @@
+/* eslint-disable max-len */
+import { Key } from 'webdriverio';
+import useFocusStackCO from './useFocusStackCO';
+import { tabStops } from '../../helpers';
+import DSPillsV2CO from '../../ds-pills-v2/DSPillsV2CO';
+import DSButtonV3CO from '../../ds-button-v3/DSButtonV3CO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-13147: UseFocusStack for focus return -Func', () => {
+    before(async () => {
+      const errorOnGo = await useFocusStackCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should Tab x4 and have D focused', async () => {
+      await tabStops(4);
+      const typographys = (await useFocusStackCO.getTypographys()).length;
+      const pillD = await DSPillsV2CO.getCloseButtonByIndex(3);
+      // stack holds the three departed elements [C, B, A] -> 1 (h3) + 3
+      await expect(typographys).toEqual(4);
+      await expect(pillD).toBeFocused();
+    });
+
+    it('02: PUI-13301 - should click non-focused C, remove it, and keep focus on D (not B)', async () => {
+      // D is focused; click C (index 2) to remove it. Focus must return to D, the pre-click element.
+      const pillC = await DSPillsV2CO.getCloseButtonByIndex(2);
+      await pillC.click();
+      // C is gone, so the remaining pills are A, B, D, E, F, G -> D is now at index 2.
+      const pillD = await DSPillsV2CO.getCloseButtonByIndex(2);
+      const typographys = (await useFocusStackCO.getTypographys()).length;
+      // removed C does not linger; the stack reads [B, A] -> 1 (h3) + 2
+      await expect(typographys).toEqual(3);
+      await expect(pillD).toBeFocused();
+    });
+
+    it('03: should Tab forward to E, remove it, and return focus to D', async () => {
+      await tabStops(1);
+      const pillE = await DSPillsV2CO.getCloseButtonByIndex(3);
+      await expect(pillE).toBeFocused();
+      // remove the focused pill with the keyboard
+      await browser.keys(Key.Return);
+      // E removed, remaining pills are A, B, D, F, G -> D is at index 2
+      const pillD = await DSPillsV2CO.getCloseButtonByIndex(2);
+      const typographys = (await useFocusStackCO.getTypographys()).length;
+      await expect(typographys).toEqual(3);
+      await expect(pillD).toBeFocused();
+    });
+
+    it('04: should delete back through the stack until focus falls back to Reset', async () => {
+      // remove D (focused) -> B, remove B -> A, remove A -> no survivor left -> fallBackRef (Reset)
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      const reset = await DSButtonV3CO.getButtonByIndex(0);
+      const typographys = (await useFocusStackCO.getTypographys()).length;
+      // stack emptied -> only the h3 remains
+      await expect(typographys).toEqual(1);
+      await expect(reset).toBeFocused();
+    });
+
+    it('05: should click Reset and restore all removable pills', async () => {
+      await browser.keys(Key.Return);
+      const closeButtons = await DSPillsV2CO.getCloseButtons();
+      const typographys = (await useFocusStackCO.getTypographys()).length;
+      await expect(closeButtons).toHaveLength(7);
+      await expect(typographys).toEqual(1);
+    });
+    it('06: should mouse-remove E with an empty stack and fall back focus to Reset', async () => {
+      const pillE = await DSPillsV2CO.getCloseButtonByIndex(4);
+      await pillE.click();
+      const reset = await DSButtonV3CO.getButtonByIndex(0);
+      await expect(reset).toBeFocused();
+      // E is hidden, so 6 removable pills remain.
+      const closeButtons = await DSPillsV2CO.getCloseButtons();
+      await expect(closeButtons).toHaveLength(6);
+    });
+  });
+}

package/ds-hooks/useFocusTrap/UseFocusTrapCO.js

@@ -5,4 +5,6 @@ import { PageObject, Urlbuilder } from '../../helpers';
 export default class UseFocusTrapCO extends PageObject {
   // Desktop
   static basicTest = new Urlbuilder(PATH_E2E_USE_FOCUS_TRAP, 'basic-test');
+
+  static toggleTest = new Urlbuilder(PATH_E2E_USE_FOCUS_TRAP, 'toggle-test');
 }

package/ds-hooks/useFocusTrap/UseFocusTrapToggle.func.spec.js

@@ -0,0 +1,48 @@
+import { Key } from 'webdriverio';
+import UseFocusTrapCO from './UseFocusTrapCO';
+import DSButtonV3CO from '../../ds-button-v3/DSButtonV3CO';
+import DSToggleCO from '../../ds-form-toggle/DSToggleCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18855 - useFocusTrap:: toggle as firstElementRef cycles focus - Func', () => {
+    before(async () => {
+      const errorOnGo = await UseFocusTrapCO.toggleTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should focus the toggle switch on the first tab', async () => {
+      await browser.keys(Key.Tab);
+      const toggle = await DSToggleCO.getToggleFocuseable();
+      await expect(toggle).toBeFocused();
+    });
+
+    it('02: should tab down to the last element of the trap', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const lastElement = await DSButtonV3CO.getButtonByIndex(2);
+      await expect(lastElement).toBeFocused();
+    });
+
+    it('03: should tab on the last element and cycle back to the toggle', async () => {
+      await browser.keys(Key.Tab);
+      const toggle = await DSToggleCO.getToggleFocuseable();
+      await expect(toggle).toBeFocused();
+    });
+
+    it('04: should shift+tab on the toggle and cycle back to the last element', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      const lastElement = await DSButtonV3CO.getButtonByIndex(2);
+      await expect(lastElement).toBeFocused();
+    });
+
+    it('05: should keep the focus trapped over a second full cycle', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const lastElement = await DSButtonV3CO.getButtonByIndex(2);
+      await expect(lastElement).toBeFocused();
+    });
+  });
+}

package/ds-hooks/useMask/Number/UseNumberMask.axe-core.func.spec.js

@@ -0,0 +1,48 @@
+import UseMaskCO from '../useMaskCO';
+import { axeCoreCheck } from '../../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  // Accessibility coverage for the numeric mask stories, added alongside PUI-15648
+  // (critical mask information moved out of the placeholder and into the feedback
+  // message). The package had no axe-core coverage at all before these describes.
+  describe('PUI-18850 - useNumberMask:: Number - AxeCore Test', () => {
+    before(async () => {
+      const errorOnGo = await UseMaskCO.numberURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-18851 - useNumberMask:: Currency - AxeCore Test', () => {
+    before(async () => {
+      const errorOnGo = await UseMaskCO.currencyURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-18852 - useNumberMask:: Percent - AxeCore Test', () => {
+    before(async () => {
+      const errorOnGo = await UseMaskCO.percentURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigationCO.js

@@ -71,11 +71,11 @@ export default class LeftNavCO extends PageObject {
   }
 
   static async getTruncatedText(index) {
-    return $$('[data-testid="DS-SimpleTruncateText"]')[index];
+    return $$('[data-testid="leftnav-list-item-label"]')[index];
   }
 
   static async getTooltip() {
-    return $('[data-testid="popover-container"]');
+    return $('[data-testid="ds-floating-wrapper-root"]');
   }
 
   static async getSubItemBtn() {

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-modal-slide/ModalSlideCO.js

@@ -31,6 +31,10 @@ export default class ModalSlideCO extends PageObject {
 
   static applyAriaDisabledFooterURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'apply-aria-disabled-footer-test');
 
+  static slotsTest = new Urlbuilder(PATH_E2E_MODALSLIDE, 'slots-test');
+
+  static headingLevelURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'heading-level-test');
+
   static async getModalSlide() {
     return $('[data-testid="ds-modal-slide"]');
   }
@@ -95,6 +99,48 @@ export default class ModalSlideCO extends PageObject {
     await browser.pause(500); // pause to allow animation to finish
   }
 
+  // Slots
+  static async getSlotActualContent() {
+    return $('[data-dimsum-slot="dsModalslideActualContent"]');
+  }
+
+  static async getSlotContent() {
+    return $('[data-dimsum-slot="dsModalslideContent"]');
+  }
+
+  static async getSlotContentWrapper() {
+    return $('[data-dimsum-slot="dsModalslideContentWrapper"]');
+  }
+
+  static async getSlotFooterSeparator() {
+    return $('[data-dimsum-slot="dsModalslideFooterSeparator"]');
+  }
+
+  static async getSlotGridContent() {
+    return $('[data-dimsum-slot="dsModalslideGridContent"]');
+  }
+
+  static async getSlotHeaderSeparator() {
+    return $('[data-dimsum-slot="dsModalslideHeaderSeparator"]');
+  }
+
+  static async getSlotOverlay() {
+    return $('[data-dimsum-slot="dsModalslideOverlay"]');
+  }
+
+  static async getSlotRoot() {
+    return $('[data-dimsum-slot="dsModalslideRoot"]');
+  }
+
+  static async getSlotHeader() {
+    return $('[data-dimsum-parent-slot="dsModalslideTitle"]');
+  }
+
+  // Title element — the heading whose tag is driven by the `headingLevel` prop
+  static async getModalTitle() {
+    return $('[data-dimsum-parent-slot="dsModalslideTitle"]');
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('ModalSlide', example, 'ds-modal-slide');

package/ds-modal-slide/custom-header/ModalSlide.customHeader.focusRing.visual.spec.js

@@ -10,7 +10,8 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
 
     it('01: should show consistent focus ring on modal body (5th tab stop)', async () => {
-      await ModalSlideCO.openModalSlide();
+      const trigger = await ModalSlideCO.getOpenModalSlideBtn();
+      await trigger.click();
       // Tab through CustomHeader: backarrow(1) -> breadcrumb items(2,3,4) -> body(5)
       await browser.keys(Key.Tab);
       await browser.keys(Key.Tab);

package/ds-modal-slide/heading-level/ModalSlide.headingLevel.axe-core.func.spec.js

@@ -0,0 +1,25 @@
+// Tests for the feature introduced in PUI-15612 (ModalSlide flexible title heading level).
+// The story models correct usage: an h2 title above h3/h4 content, producing a valid outline.
+import ModalSlideCO from '../ModalSlideCO';
+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-18688 - ModalSlide:: title headingLevel prop - Axe-Core', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.headingLevelURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations with a nested heading hierarchy', async () => {
+      await ModalSlideCO.openModalSlide();
+      await (await ModalSlideCO.getModalTitle()).waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}