dimsum-e2e-tests 3.80.0-next.4 → 3.80.0-next.41

package/ds-menu-button/DSMenuButtonCO.js

@@ -87,6 +87,24 @@ export default class DSMenuButtonCO extends PageObject {
     return $(`${item} div span`);
   }
 
+  /**
+   * Press `key` until `element` holds focus, stopping at `maxPresses`. Menus and submenus mount,
+   * position themselves and then take focus, so a fixed number of presses depends on none of them
+   * being swallowed — which made the same browsers pass and fail these specs on consecutive runs.
+   *
+   * This only drives the keyboard and asserts nothing: it presses up to `maxPresses` times and
+   * returns whether or not the target was reached. Always follow it with `toBeFocused()` on the same
+   * element, otherwise a walk that lands on the wrong item passes silently.
+   */
+  static async keyUntilFocused(key, element, maxPresses = 6) {
+    for (let i = 0; i < maxPresses; i += 1) {
+      // eslint-disable-next-line no-await-in-loop
+      if (await element.isFocused()) return;
+      // eslint-disable-next-line no-await-in-loop
+      await browser.keys(key);
+    }
+  }
+
   // Slots test selectors (by data-dimsum-slot)
   static async getSlotsOpinionatedButtonRoot() {
     return $('[data-dimsum-parent-slot="dsOpinionatedbuttonRoot"');

package/ds-menu-button/activable/DSMenuButton.activableMenuItem.keyboardnav.func.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-statements */
 import { Key } from 'webdriverio';
 import DSMenuButtonCO from '../DSMenuButtonCO';
 import DSDialog from '../../ds-dialog/DSDialogCO';
@@ -12,10 +11,11 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('01: should trigger first menuItem with KEYBOARD (Return) and have a dialog', async () => {
       await browser.keys(Key.Tab);
-      await browser.keys(Key.Return);
-      await browser.keys(Key.ArrowDown);
-      await browser.keys(Key.ArrowDown);
-      await browser.keys(Key.ArrowDown); // Iterated the focustrap
+      await browser.keys(Key.Return); // opens the menu and focuses the first item
+      const firstItem = await DSMenuButtonCO.getMenuItemWrapperByLabel('Action 1');
+      await firstItem.waitForDisplayed();
+      // No arrow walk here: opening the menu focuses the first item, so this is already the target.
+      await expect(firstItem).toBeFocused();
       await browser.keys(Key.Return);
       const triggeredDialog = await DSDialog.getDialog();
       const menu = await DSMenuButtonCO.getMenuRoot();
@@ -24,9 +24,11 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('02: should trigger third menuItem with KEYBOARD (Space) and have a card', async () => {
       await browser.keys(Key.Escape);
-      await browser.keys(Key.Return);
-      await browser.keys(Key.ArrowDown);
-      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Return); // reopens the menu and focuses the first item
+      const thirdItem = await DSMenuButtonCO.getMenuItemWrapperByLabel('Action 3');
+      await thirdItem.waitForDisplayed();
+      await DSMenuButtonCO.keyUntilFocused(Key.ArrowDown, thirdItem);
+      await expect(thirdItem).toBeFocused();
       await browser.keys(Key.Space); // Action menu items will get closed menu also with Space
       const menu = await DSMenuButtonCO.getMenuRoot();
       const triggeredCards = (await DSCardV3CO.getCards()).length;

package/ds-menu-button/submenu/DSMenuButton.subMenuItem.keyboardnav.func.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-statements */
 import { Key } from 'webdriverio';
 import DSMenuButtonCO from '../DSMenuButtonCO';
 import DSButtonV3CO from '../../ds-button-v3/DSButtonV3CO';
@@ -30,9 +29,15 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(subMenuItem3).toBeDisplayed();
     });
     it('03: should drilldown a submenu and submenu action with KB', async () => {
-      await browser.keys(Key.ArrowRight);
-      await browser.keys(Key.ArrowDown);
-      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowRight); // opens Submenu 3 and moves focus into it
+      const subMenuItem31 = await DSMenuButtonCO.getMenuItemOptByIndex('3.1');
+      await subMenuItem31.waitForDisplayed();
+      // Same reason as the dismissal beforeEach: the submenu being open is not enough, focus has to
+      // be inside it or the arrows below walk the outer list where 3.3 does not exist.
+      await expect(subMenuItem31).toBeFocused();
+      const subMenuItem33 = await DSMenuButtonCO.getMenuItemOptByIndex('3.3');
+      await DSMenuButtonCO.keyUntilFocused(Key.ArrowDown, subMenuItem33);
+      await expect(subMenuItem33).toBeFocused();
       await browser.keys(Key.Return);
       const triggeredCards = await (await DSCardV3CO.getHByLevel(2)).getText();
       await expect(triggeredCards).toEqual('Action 3 > 3');
@@ -46,18 +51,36 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const menuTrigger = await DSButtonV3CO.getButtonByLabel('Submenus example');
       await menuTrigger.waitForDisplayed();
       await browser.keys(Key.Tab);
-      await browser.keys(Key.Return);
-      await browser.keys(Key.ArrowDown);
-      await browser.keys(Key.ArrowRight);
-      await browser.keys(Key.ArrowDown);
-      await browser.keys(Key.ArrowDown); // We are now at a subMenu with subMenu (Opt 2.3)
+      await browser.keys(Key.Return); // opens the menu and focuses Opt 1
+      const subMenuItem2 = await DSMenuButtonCO.getMenuItemOptByIndex('2');
+      // Wait before walking: on an unpainted menu isFocused() reads false and the loop burns its
+      // presses on a list that is not there yet.
+      await subMenuItem2.waitForDisplayed();
+      await DSMenuButtonCO.keyUntilFocused(Key.ArrowDown, subMenuItem2);
+      await expect(subMenuItem2).toBeFocused();
+      await browser.keys(Key.ArrowRight); // opens Submenu 2 and moves focus into it
+      const subMenuItem21 = await DSMenuButtonCO.getMenuItemOptByIndex('2.1');
+      await subMenuItem21.waitForDisplayed();
+      // Opening the submenu is not enough: focus has to be inside it, otherwise the arrows below
+      // walk the outer list and never reach 2.3.
+      await expect(subMenuItem21).toBeFocused();
+      // We are now at a subMenu with subMenu (Opt 2.3)
+      const subMenuItem23 = await DSMenuButtonCO.getMenuItemOptByIndex('2.3');
+      await DSMenuButtonCO.keyUntilFocused(Key.ArrowDown, subMenuItem23);
+      await expect(subMenuItem23).toBeFocused();
+      // Focusing 2.3 opens its own flyout, which is the third one the dismissal tests count. Wait
+      // for it: without this they can run against two flyouts, where Escape closes submenu 2 instead
+      // and Opt+ESC passes without having closed anything.
+      await (await DSMenuButtonCO.getMenuItemOptByIndex('2.3.1')).waitForDisplayed();
     });
     it('01: should close the focused submenu with ESC focus will move one level up', async () => {
       await browser.keys(Key.Escape);
       const subMenuItem23 = await DSMenuButtonCO.getMenuItemOptByIndex('2.3');
       const subMenuItem2 = await DSMenuButtonCO.getMenuItemOptByIndex('2');
-      const menus = (await DSMenuButtonCO.getMenuRoots()).length;
       await subMenuItem2.waitForDisplayed();
+      // Counted after the wait, as in 02 and 03: toEqual on a plain number does not retry, so a
+      // count read before the dismissal settles is just a snapshot of the old state.
+      const menus = (await DSMenuButtonCO.getMenuRoots()).length;
       await expect(menus).toEqual(2);
       await expect(subMenuItem2).toBeFocused();
       await expect(subMenuItem23).toBeDisplayed();

package/ds-modal-slide/inside-dialog/ModalSlide.insideDialog.func.spec.js

@@ -0,0 +1,45 @@
+import { Key } from 'webdriverio';
+import ModalSlideCO from '../ModalSlideCO';
+import DSDialogCO from '../../ds-dialog/DSDialogCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-19268 - ModalSlide:: inside Dialog, focus and Escape', () => {
+    beforeEach(async () => {
+      const errorOnGo = await ModalSlideCO.insideDialogURL.go();
+      if (errorOnGo) throw errorOnGo;
+      await ModalSlideCO.openDialog();
+      await ModalSlideCO.openModalSlide();
+    });
+    it('01: Cancel should close only the slide and focus the button that opened it', async () => {
+      await (await ModalSlideCO.getRejectedBtn()).click();
+      await (await ModalSlideCO.getModalSlide()).waitForDisplayed({ reverse: true });
+      await expect(await DSDialogCO.getDialog()).toBeDisplayed();
+      await expect(await ModalSlideCO.getOpenModalSlideBtn()).toBeFocused();
+    });
+    it('02: Confirm should close only the slide and focus the button that opened it', async () => {
+      await (await ModalSlideCO.getModalButton()).click();
+      await (await ModalSlideCO.getModalSlide()).waitForDisplayed({ reverse: true });
+      await expect(await DSDialogCO.getDialog()).toBeDisplayed();
+      await expect(await ModalSlideCO.getOpenModalSlideBtn()).toBeFocused();
+    });
+    it('03: Escape should close only the slide and focus the button that opened the slide', async () => {
+      // the story moves the focus into the slide 500ms after it opens
+      await browser.waitUntil(async () => (await $('[data-testid="back-id"]')).isFocused(), {
+        timeoutMsg: 'the focus should move into the slide',
+      });
+      await browser.keys(Key.Escape);
+      await (await ModalSlideCO.getModalSlide()).waitForDisplayed({ reverse: true });
+      await expect(await DSDialogCO.getDialog()).toBeDisplayed();
+      await expect(await ModalSlideCO.getOpenModalSlideBtn()).toBeFocused();
+    });
+    it('04: a second Escape, with the slide already closed, should close the dialog', async () => {
+      await browser.waitUntil(async () => (await $('[data-testid="back-id"]')).isFocused(), {
+        timeoutMsg: 'the focus should move into the slide',
+      });
+      await browser.keys(Key.Escape);
+      await (await ModalSlideCO.getModalSlide()).waitForDisplayed({ reverse: true });
+      await browser.keys(Key.Escape);
+      await (await DSDialogCO.getDialog()).waitForDisplayed({ reverse: true });
+    });
+  });
+}

package/ds-panel-header/DSPanelHeader.func.spec.js

@@ -0,0 +1,24 @@
+import DSPanelHeaderCO from './DSPanelHeaderCO';
+/* this is the syntax for only enabling test for desktop only
+ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-XXXX - PanelHeader:: example test - data-testid exists', () => {
+    before('loading page', async () => {
+      // your code goes here
+    });
+    it('01: wrapper should be displayed', async () => {
+      // your code goes here
+    });
+
+  });
+}
+*/
+describe('PUI-XXXX - PanelHeader:: example test - data-testid exists', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSPanelHeaderCO.basic.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('01: wrapper should be displayed', async () => {
+    const wrapper = await DSPanelHeaderCO.getWrapper();
+    await expect(wrapper).toBeDisplayedInViewport();
+  });
+});

package/ds-panel-header/DSPanelHeaderCO.js

@@ -0,0 +1,17 @@
+import { PANEL_HEADER_DATA_TESTID } from '@elliemae/ds-panel-header';
+import { PATH_PANEL_HEADER } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSPanelHeader extends PageObject {
+  static basic = new Urlbuilder(PATH_PANEL_HEADER, 'basic');
+
+  // Selectors
+  static async getWrapper() {
+    return $(`[data-testid="${PANEL_HEADER_DATA_TESTID.ROOT}"]`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSPanelHeader', example, 'ds-panel-header');
+  }
+}

package/ds-pills-v2/DSPillsV2CO.js

@@ -1,7 +1,21 @@
-import { PATH_E2E_PILLS_V2 } from '../paths';
+import { PATH_E2E_PILLS_V2, PATH_E2E_PILLS_V2_PITFALLS } from '../paths';
 import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
 
 export default class DSPillsV2CO extends PageObject {
+  /**
+   * Every id in the InputWithFormItemBlockTest story is derived by DSFormLayoutBlockItem from the
+   * `inputID` it is given. Derived once here so neither the selectors below nor the spec rebuild
+   * the `_feedback_message` / `_error_message` suffixes by hand.
+   */
+  static IDS = {
+    input: 'normal',
+    feedback: 'normal_feedback_message',
+    error: 'normal_error_message',
+  };
+
+  /** What the input's aria-describedby must equal, in the order the story supplies the messages. */
+  static DESCRIBED_BY = `${this.IDS.feedback} ${this.IDS.error}`;
+
   // Desktop
   static removableURL = new Urlbuilder(PATH_E2E_PILLS_V2, 'removable-pill-test');
 
@@ -27,6 +41,15 @@ export default class DSPillsV2CO extends PageObject {
 
   static multiSelectMB = new Urlbuilder(PATH_E2E_PILLS_V2, 'multi-select-menu-button-test');
 
+  // Pitfalls
+  static inputWithFormItemBlockURL = new Urlbuilder(PATH_E2E_PILLS_V2_PITFALLS, 'input-with-form-item-block-test');
+
+  // Distinct from `inputURL` above: same story name, different path. Both are hand-copies of the
+  // Input Pill pitfall story's 12 pills; this one is the Pitfalls-scoped twin used by the attribute
+  // spec, `inputURL` is the older copy carrying the axe (PUI-11496) and Percy (PUI-8356) baselines.
+  // The E2E copy renders PendingReviewDisclaimer; the canonical component pitfall story additionally renders InputPillLabelRequirementDisclaimer.
+  static inputPillPitfallURL = new Urlbuilder(PATH_E2E_PILLS_V2_PITFALLS, 'input-pill-test');
+
   static getUrl(component = 'basic') {
     return PageObject.getUrl(PATH_E2E_PILLS_V2, component);
   }
@@ -93,6 +116,35 @@ export default class DSPillsV2CO extends PageObject {
     return $('[data-testid="dropdown-menu-listbox"]');
   }
 
+  // --- InputWithFormItemBlockTest: label / error association selectors ---
+
+  /** The pill's inner <input>, reached by the id the story overrides onto it. */
+  static async getAssociatedInput() {
+    return $(`#${this.IDS.input}`);
+  }
+
+  /** `$$` on purpose — the count is what proves the override did not duplicate the id. */
+  static async getNodesWithInputId() {
+    return $$(`[id="${this.IDS.input}"]`);
+  }
+
+  /** The DSFormLayoutBlockItem label, which must point at the input via `for`. */
+  static async getAssociatedInputLabel() {
+    return $(`label[for="${this.IDS.input}"]`);
+  }
+
+  static async getFeedbackMessage() {
+    return $(`#${this.IDS.feedback}`);
+  }
+
+  static async getErrorMessage() {
+    return $(`#${this.IDS.error}`);
+  }
+
+  static async getClearIcon() {
+    return $('[data-testid="ds-pill-clear-icon"]');
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('Pills', example);

package/ds-pills-v2/pitfalls/DSPills.inputPill.func.spec.js

@@ -0,0 +1,26 @@
+import DSPillsV2CO from '../DSPillsV2CO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19148 - DSPillsV2:: input pill attribute contract - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.inputPillPitfallURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render the input with the attributes', async () => {
+      const input = await DSPillsV2CO.getInputByIndex(0);
+      await input.waitForDisplayed();
+      await expect(await input.getTagName()).toBe('input');
+      await expect(input).toHaveAttribute('data-testid', 'ds-pill-input');
+      const generatedId = await input.getAttribute('id');
+      await expect(generatedId).toMatch(/^ds-pill-/);
+      await expect(input).not.toHaveAttribute('aria-describedby');
+      await expect(input).toHaveAttribute('aria-invalid', 'false');
+    });
+  });
+}

package/ds-pills-v2/pitfalls/DSPills.inputWithFormItemBlockURL.axe-core.func.spec.js

@@ -0,0 +1,38 @@
+import DSPillsV2CO from '../DSPillsV2CO';
+import { axeCoreCheck, type } from '../../helpers';
+
+// Accessibility scan for the fix introduced in PUI-18617 ([PillsV2] Pitfalls enhancements, item 2).
+//
+// Note on what this does and does not prove: axe has no rule that requires an input to be described by
+// an error message, so a clean scan here is a regression guard against the association *breaking the
+// markup* (orphaned aria-describedby ids, duplicate ids, an unlabelled input) — not evidence that the
+// label and error are announced. The announcement itself is covered by the functional spec and by
+// manual screen reader verification on the ticket.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19150 - DSPillsV2:: input pill label and error association - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.inputWithFormItemBlockURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations, empty and filled', async () => {
+      const input = await DSPillsV2CO.getAssociatedInput();
+      await input.waitForDisplayed();
+      const emptyResult = await axeCoreCheck();
+      expect(emptyResult.length).toBe(0);
+      // Filling the input mounts the clear button, which adds an extra focusable control inside the
+      // associated form item — worth scanning in that state too.
+      await input.click();
+      await type('abcd');
+      const clearIcon = await DSPillsV2CO.getClearIcon();
+      await clearIcon.waitForDisplayed();
+      const filledResult = await axeCoreCheck();
+      expect(filledResult.length).toBe(0);
+    });
+  });
+}

package/ds-pills-v2/pitfalls/DSPills.inputWithFormItemBlockURL.func.spec.js

@@ -0,0 +1,72 @@
+import DSPillsV2CO from '../DSPillsV2CO';
+import { type } from '../../helpers';
+
+// Tests for the fix introduced in PUI-18617 ([PillsV2] Pitfalls enhancements, item 2): the input pill
+// inside a DSFormLayoutBlockItem announced neither its label nor its error message. The fix exposed
+// `dsPillInput` as a real slot on the default (non-inputRender) input, so the association is now made
+// by passing id / aria-describedby through the nested `dsInputtextInput` slot.
+//
+// Assertions are pure DOM attributes, so this is scoped to Chrome — see the skill's
+// "DOM-Attribute Tests Run Chrome-Only" rule. The `|| 'Chrome'` fallback is mandatory: BrowserStack
+// reports the capitalized name and a lowercase-only guard registers 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-19149 - DSPillsV2:: input pill label and error association - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.inputWithFormItemBlockURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should associate the input with its label and its feedback/error messages', async () => {
+      const input = await DSPillsV2CO.getAssociatedInput();
+      await input.waitForDisplayed();
+
+      // The overridden id must land on the pill's real <input>, not on a wrapper. Checking the tag and
+      // the pill's own data-testid on the same element is what distinguishes the two.
+      await expect(await input.getTagName()).toBe('input');
+      await expect(input).toHaveAttribute('data-testid', 'ds-pill-input');
+
+      // hasError on the pill is forwarded to DSInputText as aria-invalid.
+      await expect(input).toHaveAttribute('aria-invalid', 'true');
+
+      // Both message ids, in the order the story supplies them.
+      await expect(input).toHaveAttribute('aria-describedby', DSPillsV2CO.DESCRIBED_BY);
+
+      // aria-describedby is only meaningful if the referenced nodes exist.
+      const feedbackMessage = await DSPillsV2CO.getFeedbackMessage();
+      await expect(feedbackMessage).toBeExisting();
+      const errorMessage = await DSPillsV2CO.getErrorMessage();
+      await expect(errorMessage).toBeExisting();
+
+      // The label side of the association: DSFormLayoutBlockItem renders label[for] from inputID.
+      const label = await DSPillsV2CO.getAssociatedInputLabel();
+      await expect(label).toBeExisting();
+      await expect(await label.getText()).toContain('Item');
+
+      // Duplicate ids would make the label and aria-describedby resolve to the wrong node.
+      const elementsWithId = await DSPillsV2CO.getNodesWithInputId();
+      await expect(elementsWithId.length).toBe(1);
+    });
+
+    it('02: should keep the association intact once the clear button mounts', async () => {
+      const input = await DSPillsV2CO.getAssociatedInput();
+      await input.click();
+      await type('abcd');
+
+      // The clear button only renders once the input has a value, and it must not reuse the input's id.
+      const clearIcon = await DSPillsV2CO.getClearIcon();
+      await clearIcon.waitForDisplayed();
+      await expect(clearIcon).not.toHaveAttribute('id', DSPillsV2CO.IDS.input);
+
+      await expect(input).toHaveAttribute('aria-describedby', DSPillsV2CO.DESCRIBED_BY);
+      await expect(input).toHaveAttribute('aria-invalid', 'true');
+
+      const elementsWithId = await DSPillsV2CO.getNodesWithInputId();
+      await expect(elementsWithId.length).toBe(1);
+    });
+  });
+}

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

@@ -1,4 +1,3 @@
-/* eslint-disable wdio/no-pause */
 import DSProgressIndicatorCO from './DSProgressIndicatorCO';
 import { axeCoreCheck } from '../helpers';
 
@@ -8,24 +7,28 @@ if (
     browser.capabilities.browserName === 'chrome') ||
   browser.capabilities.browserName === 'Chrome'
 ) {
-  describe('PUI-17521: Progress Indicator:: Basic - Axe Core', () => {
+  describe('PUI-17521 - DSProgressIndicator:: Basic - Axe-Core', () => {
     before('loading page', async () => {
       const errorOnGo = await DSProgressIndicatorCO.basicURL.go();
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should display basic progress indicator and pass axe-core', async () => {
-      await (await DSProgressIndicatorCO.getUploadLabel()).waitForDisplayed();
-      await browser.pause(500);
+      await (await DSProgressIndicatorCO.getTitle()).waitForDisplayed();
+
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
     });
   });
-  describe('PUI-17524: Progress Indicator:: Others Test - Axe Core', () => {
+
+  describe('PUI-17524 - DSProgressIndicator:: Others Test - Axe-Core', () => {
     before('loading page', async () => {
       const errorOnGo = await DSProgressIndicatorCO.othersURL.go();
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should display progress indicator and pass axe-core', async () => {
+      // Replaces a blind browser.pause(500): the story animates, so wait on the real end state.
+      await DSProgressIndicatorCO.waitForAnimatedCountersToSettle();
+
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
     });

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

@@ -6,14 +6,41 @@ if (
     browser.capabilities.browserName === 'chrome') ||
   browser.capabilities.browserName === 'Chrome'
 ) {
-  describe('PUI-17522 - Progress Indicator:: Basic - Func', () => {
+  describe('PUI-17522 - DSProgressIndicator:: Basic - Func', () => {
     before('loading page', async () => {
       const errorOnGo = await DSProgressIndicatorCO.basicURL.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('01: should show basic progress indicator', async () => {
-      const progressIndicator = await DSProgressIndicatorCO.getUploadLabel();
-      await expect(progressIndicator).toBeDisplayed();
+
+    // The naming, aria-valuetext and invalid-range contracts live in the aria-contract spec; this
+    // one stays on the Basic story's own value contract.
+    it('01: should show basic progress indicator with a valid progressbar value range', async () => {
+      const title = await DSProgressIndicatorCO.getTitle();
+      await expect(title).toBeDisplayed();
+      await expect(title).toHaveText('upload');
+
+      const root = await DSProgressIndicatorCO.getRoot();
+      await expect(root).toHaveAttribute('aria-disabled', 'false');
+
+      const progress = await DSProgressIndicatorCO.getProgress();
+      await expect(progress).toHaveAttribute('role', 'progressbar');
+      await expect(progress).toHaveAttribute('aria-valuenow', '50');
+      await expect(progress).toHaveAttribute('aria-valuemin', '0');
+      await expect(progress).toHaveAttribute('aria-valuemax', '100');
+      await expect(await progress.getAttribute('style')).toContain('width: 50%');
+    });
+
+    // PUI-18942: title and counter text used to be raw text inside plain spans.
+    it('02: should render title and counter text through DSTypography', async () => {
+      const { TITLE, COUNTER } = DSProgressIndicatorCO.SLOT_TESTID;
+
+      const titleText = await DSProgressIndicatorCO.getTypographyIn(TITLE);
+      await expect(titleText).toBeExisting();
+      await expect(titleText).toHaveText('upload');
+
+      const counterText = await DSProgressIndicatorCO.getTypographyIn(COUNTER);
+      await expect(counterText).toBeExisting();
+      await expect(counterText).toHaveText('50 of 100');
     });
   });
 }

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

@@ -1,24 +1,32 @@
 import DSProgressIndicatorCO from './DSProgressIndicatorCO';
 
-if (!browser.capabilities['ice:options'].isPhone) {
-  describe('PUI-17520 - Progress Indicator:: Basic - Visual', () => {
+// Migrated off the pre-Percy browser.checkSnapshot API as part of the PUI-18856 compliance work,
+// which rewrote the class system these baselines were taken against.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-17520 - DSProgressIndicator:: Basic - Visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSProgressIndicatorCO.basicURL.go();
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should display basic progress indicator', async () => {
-      await (await DSProgressIndicatorCO.getUploadLabel()).waitForDisplayed();
-      const snapshot = await browser.checkSnapshot(DSProgressIndicatorCO.snapshotPath('progressindicator-basic'));
+      await (await DSProgressIndicatorCO.getTitle()).waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });
-  describe('PUI-17523 - Progress Indicator:: Others Test - Visual', () => {
+
+  describe('PUI-17523 - DSProgressIndicator:: Others Test - Visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSProgressIndicatorCO.othersURL.go();
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should display progress indicator', async () => {
-      const snapshot = await browser.checkSnapshot(DSProgressIndicatorCO.snapshotPath('progressindicator-others'));
+      // Two of the four indicators are driven by setInterval and only stop once their counters
+      // reach the maximum. Snapshotting before that lands produces a different image every run.
+      await DSProgressIndicatorCO.waitForAnimatedCountersToSettle();
+
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });