dimsum-e2e-tests 3.80.0-next.3 → 3.80.0-next.30

package/ds-progress-indicator/aria-contract/DSProgressIndicator.aria-contract.func.spec.js

@@ -0,0 +1,104 @@
+import DSProgressIndicatorCO from '../DSProgressIndicatorCO';
+
+// Coverage for the accessibility remediation shipped in PUI-18856 (PR #8353):
+//   PUI-18671 the progressbar used to carry a hardcoded aria-label="progress bar". It is now named
+//             by the visible title through aria-labelledby, and that string survives only as the
+//             fallback for an untitled indicator.
+//   PUI-18673 aria-valuetext now mirrors whatever the visible counter renders, default or custom.
+//   PUI-18675 each segment accepts a `label` that becomes its own accessible name. Only the Dimsum
+//             half of that defect is assertable here; the visible non-colour alternative is the
+//             consumer's, see stories/docs/principles/a11y/tradesoff.
+//   PUI-18672 an invalid `max` no longer produces width: NaN% and an inverted ARIA range. `max` was
+//             deliberately NOT made required (KNOWN_INTENTIONAL_DEVIATIONS.md, deviation 6), so what
+//             is asserted below is the shipped fail-safe: an indeterminate progressbar.
+//
+// Every assertion is a DOM attribute, which is identical across engines, so this runs Chrome only.
+// The `|| 'Chrome'` branch is mandatory: BrowserStack reports the capitalised name and a
+// lowercase-only guard would register 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-19209 - DSProgressIndicator:: progressbar ARIA contract - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSProgressIndicatorCO.ariaContractURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should name the progressbar from the visible title and fall back when untitled', async () => {
+      const titled = await DSProgressIndicatorCO.getProgress('titled-case');
+      await titled.waitForDisplayed();
+      await expect(titled).not.toHaveAttribute('aria-label');
+
+      // The id is generated with React.useId(), so it is resolved at runtime rather than hardcoded.
+      const labelledBy = await titled.getAttribute('aria-labelledby');
+      const title = await DSProgressIndicatorCO.getTitle('titled-case');
+      await expect(await title.getAttribute('id')).toEqual(labelledBy);
+      await expect(await DSProgressIndicatorCO.getByIdAttribute(labelledBy)).toHaveText('Uploading documents');
+
+      const titleless = await DSProgressIndicatorCO.getProgress('titleless-case');
+      await expect(titleless).toHaveAttribute('aria-label', 'progress bar');
+      await expect(titleless).not.toHaveAttribute('aria-labelledby');
+    });
+
+    it('02: should mirror the visible counter in aria-valuetext for default and custom renderers', async () => {
+      const defaultCounter = await DSProgressIndicatorCO.getCounter('titled-case');
+      await expect(defaultCounter).toHaveText('50 of 100');
+      const defaultBar = await DSProgressIndicatorCO.getProgress('titled-case');
+      await expect(defaultBar).toHaveAttribute('aria-valuetext', '50 of 100');
+
+      const customCounter = await DSProgressIndicatorCO.getCounter('custom-counter-case');
+      await expect(customCounter).toHaveText('3 files remaining');
+      const customBar = await DSProgressIndicatorCO.getProgress('custom-counter-case');
+      await expect(customBar).toHaveAttribute('aria-valuetext', '3 files remaining');
+    });
+
+    it('03: should give each labelled segment its own accessible name', async () => {
+      const labelled = await DSProgressIndicatorCO.getProgressBars('labelled-segments-case');
+      await expect(labelled).toBeElementsArrayOfSize(2);
+
+      // A segment label wins over the indicator title, so aria-labelledby is dropped entirely.
+      await expect(labelled[0]).toHaveAttribute('aria-label', 'Approved documents');
+      await expect(labelled[0]).not.toHaveAttribute('aria-labelledby');
+      await expect(labelled[1]).toHaveAttribute('aria-label', 'Rejected documents');
+      await expect(labelled[1]).not.toHaveAttribute('aria-labelledby');
+
+      // Each segment reports its own range rather than the aggregate shown by the counter.
+      await expect(labelled[0]).toHaveAttribute('aria-valuetext', '50 of 100');
+      await expect(labelled[1]).toHaveAttribute('aria-valuetext', '100 of 200');
+
+      // An unlabelled segment still falls back to the indicator title.
+      const mixed = await DSProgressIndicatorCO.getProgressBars('mixed-segments-case');
+      await expect(mixed).toBeElementsArrayOfSize(2);
+      await expect(mixed[0]).toHaveAttribute('aria-label', 'Completed');
+      await expect(mixed[1]).not.toHaveAttribute('aria-label');
+      const fallbackId = await mixed[1].getAttribute('aria-labelledby');
+      await expect(await DSProgressIndicatorCO.getByIdAttribute(fallbackId)).toHaveText('Batch upload');
+    });
+
+    it('04: should render indeterminate for an invalid max and clamp an overflowing value', async () => {
+      const expectIndeterminate = async (caseId) => {
+        const bar = await DSProgressIndicatorCO.getProgress(caseId);
+        await expect(bar).toHaveAttribute('role', 'progressbar');
+        await expect(bar).not.toHaveAttribute('aria-valuenow');
+        await expect(bar).not.toHaveAttribute('aria-valuemin');
+        await expect(bar).not.toHaveAttribute('aria-valuemax');
+        await expect(bar).not.toHaveAttribute('aria-valuetext');
+        // The pre-fix behaviour was width: NaN%; the guard now yields a valid zero-length fill.
+        await expect(await bar.getAttribute('style')).toContain('width: 0%');
+        // The indicator is still named, so the invalid range degrades without losing the label.
+        await expect(bar).toHaveAttribute('aria-labelledby');
+      };
+
+      await expectIndeterminate('omitted-max-case');
+      await expectIndeterminate('zero-max-case');
+
+      const overflow = await DSProgressIndicatorCO.getProgress('overflow-case');
+      await expect(overflow).toHaveAttribute('aria-valuenow', '100');
+      await expect(overflow).toHaveAttribute('aria-valuemax', '100');
+      await expect(await overflow.getAttribute('style')).toContain('width: 100%');
+    });
+  });
+}

package/ds-progress-indicator/slots/DSProgressIndicator.slots.axe-core.func.spec.js

@@ -0,0 +1,31 @@
+import DSProgressIndicatorCO from '../DSProgressIndicatorCO';
+import { axeCoreCheck } from '../../helpers';
+
+// SlotsTest is the only ProgressIndicator story that overrides color/backgroundColor, so it is the
+// one place where the test code itself can introduce a contrast regression. This run is what makes
+// the WCAG 2 AA pairs in the story load-bearing rather than advisory. It also guards the
+// consumer-supplied slot aria-label against colliding with the component's own naming.
+//
+// Chrome only: axe-core results do not vary by engine. The `|| 'Chrome'` branch is mandatory,
+// BrowserStack reports the capitalised name and a lowercase-only guard registers zero tests.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19212 - DSProgressIndicator:: slot theming - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSProgressIndicatorCO.slotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations with custom slot theming', async () => {
+      const root = await DSProgressIndicatorCO.getSlot('dsProgressindicatorRoot', 'segmented-slots-case');
+      await root.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-progress-indicator/slots/DSProgressIndicator.slots.func.spec.js

@@ -0,0 +1,87 @@
+import DSProgressIndicatorCO from '../DSProgressIndicatorCO';
+
+// Slot contract coverage for the compliance migration in PUI-18856 / PUI-18941. The package dropped
+// ds-classnames/aggregatedClasses for the native slot system, so each visual element must now be
+// addressable through data-dimsum-slot and must accept consumer slot props.
+//
+// The consumer's `data-testid` REPLACES the component default, which is why this spec addresses the
+// elements through data-dimsum-slot and then asserts the overridden testid, rather than the other
+// way round.
+//
+// Slot attribute pass-through is engine-independent, so this runs Chrome only. The `|| 'Chrome'`
+// branch is mandatory: BrowserStack reports the capitalised name and a lowercase-only guard would
+// register 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-19210 - DSProgressIndicator:: slot contract and slot prop forwarding - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSProgressIndicatorCO.slotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should expose the five slots on both the single and the segmented indicator', async () => {
+      const expectFiveSlots = async (caseId) => {
+        const [root, title, counter, progressBar, progress] = await Promise.all([
+          DSProgressIndicatorCO.getSlot('dsProgressindicatorRoot', caseId),
+          DSProgressIndicatorCO.getSlot('dsProgressindicatorTitle', caseId),
+          DSProgressIndicatorCO.getSlot('dsProgressindicatorCounter', caseId),
+          DSProgressIndicatorCO.getSlot('dsProgressindicatorProgressBar', caseId),
+          DSProgressIndicatorCO.getSlot('dsProgressindicatorProgress', caseId),
+        ]);
+
+        await root.waitForDisplayed();
+        await expect(root).toHaveAttribute('data-testid', 'custom-root-data');
+        await expect(title).toHaveAttribute('data-testid', 'custom-title-data');
+        await expect(counter).toHaveAttribute('data-testid', 'custom-counter-data');
+        await expect(progressBar).toHaveAttribute('data-testid', 'custom-progress-bar-data');
+        await expect(progress).toHaveAttribute('data-testid', 'custom-progress-data');
+      };
+
+      await expectFiveSlots('single-slots-case');
+      await expectFiveSlots('segmented-slots-case');
+    });
+
+    it('02: should forward consumer slot props to every slot and to each segment', async () => {
+      const [title, counter, progress] = await Promise.all([
+        DSProgressIndicatorCO.getSlot('dsProgressindicatorTitle', 'single-slots-case'),
+        DSProgressIndicatorCO.getSlot('dsProgressindicatorCounter', 'single-slots-case'),
+        DSProgressIndicatorCO.getSlot('dsProgressindicatorProgress', 'single-slots-case'),
+      ]);
+
+      await expect(title).toHaveAttribute('lang', 'en');
+      await expect(counter).toHaveAttribute('title', 'custom counter title');
+
+      // The progress slot carries role="progressbar", so a slot-level aria-label is legal there and
+      // is forwarded. It does not become the accessible name though: the component also emits its
+      // own aria-labelledby pointing at the title, and aria-labelledby outranks aria-label. Chrome's
+      // accessibility tree names these bars after their title, not "custom progress aria".
+      //
+      // That is the intended outcome, not a gap. Keeping the name tied to the visible title is the
+      // WCAG 2.5.3 Label in Name principle, and localisation is handled by passing a translated
+      // `title` rather than by overriding the label. The slot-level aria-label only takes effect on
+      // a titleless indicator, where the component would otherwise fall back to "progress bar".
+      // Asserting both attributes here pins the forwarding contract without implying the override
+      // wins the name.
+      await expect(progress).toHaveAttribute('role', 'progressbar');
+      await expect(progress).toHaveAttribute('aria-label', 'custom progress aria');
+      await expect(progress).toHaveAttribute('aria-labelledby');
+
+      // Slot props must reach every segment, not just the first one. The segments are addressed by
+      // index rather than with .map(): WebdriverIO's element array overrides .map() to return a
+      // Promise, so Promise.all(segments.map(...)) throws "object is not iterable".
+      const segments = await DSProgressIndicatorCO.getSlots('dsProgressindicatorProgress', 'segmented-slots-case');
+      await expect(segments).toBeElementsArrayOfSize(3);
+
+      await expect(segments[0]).toHaveAttribute('data-testid', 'custom-progress-data');
+      await expect(segments[0]).toHaveAttribute('aria-label', 'custom progress aria');
+      await expect(segments[1]).toHaveAttribute('data-testid', 'custom-progress-data');
+      await expect(segments[1]).toHaveAttribute('aria-label', 'custom progress aria');
+      await expect(segments[2]).toHaveAttribute('data-testid', 'custom-progress-data');
+      await expect(segments[2]).toHaveAttribute('aria-label', 'custom progress aria');
+    });
+  });
+}

package/ds-progress-indicator/slots/DSProgressIndicator.slots.visual.spec.js

@@ -0,0 +1,27 @@
+import DSProgressIndicatorCO from '../DSProgressIndicatorCO';
+
+// Visual half of the PUI-18856 slot migration: proves the styleOverrides payload actually reaches
+// each slot after the move off ds-classnames. The functional spec covers the attribute contract, so
+// this only needs the rendered appearance.
+//
+// This snapshot also guards the cascade fix for the `progress-bar` slot: its styleOverride used to lose to
+// the retained SCSS rule `.em-ds-determinate-progress-indicator .em-ds-progress-bar` (two classes beat the
+// single styled-components class) and the track stayed grey. The package now re-emits every slot override
+// that a legacy descendant rule could beat under `&&&`, so all five slots take their overrides here. jsdom
+// does not honour specificity, so this real-browser snapshot is the only place the cascade itself is proven.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-19211 - DSProgressIndicator:: slot theming - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSProgressIndicatorCO.slotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display the single and segmented indicators with slot theming applied', async () => {
+      const root = await DSProgressIndicatorCO.getSlot('dsProgressindicatorRoot', 'segmented-slots-case');
+      await root.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-slider-v2/DSSliderV2.axe-core.func.spec.js

@@ -118,4 +118,25 @@ if (
       expect(result.length).toBe(0);
     });
   });
+
+  // Tests for the hasError state introduced in PUI-18434 (spec v1.5.0 Error row).
+  describe('PUI-19224 - DSSliderV2:: hasError state - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSliderV2CO.hasErrorURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display idle error sliders and pass axe-core scan', async () => {
+      const slider = await DSSliderV2CO.getSliderRootByIndex();
+      await slider.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should display focused error slider handle and pass axe-core scan', async () => {
+      await browser.keys(Key.Tab);
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await expect(thumb).toBeFocused();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
 }

package/ds-slider-v2/DSSliderV2.visual.spec.js

@@ -1,6 +1,6 @@
 import { Key } from 'webdriverio';
 import DSSliderV2CO from './DSSliderV2CO';
-import { setTextSize } from '../helpers';
+import { mouseOver, setTextSize } from '../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-12332 - SliderV2 - Disabled - Visual Test', () => {
@@ -15,6 +15,14 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const snapshot = await browser.eyesCheckSnapshot(DSSliderV2CO.snapshotPath('slider-v2-disabled'));
       await expect(snapshot).toEqual(0);
     });
+    it('02: should display disabled single slider handle hovered', async () => {
+      // Spec v1.5.0 "Disabled + Hover": only the cursor changes (not-allowed). The snapshot guards that
+      // no hover tint or background change reappears on the handle or the track (PUI-18434).
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await mouseOver(thumb);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
   });
   describe('PUI-14389 - SliderV2 - applyAriaDisabled - Visual Test', () => {
     before('loading page', async () => {
@@ -36,6 +44,16 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const snapshot = await browser.eyesCheckSnapshot(DSSliderV2CO.snapshotPath('slider-v2-aria-disabled-kb-nav'));
       await expect(snapshot).toEqual(0);
     });
+    it('03: should display aria-disabled single slider handle hovered, not focused', async () => {
+      // Spec v1.5.0 "Aria-Disabled + Hover": only the cursor changes. Before PUI-18434 the handle background
+      // turned N-050 on hover; the snapshot guards against that regression. 01/02 left a handle focused and
+      // the story has three focusable handles, so the focus is released explicitly first.
+      await browser.execute(() => document.activeElement && document.activeElement.blur());
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await mouseOver(thumb);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
   });
 
   describe('PUI-12333 - SliderV2 - Custom tick marks values - Visual Test', () => {

package/ds-slider-v2/DSSliderV2CO.js

@@ -33,6 +33,10 @@ export default class DSSliderCO extends PageObject {
 
   static applyAriaDisabledURL = new Urlbuilder(PATH_E2E_SLIDER_V2, 'apply-aria-disabled-test');
 
+  static hasErrorURL = new Urlbuilder(PATH_E2E_SLIDER_V2, 'has-error-test');
+
+  static interactionStatesURL = new Urlbuilder(PATH_E2E_SLIDER_V2, 'interaction-states-test');
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('Slider', example);
@@ -129,7 +133,8 @@ export default class DSSliderCO extends PageObject {
   }
 
   static async getSliderTickMarkValueSlot(index = 0) {
-    return $$('[data-dimsum-slot="dsSliderv2TickMarkValue"]')[index];
+    // Nested slot since 3.80.0-next: the slot name lives on data-dimsum-parent-slot (see PUI-18434)
+    return $$('[data-dimsum-parent-slot="dsSliderv2TickMarkValue"]')[index];
   }
 
   static async getSliderRangeWrapperSlot(index = 0) {

package/ds-slider-v2/has-error/DSSliderV2.has-error.visual.spec.js

@@ -0,0 +1,44 @@
+import DSSliderV2CO from '../DSSliderV2CO';
+import { mouseOver, tabStops } from '../../helpers';
+
+// Where the pointer rests when a snapshot must NOT include a hover state.
+const PARKED_X = 500;
+const PARKED_Y = 400;
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // Tests for the hasError state introduced in PUI-18434 (spec v1.5.0 Error row): active track E-900,
+  // inactive track E-200, handle border 2px solid E-900, handle background N-000.
+  describe('PUI-19223 - DSSliderV2:: hasError state - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSliderV2CO.hasErrorURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display idle error single and range sliders, mouse parked', async () => {
+      const slider = await DSSliderV2CO.getSliderRootByIndex(0);
+      await slider.waitForDisplayed();
+      await mouseOver(null, PARKED_X, PARKED_Y);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display error single slider handle hovered', async () => {
+      // Spec v1.5.0 defines no Error + Hover row. Current behavior: the error tokens stay as they are.
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await mouseOver(thumb);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('03: should display error single slider handle focused, not hovered', async () => {
+      // Spec v1.5.0 defines no Error + Focus row. Current behavior: the handle border switches to the
+      // focus token (B-800) while both track segments keep the error tokens.
+      await mouseOver(null, PARKED_X, PARKED_Y);
+      await tabStops(1);
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await expect(thumb).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-slider-v2/interaction-states/DSSliderV2.interaction-states.visual.spec.js

@@ -0,0 +1,53 @@
+import DSSliderV2CO from '../DSSliderV2CO';
+import { mouseOver, tabStops } from '../../helpers';
+
+// Where the pointer rests when a snapshot must NOT include a hover state.
+const PARKED_X = 500;
+const PARKED_Y = 400;
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // Tests for the spec v1.5.0 alignment introduced in PUI-18434: hover and focus tint the handle border
+  // AND the active track segment together (idle B-600 -> hover B-700 -> focus B-800), focus renders no
+  // outline. The story starts mid-range so the active segment is long enough for the tint to be visible.
+  describe('PUI-19222 - DSSliderV2:: handle and track hover and focus states - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSSliderV2CO.interactionStatesURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display idle single and range sliders, mouse parked', async () => {
+      const slider = await DSSliderV2CO.getSliderRootByIndex(0);
+      await slider.waitForDisplayed();
+      await mouseOver(null, PARKED_X, PARKED_Y);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display single slider handle hovered', async () => {
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await mouseOver(thumb);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('03: should display range slider min handle hovered', async () => {
+      // The handle and the track are shared between single and range mode, so the hover tint must also
+      // apply to the range slider (PUI-18434 scope note).
+      const thumb = await DSSliderV2CO.getSliderThumb(1);
+      await mouseOver(thumb);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    // Focus is reached through Tab on purpose. PUI-19226: in range mode a mouse click on a handle does not
+    // focus it, so the focus tokens can only be captured via keyboard until that defect is fixed.
+    it('04: should display single slider handle focused, not hovered', async () => {
+      await mouseOver(null, PARKED_X, PARKED_Y);
+      await tabStops(1);
+      const thumb = await DSSliderV2CO.getSliderThumb(0);
+      await expect(thumb).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-virtuallist/DSVirtualList.visual.spec.js

@@ -10,13 +10,13 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const addChildrenBtn = await DSVirtualListCO.getAdd1Btn();
       await addChildrenBtn.click();
       await addChildrenBtn.click();
-      const snapshot = await browser.checkSnapshot(DSVirtualListCO.snapshotPath('vlist-2children'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
     it('should add content to a children and display properly', async () => {
       const addContentBtn = await DSVirtualListCO.getChangeTimeBtn();
       await addContentBtn.click();
-      const snapshot = await browser.checkSnapshot(DSVirtualListCO.snapshotPath('vlist-1content'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
     it('should add a children and content to that children and display properly', async () => {
@@ -24,7 +24,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await addChildrenBtn.click();
       const addContentBtn = await DSVirtualListCO.getChangeTimeBtn();
       await addContentBtn.click();
-      const snapshot = await browser.checkSnapshot(DSVirtualListCO.snapshotPath('vlist-2content'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });
@@ -34,10 +34,9 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should display a virtual list with customization correctly', async () => {
-      await browser.eyesOpen();
       const virtualListContainer = await DSVirtualListCO.getVirtualListContainer();
       await virtualListContainer.waitForDisplayed();
-      const snapshot = await browser.eyesCheckSnapshot(DSVirtualListCO.snapshotPath('virtual-list-customization'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-virtuallist/DSVirtualListCO.js

@@ -1,12 +1,12 @@
-import { PATH_VIRTUALLIST, PATH_E2E_VIRTUAL_LIST, PATH_E2E_CUSTOMIZATION_SUPPORT } from '../paths';
+import { PATH_E2E_VIRTUAL_LIST, PATH_E2E_CUSTOMIZATION_SUPPORT } from '../paths';
 import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
 
 export default class DSVirtualListCO extends PageObject {
-  static basicURL = new Urlbuilder(PATH_VIRTUALLIST, 'basic');
+  static testChanges = new Urlbuilder(PATH_E2E_VIRTUAL_LIST, 'test-element-changes');
 
-  static dynamicChanges = new Urlbuilder(PATH_VIRTUALLIST, 'dynamic-element-changes');
+  static basicTest = new Urlbuilder(PATH_E2E_VIRTUAL_LIST, 'basic-test');
 
-  static testChanges = new Urlbuilder(PATH_E2E_VIRTUAL_LIST, 'test-element-changes');
+  static scrollToIndexTest = new Urlbuilder(PATH_E2E_VIRTUAL_LIST, 'scroll-to-index-test');
 
   static customization = new Urlbuilder(PATH_E2E_CUSTOMIZATION_SUPPORT, 'theming-virtual-list');
 
@@ -18,12 +18,31 @@ export default class DSVirtualListCO extends PageObject {
     return $('[data-testid="virtual-list-container"]');
   }
 
-  static getAdd1Btn = async () => getElementByIndex(this.getButtons, 0);
+  static async getListWrapper() {
+    return $('[data-testid="ds-virtuallist-list-wrapper"]');
+  }
 
-  static getChangeTimeBtn = async () => getElementByIndex(this.getButtons, 1);
+  static async getItems() {
+    return $$('[data-testid="ds-virtuallist-item-wrapper"]');
+  }
+
+  // Only items inside the virtualization window exist in the DOM, so this resolves
+  // to nothing for indexes outside it — that absence is the assertion we rely on.
+  static async getItemByIndex(index) {
+    return $(`[data-testid="ds-virtuallist-item-wrapper"][data-index="${index}"]`);
+  }
+
+  // The scroll-to-index story renders a single input and a single button, so the
+  // component-owned data-testids are unambiguous there.
+  static async getJumpInput() {
+    return $('[data-testid="ds-inputtext-input"]');
+  }
 
-  // Snapshots
-  static snapshotPath(example = 'basic') {
-    return PageObject.getSnapshotPathBuilder('VirtualList', example, 'ds-virtuallist');
+  static async getJumpButton() {
+    return $('[data-testid="ds-button"]');
   }
+
+  static getAdd1Btn = async () => getElementByIndex(this.getButtons, 0);
+
+  static getChangeTimeBtn = async () => getElementByIndex(this.getButtons, 1);
 }

package/ds-virtuallist/basic/DSVirtualList.basic.axe-core.func.spec.js

@@ -0,0 +1,28 @@
+import DSVirtualListCO from '../DSVirtualListCO';
+import { axeCoreCheck } from '../../helpers';
+
+// Coverage for the ds-virtual-list compliance remediation in PUI-19125.
+// DOM-attribute/a11y assertions are identical across engines, so this runs Chrome only.
+// The `|| browserName === 'Chrome'` fallback is mandatory: BrowserStack reports the
+// capitalized name and a lowercase-only guard would register 0 tests (false green).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19196 - DSVirtualList:: virtualized list accessibility - Axe-Core', () => {
+    before(async () => {
+      const errorOnGo = await DSVirtualListCO.basicTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations on the rendered list', async () => {
+      const container = await DSVirtualListCO.getVirtualListContainer();
+      await container.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-virtuallist/scroll-to-index/DSVirtualList.scroll-to-index.func.spec.js

@@ -0,0 +1,45 @@
+import DSVirtualListCO from '../DSVirtualListCO';
+
+// Coverage for the ds-virtual-list compliance remediation in PUI-19125.
+// The in-package Playwright CT already covers this in Chromium; this spec exists to run the same
+// contract across the full browser matrix.
+// The window size is not stable (items are measured after mount, so the overscan window grows),
+// which is why the assertions are "bounded window + index recycled", never an exact item count.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-19197 - DSVirtualList:: scroll to index via actionRef - Func', () => {
+    before(async () => {
+      const errorOnGo = await DSVirtualListCO.scrollToIndexTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render only a window of the 200 children, leaving far items out of the DOM', async () => {
+      const firstItem = await DSVirtualListCO.getItemByIndex(0);
+      await expect(firstItem).toBeExisting();
+
+      const farItem = await DSVirtualListCO.getItemByIndex(150);
+      await expect(farItem).not.toBeExisting();
+
+      const items = await DSVirtualListCO.getItems();
+      await expect(items.length).toBeLessThan(60);
+    });
+
+    it('02: should mount the requested item and recycle the first one after jumping', async () => {
+      const jumpInput = await DSVirtualListCO.getJumpInput();
+      await jumpInput.setValue('150');
+      const jumpButton = await DSVirtualListCO.getJumpButton();
+      await jumpButton.click();
+
+      const farItem = await DSVirtualListCO.getItemByIndex(150);
+      await farItem.waitForExist();
+      await expect(farItem).toBeDisplayed();
+      await expect(farItem).toHaveText('Test 150');
+
+      // the window moved instead of growing: index 0 is no longer in the DOM
+      const firstItem = await DSVirtualListCO.getItemByIndex(0);
+      await expect(firstItem).not.toBeExisting();
+
+      const items = await DSVirtualListCO.getItems();
+      await expect(items.length).toBeLessThan(60);
+    });
+  });
+}