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

package/ds-global-header/search-toggle-slots/GlobalHeader.search-toggle-slots.func.spec.js

@@ -0,0 +1,118 @@
+import { Key } from 'webdriverio';
+import GlobalHeaderCO from '../GlobalHeaderCO';
+import { type } from '../../helpers';
+
+// Tests for the ds-search-toggle changes in PUI-18647:
+//
+//  - (NEW) item-level attributes now land on the item's ROOT CONTAINER, not on the trigger button as
+//    with the sibling item types. The type declared that surface on its configuration type and
+//    forwarded none of it, so data-public on a search-toggle entry appeared nowhere.
+//  - (RENAMED) that container's data-testid moved from `ds-global-header-menubar-item-searchtoggle-
+//    container` to `ds-globalheader-menubar-item-searchtoggle-container`. The element itself is
+//    unchanged; commit 295f110651c dropped its legacy override in constants/index.ts, so the
+//    auto-generated post-convention value now wins. Asserted as the DOM currently renders it — if
+//    the legacy override is restored, this expectation flips back to the hyphenated spelling.
+//  - (BREAKING) the two spinbutton result-navigation identifiers were INVERTED: the control that
+//    triggered NEXT was slotted as PREVIOUS and vice versa. The accessible names were always right,
+//    so testid and accessible name now agree. This is the one breaking change for QA here.
+//  - (FIX) Escape was handled twice — on the input and again on the container it bubbles to — so one
+//    press collapsed twice and called onClear three times. It now fires once.
+//
+// Chrome only: attribute assertions plus click-to-state-change, both engine-independent. The
+// `|| 'Chrome'` arm is mandatory (BrowserStack capitalises browserName; a lowercase-only guard
+// registers zero tests and still exits 0).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19019 - GlobalHeader:: search-toggle item slots and result controls - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await GlobalHeaderCO.searchToggleSlotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should forward item-level attributes to the new item container while collapsed', async () => {
+      const container = await GlobalHeaderCO.getSearchToggleContainer();
+      await container.waitForDisplayed();
+      await expect(container).toHaveAttribute('data-dimsum-slot', 'dsGlobalheaderMenubarItemSearchtoggleContainer');
+
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual(['ds-globalheader-menubar-item-searchtoggle-container', 'gh-toolbar-item']);
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+    });
+
+    it('02: should expose the full search-toggle slot surface once expanded', async () => {
+      await (await GlobalHeaderCO.getGHToolbarItem(0)).click();
+      await (await GlobalHeaderCO.getSearchToggleInput()).waitForDisplayed();
+
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual([
+        'ds-globalheader-menubar-item-searchtoggle-container',
+        'gh-toolbar-item',
+        'ds-globalheader-searchtoggle-expanded-content-wrapper',
+        'ds-globalheader-searchtoggle-textinput',
+        'ds-globalheader-searchtoggle-spinbutton-wrapper',
+        'ds-globalheader-searchtoggle-spinbutton-text',
+        'ds-globalheader-searchtoggle-spinbutton-separator',
+        'ds-globalheader-searchtoggle-spinbutton-next',
+        'ds-globalheader-searchtoggle-spinbutton-prev',
+      ]);
+    });
+
+    it('03: should match each spinbutton data-testid to its accessible name', async () => {
+      // The un-inversion. Note the DOM order is next-then-prev, which is what made the original
+      // swap easy to miss — so identity is read off the accessible name, never off position.
+      await expect(await GlobalHeaderCO.getSearchTogglePrevButton()).toHaveAttribute(
+        'aria-label',
+        'Previous search result',
+      );
+      await expect(await GlobalHeaderCO.getSearchToggleNextButton()).toHaveAttribute(
+        'aria-label',
+        'Next search result',
+      );
+    });
+
+    it('04: should navigate results forward with next and backward with prev', async () => {
+      const input = await GlobalHeaderCO.getSearchToggleInput();
+      await input.click();
+      await type('L');
+
+      const spinbuttonText = await GlobalHeaderCO.getSearchToggleSpinbutton();
+      await browser.waitUntil(async () => (await spinbuttonText.getText()) === '4', {
+        timeout: 3000,
+        timeoutMsg: 'search results did not populate after typing',
+      });
+
+      // Four rows match "L"; the first hit is row 0 and the last is row 4.
+      await (await GlobalHeaderCO.getSearchToggleNextButton()).click();
+      await expect(spinbuttonText).toHaveText('1 / 4');
+      const firstMatch = await GlobalHeaderCO.getSearchableRowByIndex(0);
+      await expect(await GlobalHeaderCO.isRowHighlighted(firstMatch)).toBe(true);
+
+      // Prev from the first result wraps to the last, proving the control moves backward.
+      await (await GlobalHeaderCO.getSearchTogglePrevButton()).click();
+      await expect(spinbuttonText).toHaveText('4 / 4');
+      const lastMatch = await GlobalHeaderCO.getSearchableRowByIndex(4);
+      await expect(await GlobalHeaderCO.isRowHighlighted(lastMatch)).toBe(true);
+    });
+
+    it('05: should collapse, clear and return focus on a single Escape', async () => {
+      await (await GlobalHeaderCO.getSearchToggleInput()).click();
+      await browser.keys(Key.Escape);
+
+      await expect(await GlobalHeaderCO.getSearchToggleInput()).not.toBeDisplayed();
+      await expect(await GlobalHeaderCO.getGHToolbarItem(0)).toBeFocused();
+
+      // Collapsing clears the query, so the highlight is gone and the reachable surface is back to
+      // the two collapsed-state nodes.
+      const lastMatch = await GlobalHeaderCO.getSearchableRowByIndex(4);
+      await expect(await GlobalHeaderCO.isRowHighlighted(lastMatch)).toBe(false);
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual(['ds-globalheader-menubar-item-searchtoggle-container', 'gh-toolbar-item']);
+    });
+  });
+}

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-menu-button/DSMenuButtonCO.js

@@ -21,6 +21,8 @@ export default class DSMenuButtonCO extends PageObject {
 
   static skeletonMenuItem = new Urlbuilder(PATH_E2E_MENU_BUTTON, 'skeleton-menu-item-test');
 
+  static slotsTest = new Urlbuilder(PATH_E2E_MENU_BUTTON, 'slots-test');
+
   // UseCases (E2E simplified versions)
   static cardExample = new Urlbuilder(PATH_MENU_BUTTON_USECASES, 'card-example-test');
 
@@ -85,6 +87,27 @@ export default class DSMenuButtonCO extends PageObject {
     return $(`${item} div span`);
   }
 
+  // Slots test selectors (by data-dimsum-slot)
+  static async getSlotsOpinionatedButtonRoot() {
+    return $('[data-dimsum-parent-slot="dsOpinionatedbuttonRoot"');
+  }
+
+  static async getSlotsFloatingWrapper() {
+    return $('[data-dimsum-parent-slot="dsFlyoutmenuFloatingWrapper"');
+  }
+
+  static async getSlotsFlyoutMenuRoot() {
+    return $('[data-dimsum-slot="dsFlyoutmenuRoot"]');
+  }
+
+  static async getSlotsListWrapper() {
+    return $('[data-dimsum-slot="dsFlyoutmenuListWrapper"]');
+  }
+
+  static async getSlotsMenuItemWrappers(index = 0) {
+    return $$('[data-dimsum-slot="dsMenuitemMenuItemWrapper"]')[index];
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DSMenuItems', example, 'ds-menu-items');