dimsum-e2e-tests 3.70.0-next.39 → 3.70.0-next.40

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 3.70.0-next.40 (2026-06-29)
+
+### Features
+
+- ds-card-v3:: add theming example story in slots [PUI-17890](https://jira.elliemae.io/browse/PUI-17890) ([#8137](https://git.elliemae.io/platform-ui/dimsum/issues/8137)) ([322a618](https://git.elliemae.io/platform-ui/dimsum/commit/322a618b813f5f5261b423f556baadd60844d945))
+
 ## 3.70.0-next.39 (2026-06-25)
 
 ### Features

package/ds-accordion/DSAccordion.visual.spec.js

@@ -81,6 +81,12 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should display accordion with global height, not trimmed', async () => {
+      const addRow = await $('[data-testid="add-row"]');
+      await addRow.click();
+      await addRow.click();
+      await addRow.click();
+      const content = await DSAccordionCO.getContents(0);
+      await content.waitForDisplayed();
       const snapshot = await browser.checkSnapshot(DSAccordionCO.snapshotPath('accordion-globalheight'));
       await expect(snapshot).toEqual(0);
     });

package/ds-accordion/DSAccordionCO.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-relative-packages */
-import { PATH_E2E_ACCORDION } from '../paths';
+import { PATH_E2E_ACCORDION, PATH_E2E_ACCORDION_PITFALLS } from '../paths';
 import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
 
 export default class DSAccordionCO extends PageObject {
@@ -20,7 +20,9 @@ export default class DSAccordionCO extends PageObject {
 
   static tooltip = new Urlbuilder(PATH_E2E_ACCORDION, 'tooltip');
 
-  static inputInside = new Urlbuilder(PATH_E2E_ACCORDION, 'PUI-9261-input-inside');
+  static inputInside = new Urlbuilder(PATH_E2E_ACCORDION, 'pui-9261-input-inside');
+
+  static controlled = new Urlbuilder(PATH_E2E_ACCORDION, 'controlled-test');
 
   static datepickerInside = new Urlbuilder(PATH_E2E_ACCORDION, 'actionable-within');
 
@@ -34,7 +36,7 @@ export default class DSAccordionCO extends PageObject {
 
   static keepContentURL = new Urlbuilder(PATH_E2E_ACCORDION, 'keep-content-mounted');
 
-  static focusOnItemURL = new Urlbuilder(PATH_E2E_ACCORDION, 'focus-on-item');
+  static focusOnItemURL = new Urlbuilder(PATH_E2E_ACCORDION_PITFALLS, 'focus-on-item-test');
 
   static applyAriaDisabled = new Urlbuilder(PATH_E2E_ACCORDION, 'apply-aria-disabled-test');
 
@@ -105,6 +107,12 @@ export default class DSAccordionCO extends PageObject {
   static getAccordionItemHeaderContainerByIndex = async (index) =>
     getElementByIndex(this.getAccordionItemHeaderContainers, index);
 
+  static getAccordionItemHeaderCustomActionsContainers = async () =>
+    $$('[data-testid="ds-accordion-item-header-custom-actions-container"]');
+
+  static getAccordionItemHeaderCustomActionsContainerByIndex = async (index) =>
+    getElementByIndex(this.getAccordionItemHeaderCustomActionsContainers, index);
+
   // slots
 
   static async getAccordionContainerSlotByIndex(index = 0) {

package/ds-accordion/controlled/DSAccordion.controlled.func.spec.js

@@ -0,0 +1,23 @@
+import DSAccordionCO from '../DSAccordionCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // New coverage for the ControlledTest story (previously untested).
+  describe('PUI-18650 - Accordion, controlled -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionCO.controlled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: single-open: opening another item collapses the previously open one', async () => {
+      await expect(await DSAccordionCO.getAccordionHeader(0)).toHaveAttribute('aria-expanded', 'true');
+      await (await DSAccordionCO.getAccordionHeader(1)).click();
+      await expect(await DSAccordionCO.getAccordionHeader(1)).toHaveAttribute('aria-expanded', 'true');
+      await expect(await DSAccordionCO.getAccordionHeader(0)).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('02: multiple-open: opening two items keeps both expanded', async () => {
+      await (await DSAccordionCO.getAccordionHeader(3)).click();
+      await (await DSAccordionCO.getAccordionHeader(4)).click();
+      await expect(await DSAccordionCO.getAccordionHeader(3)).toHaveAttribute('aria-expanded', 'true');
+      await expect(await DSAccordionCO.getAccordionHeader(4)).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+}

package/ds-accordion/header-structure/DSAccordion.header-structure.func.spec.js

@@ -0,0 +1,49 @@
+import DSAccordionCO from '../DSAccordionCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  // Tests for the DOM structural fix introduced in PUI-17912
+  // (custom action buttons moved out of role="heading" container into a sibling)
+  describe('PUI-18621 - DSAccordion:: heading container structure after renderCustomActions fix - func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionCO.headerControls.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: heading container should contain only the toggle button and no other interactive elements', async () => {
+      const headingContainer = await DSAccordionCO.getAccordionItemHeaderContainerByIndex(0);
+      await expect(headingContainer).toHaveAttribute('role', 'heading');
+      const buttonsInsideHeading = await headingContainer.$$('button');
+      await expect(buttonsInsideHeading.length).toBe(1);
+    });
+
+    it('02: custom actions container should exist outside the heading container', async () => {
+      const customActionsContainer = await DSAccordionCO.getAccordionItemHeaderCustomActionsContainerByIndex(0);
+      await expect(customActionsContainer).toExist();
+    });
+
+    it('03: action buttons in custom actions container should reflect correct enabled/disabled state', async () => {
+      const enabledContainer = await DSAccordionCO.getAccordionItemHeaderCustomActionsContainerByIndex(0);
+      const enabledButton = await enabledContainer.$('[data-testid="ds-button"]');
+      await expect(enabledButton).toBeDisplayed();
+      await expect(enabledButton).toBeEnabled();
+
+      const disabledContainer = await DSAccordionCO.getAccordionItemHeaderCustomActionsContainerByIndex(2);
+      const disabledButton = await disabledContainer.$('[data-testid="ds-button"]');
+      await expect(disabledButton).toBeDisplayed();
+      await expect(disabledButton).not.toBeEnabled();
+    });
+
+    it('04: toolbar trigger in custom actions should open dropdown menu on click', async () => {
+      const toolbar = await DSAccordionCO.getToolbarByIndex(0);
+      await toolbar.click();
+      const firstMenuOption = await $('*=Login');
+      await firstMenuOption.waitForDisplayed();
+      await expect(firstMenuOption).toBeDisplayed();
+    });
+  });
+}

package/ds-accordion/input-inside/DSAccordion.input-inside.func.spec.js

@@ -0,0 +1,17 @@
+import DSAccordionCO from '../DSAccordionCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // New coverage for the PUI9261InputInside story (previously untested).
+  describe('PUI-18651 - Accordion, input inside content -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionCO.inputInside.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should type into an input rendered inside the open accordion item', async () => {
+      const input = await $('[data-testid="task-name"] input');
+      await input.waitForDisplayed();
+      await input.setValue('Test task');
+      await expect(input).toHaveValue('Test task');
+    });
+  });
+}

package/ds-accordion-native/DSAccordionNative.axe-core.func.spec.js

@@ -22,6 +22,11 @@ if (
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
     });
+    it('02: should display accordion with open toolbar and pass axecore scan', async () => {
+      await (await DSAccordionNativeCO.getToolbarByIndex(1)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
   });
 
   describe('PUI-18083 - AccordionNative, basic -AxeCore', () => {
@@ -114,4 +119,17 @@ if (
       expect(result.length).toBe(0);
     });
   });
+
+  describe('PUI-18083 - AccordionNative, Focus with useRef -a11y', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.focusOnItemURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should be a11y compliant with useRef', async () => {
+      const secondAccordion = await DSAccordionNativeCO.getAccordionHeader(1);
+      await secondAccordion.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
 }

package/ds-accordion-native/DSAccordionNative.func.spec.js

@@ -175,4 +175,26 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(accordionContent).toExist();
     });
   });
+
+  // Native exposes a usable ref on the summary via the `dsAccordionnativeItemSummary` slot
+  // (verified: clicking the button focuses item 0's <summary>). Equivalent to the accordion
+  // FocusOnItem pattern (`dsAccordionItemHeader={{ innerRef }}`).
+  describe('PUI-18083 - AccordionNative, Focus with useRef -a11y', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.focusOnItemURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should focus second item manually', async () => {
+      const secondAccordion = await DSAccordionNativeCO.getAccordionHeader(1);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await expect(secondAccordion).toBeFocused();
+    });
+    it('02: should use button to focus the first accordion item via ref', async () => {
+      const focusButton = await DSAccordionNativeCO.getButtonsByIndex(0);
+      await focusButton.click();
+      const firstAccordion = await DSAccordionNativeCO.getAccordionHeader(0);
+      await expect(firstAccordion).toBeFocused();
+    });
+  });
 }

package/ds-accordion-native/DSAccordionNative.visual.spec.js

@@ -1,8 +1,11 @@
+import { Key } from 'webdriverio';
 import DSAccordionNativeCO from './DSAccordionNativeCO';
 import { mouseOver } from '../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
-  describe('PUI-18083 - AccordionNative visual tests, basic', () => {
+  // Percy-aligned with ds-accordion (same describe + it titles) so snapshots compare
+  // against the accordion baseline. Story content is equivalent. See POC_FINDINGS.md.
+  describe('PUI-6111 - Accordion visual tests, basic', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAccordionNativeCO.basicURL.go();
       if (errorOnGo) throw errorOnGo;
@@ -15,9 +18,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     it('02: should display open first one', async () => {
       await (await DSAccordionNativeCO.getAccordionHeader(1)).waitForDisplayed();
       await (await DSAccordionNativeCO.getAccordionHeader(1)).click();
-      const snapshot = await browser.checkSnapshot(
-        DSAccordionNativeCO.snapshotPath('accordion-native-one-open'),
-      );
+      const snapshot = await browser.checkSnapshot(DSAccordionNativeCO.snapshotPath('accordion-native-one-open'));
       await expect(snapshot).toEqual(0);
     });
     it('03: should display focus on the second, hover on third', async () => {
@@ -29,7 +30,10 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
   });
 
-  describe('PUI-18083 - AccordionNative, header props -visual', () => {
+  // Percy-aligned with ds-accordion: the native HeaderControlExamples story now renders the same
+  // 3 sections incl. the MiniToolbar (DDmenu), so this snapshot compares against the accordion
+  // baseline and surfaces the real layout deltas. See POC_FINDINGS.md.
+  describe('PUI-7979 - Accordion, header props -visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAccordionNativeCO.headerControls.go();
       if (errorOnGo) throw errorOnGo;
@@ -39,14 +43,18 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await (await DSAccordionNativeCO.getAccordionHeader(1)).click();
       const content = await DSAccordionNativeCO.getContents(1);
       await content.waitForDisplayed();
-      const snapshot = await browser.checkSnapshot(
-        DSAccordionNativeCO.snapshotPath('accordion-native-header-props'),
-      );
+      const snapshot = await browser.checkSnapshot(DSAccordionNativeCO.snapshotPath('accordion-native-header-props'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display accordion with open toolbar', async () => {
+      await (await DSAccordionNativeCO.getToolbarByIndex(1)).click();
+      const snapshot = await browser.checkSnapshot(DSAccordionNativeCO.snapshotPath('accordion-native-toolbar-props'));
       await expect(snapshot).toEqual(0);
     });
   });
 
-  describe('PUI-18083 - AccordionNative, custom actions -visual', () => {
+  // Percy-aligned with ds-accordion. Story content is equivalent. See POC_FINDINGS.md.
+  describe('PUI-7772 - Accordion, custom actions -visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAccordionNativeCO.customActions.go();
       if (errorOnGo) throw errorOnGo;
@@ -67,7 +75,8 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
   });
 
-  describe('PUI-18083 - AccordionNative, multiple -visual', () => {
+  // Percy-aligned with ds-accordion. Story content is identical. See POC_FINDINGS.md.
+  describe('PUI-7982 - Accordion, multiple -visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAccordionNativeCO.multipleURL.go();
       if (errorOnGo) throw errorOnGo;
@@ -79,42 +88,60 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const secondContent = await DSAccordionNativeCO.getContents(1);
       await firstContent.waitForDisplayed();
       await secondContent.waitForDisplayed();
-      const snapshot = await browser.checkSnapshot(
-        DSAccordionNativeCO.snapshotPath('accordion-native-two-expanded'),
-      );
+      const snapshot = await browser.checkSnapshot(DSAccordionNativeCO.snapshotPath('accordion-native-two-expanded'));
       await expect(snapshot).toEqual(0);
     });
   });
 
-  describe('PUI-18083 - AccordionNative, global height -visual', () => {
+  // Percy-aligned with ds-accordion: both stories now render the same deterministic tall content
+  // (40 plain rows), so this snapshot compares against the accordion baseline. The accordion story
+  // previously used the legacy ds-legacy-datagrids; replaced for determinism + parity. See QA_NOTES.
+  describe('PUI-8321 - Accordion, global height -visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAccordionNativeCO.globalHeight.go();
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should display accordion with global height, not trimmed', async () => {
-      const snapshot = await browser.checkSnapshot(
-        DSAccordionNativeCO.snapshotPath('accordion-native-globalheight'),
-      );
+      const addRow = await $('[data-testid="add-row"]');
+      await addRow.click();
+      await addRow.click();
+      await addRow.click();
+      const content = await DSAccordionNativeCO.getContents(0);
+      await content.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSAccordionNativeCO.snapshotPath('accordion-native-globalheight'));
       await expect(snapshot).toEqual(0);
     });
   });
 
-  describe('PUI-18083 - AccordionNative, Actionable within -visual', () => {
+  // Percy-aligned with ds-accordion. Interactions restored to match accordion (Tab x2 to focus the
+  // input, then open the date picker) so the captured states match. See POC_FINDINGS.md.
+  describe('PUI-9964 - Accordion, Actionable within -visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAccordionNativeCO.datepickerInside.go();
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should input focused within accordion', async () => {
-      await (await DSAccordionNativeCO.getAccordionHeader(0)).waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
       const snapshot = await browser.checkSnapshot(
         DSAccordionNativeCO.snapshotPath('accordion-native-datepicker-inside'),
       );
       await expect(snapshot).toEqual(0);
     });
+    it('02: should opened datepicker', async () => {
+      const datepicker = await DSAccordionNativeCO.getDatepickerBtn();
+      await datepicker.click();
+      const snapshot = await browser.checkSnapshot(
+        DSAccordionNativeCO.snapshotPath('accordion-native-datepicker-open'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
   });
 }
 
 if (browser.capabilities['ice:options'].isPhone) {
+  // Not Percy-aligned: accordion swaps to DSMobileAccordion on phone; native renders itself.
+  // Different components. Kept under PUI-18083. See POC_FINDINGS.md.
   describe('PUI-18083 - AccordionNative, desktop to mobile -visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAccordionNativeCO.toMobileURL.go();

package/ds-accordion-native/DSAccordionNativeCO.js

@@ -45,6 +45,8 @@ export default class DSAccordionNativeCO extends PageObject {
 
   static keepContentURL = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'keep-content-mounted');
 
+  static focusOnItemURL = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'focus-on-item-test');
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('AccordionNative', example, 'ds-accordion-native');
@@ -102,6 +104,16 @@ export default class DSAccordionNativeCO extends PageObject {
 
   static getButtonsByIndex = async (index) => getElementByIndex(this.getButtons, index);
 
+  static async getToolbarTriggers() {
+    return $$('[data-testid="ds-mini-toolbar__elipsis"]');
+  }
+
+  static getToolbarByIndex = async (index) => getElementByIndex(this.getToolbarTriggers, index);
+
+  static async getDatepickerBtn() {
+    return $('[data-testid="ds-controlled-date-time-picker-calendar-timewheel-trigger-icon"]');
+  }
+
   // Slots (data-dimsum-slot attributes)
   static async getAccordionContainerSlotByIndex(index = 0) {
     return $$('[data-dimsum-slot="dsAccordionnativeRoot"]')[index];

package/ds-accordion-native/QA_NOTES.md

@@ -0,0 +1,88 @@
+# QA Notes — Native Accordion E2E parity (PUI-18083)
+
+Quick map for reviewing results: which scenarios stayed **the same** (compared against accordion),
+which were **modified** (present but NOT comparable), and which are **not covered** (gap, no test).
+
+> **Key reading — what `PUI-18083` means in these specs:**
+> In the **visual** specs, `PUI-18083` does NOT mean "untouched". It means the scenario was left
+> **on purpose** under the native PUI because the story **renders something different** from the
+> accordion one, so **Percy does NOT compare it** against accordion (it has its own native
+> baseline). The ones tagged with an accordion PUI (`PUI-6111`, `PUI-7772`, …) **are** compared.
+> In the **functional / axe** specs, all of them are under `PUI-18083` by design: they produce no
+> snapshots and were never part of the Percy comparison.
+
+## Master table — VISUAL (what Percy compares)
+
+| Scenario (story)                                              | PUI in the test | Percy compares vs accordion? | State       | Why                                                                                                                                                                                                                                                      |
+| ------------------------------------------------------------- | --------------- | ---------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **basic**                                                     | `PUI-6111`      | ✅ Yes                       | Same        | Equivalent story                                                                                                                                                                                                                                         |
+| **custom actions** (RenderCustomActions)                      | `PUI-7772`      | ✅ Yes                       | Same        | Equivalent story                                                                                                                                                                                                                                         |
+| **multiple**                                                  | `PUI-7982`      | ✅ Yes                       | Same        | Identical story                                                                                                                                                                                                                                          |
+| **aria-disabled** (ApplyAriaDisabled)                         | `PUI-14324`     | ✅ Yes                       | Same        | Identical story                                                                                                                                                                                                                                          |
+| **scrollable-content**                                        | `PUI-17174`     | ✅ Yes                       | Same        | Equivalent story — but the expected diff is **NOT cosmetic**: the native slot does not apply style-props → no scroll. Defect **[PUI-18640](https://jira.elliemae.io/browse/PUI-18640)**                                                                  |
+| **wrapLabel**                                                 | `PUI-17178`     | ✅ Yes                       | Same        | Equivalent story                                                                                                                                                                                                                                         |
+| **actionable-within** (01 input focused + 02 open datepicker) | `PUI-9964`      | ✅ Yes                       | Same\*      | \*`Tab`×2 restored for 01; 02 opens the same `DSControlledDateTimePicker` calendar (`getDatepickerBtn` CO method added). Diff reveals whether focus reaches the input (custom actions are siblings of `<summary>`)                                       |
+| **header props** (HeaderControlExamples)                      | `PUI-7979`      | ✅ Yes                       | Same        | The MiniToolbar (DDmenu) section was added to the native story so it matches accordion (3 sections); the diff now surfaces the real layout deltas                                                                                                        |
+| **global height**                                             | `PUI-8321`      | ✅ Yes                       | Same        | Both stories: item 0 opened via `activeValue={0}` + an "Add row" button (legacy `ds-legacy-datagrids` removed). The **visual test clicks "Add row" ×3 then snapshots** → verifies the panel grows to fit and looks right (not trimmed) after adding rows |
+| **slots**                                                     | `PUI-15348`     | ✅ Yes                       | Same        | Native consumes the same `styleOverrides` colors (verified in the DOM); the diff reflects the slot-tree mapping (native `summary/heading/chevron` vs accordion `header/header-container/addon`), not broken theming                                      |
+| **header props 02** (open toolbar)                            | `PUI-7979`      | ✅ Yes                       | Same        | Implemented in native: MiniToolbar section added + `getToolbarByIndex` CO method; the open-dropdown state compares against accordion                                                                                                                     |
+| **actionable-within 02** (open datepicker)                    | `PUI-9964`      | ✅ Yes                       | Same        | Implemented: native renders the same `DSControlledDateTimePicker`; added `getDatepickerBtn` CO method + the 02 it                                                                                                                                        |
+| **desktop-to-mobile**                                         | `PUI-18083`     | ❌ No                        | Modified    | Accordion swaps to `DSMobileAccordion`; native renders itself (different component)                                                                                                                                                                      |
+| **tooltip**                                                   | —               | ⬜ Not present               | Not covered | Native has no truncation tooltip; default is now wrap. Defect **[PUI-18641](https://jira.elliemae.io/browse/PUI-18641)**                                                                                                                                 |
+| **long content**                                              | —               | ⬜ Not present               | Not covered | Accordion's PUI-9965 reuses the **Tooltip** story (hover long titles → truncation tooltip). Native has no tooltip → gap. See **[PUI-18641](https://jira.elliemae.io/browse/PUI-18641)**                                                                  |
+
+**How to read the Percy report:** every **✅ row** pairs against an accordion baseline (same snapshot
+name). The only **❌ row** left is **desktop-to-mobile** (`PUI-18083`) — it generates a separate
+native snapshot (different component), so if you see it "without baseline" or as new, that's expected;
+don't compare it. The **⬜** rows generate nothing.
+
+## Table — FUNCTIONAL / AXE (native regression, NOT Percy)
+
+All under `PUI-18083` by design: they produce no snapshots and are not compared visually. They are
+the regression that proves functionality survives. Here "modified" = the dev **adapted** it to the
+native DOM (correct), not that it is broken.
+
+| Scenario                                                                                                                                                                                                     | In native? | Note                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| basic, multiple, keyboard-nav, custom-actions-hooks, conditional-render, keep-content, disabled, header-controls, role-heading, slots, aria-disabled, **header-structure**, **controlled**, **input-inside** | ✅ Covered | Several **adapted** to the native DOM (`role=heading`→`<h3>`, id→index, `CellCO`→`data-testid`) — expected to **pass**. `header-structure` mirrors accordion PUI-18621; `controlled` + `input-inside` are new coverage added to **both** suites                                                                                                                                                               |
+| **tooltip** (func + axe)                                                                                                                                                                                     | ⬜ Removed | Native has no tooltip — see [PUI-18641](https://jira.elliemae.io/browse/PUI-18641)                                                                                                                                                                                                                                                                                                                            |
+| **useRef focus** (func + axe)                                                                                                                                                                                | ✅ Covered | **Verified working in the browser**: passing `dsAccordionnativeItemSummary={{ innerRef }}` forwards a usable ref to the `<summary>` (clicking the button focuses item 0). Native story + func/axe restored. NB: the _item-level_ `innerRef` prop is not exposed, but the **summary slot** path works (native slots use `ds-system styled()` — same machinery as accordion's `dsAccordionItemHeader` innerRef) |
+| **toolbar** (axe header-controls 02)                                                                                                                                                                         | ✅ Covered | Added: MiniToolbar (DDmenu) in the story + `getToolbarByIndex` CO method; the axe 02 opens the dropdown and scans                                                                                                                                                                                                                                                                                             |
+
+## Story coverage parity (vs ds-accordion e2e)
+
+All **21** `stories/ds-accordion/e2e` stories have a native counterpart — **no presence gap**. Test
+coverage now matches the accordion suite, with these notes:
+
+- **Added for parity:** native **`header-structure`** func (mirrors accordion PUI-18621); **`controlled`**
+  and **`input-inside`** func specs in **both** suites. **GlobalHeight** now has an "Add row" button and its
+  **visual test clicks it ×3 then snapshots** — the dynamic-growth/looks-right check lives in the visual
+  test (not a separate func test), since "global height" is fundamentally a visual concern.
+- **Default-open nuance (documented, not a defect):** `ds-accordion` opens item 0 by default in the
+  GlobalHeight story while `ds-accordion-native` opens nothing when uncontrolled (`initialActive = null`).
+  Native **does support open-by-default** via `activeValue` (or the item `open` prop) — it just doesn't
+  auto-open the first item implicitly. The GlobalHeight stories now set `activeValue={0}` in both, so
+  this is moot for the test; a migrating consumer relying on the implicit auto-open would add `activeValue`.
+- **Accordion `controlled` + `input-inside` describes use `PUI-XXXXX` placeholders** → they need new
+  JIRA test tickets. (Also fixed the accordion CO `inputInside` URL — it had a wrong-case story id.)
+- **Still gaps (blocked on defects):** `tooltip` / `long-content` ([PUI-18641](https://jira.elliemae.io/browse/PUI-18641), no native tooltip);
+  `XstyledpropsInContent` ([PUI-18640](https://jira.elliemae.io/browse/PUI-18640) — content slot drops the `p` padding prop too).
+
+## Defects / parity findings
+
+| Ticket                                                 | Component           | Summary                                                                                                                                                                                                                                                                                                                                                           | Status |
+| ------------------------------------------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
+| [PUI-18640](https://jira.elliemae.io/browse/PUI-18640) | ds-accordion-native | The `dsAccordionnativeItemContentContainer` slot **does not apply style-props** — `maxHeight`/`overflow` (scrollable-content) **and** padding `p` (XstyledpropsInContent) — the way `ds-accordion` does. Same story → accordion clips/scrolls/pads, native does not. **Breaking change** for consumers that style the content via the slot. Relates to PUI-18083. | Open   |
+| [PUI-18641](https://jira.elliemae.io/browse/PUI-18641) | ds-accordion-native | Default title behavior changed from **truncate-with-tooltip** (accordion) to **wrap** (native). With `wrapLabel={false}` the title truncates with an ellipsis but **still shows no tooltip on hover** → the full text cannot be read. No story demonstrates truncate+tooltip. **Backwards-incompatible** default + readability gap. Relates to PUI-18083.         | Open   |
+| [PUI-18642](https://jira.elliemae.io/browse/PUI-18642) | ds-accordion-native | Arrow Icon visual spec violations (Accordion Draft v1.5.0): **(1)** region width is not the spec'd **20px**; **(2)** when the title wraps the Arrow Icon is **center-aligned instead of top-aligned** (spec: "Fixed Top-aligned — Region A"). Relates to PUI-18083.                                                                                               | Open   |
+
+> Why PUI-18640 is not a story bug: the native E2E story is a **faithful copy** of the accordion one
+> (same `maxHeight: 100, overflow: 'auto'` passed as bare keys). In accordion it works because the
+> slot interprets style-props; in native it does not. DOM evidence: accordion `max-height: 100px`
+> (via the generated class) / native `max-height: none`. The native `examples/ScrollableContent`
+> uses `style:{}` as a workaround.
+
+---
+
+_Full detail (A/B/C/D divergence audit, Percy mechanism, and run commands) in
+[`stories/ds-accordion-native/POC_FINDINGS.md`](../../stories/ds-accordion-native/POC_FINDINGS.md)._

package/ds-accordion-native/aria-disabled/DSAccordionNative.aria-disabled.visual.spec.js

@@ -2,7 +2,8 @@ import { Key } from 'webdriverio';
 import DSAccordionNativeCO from '../DSAccordionNativeCO';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
-  describe('PUI-18083 - AccordionNative:: ApplyAriaDisabled prop - visual tests', () => {
+  // Percy-aligned with ds-accordion (story content identical). See POC_FINDINGS.md.
+  describe('PUI-14324 - Accordion:: ApplyAriaDisabled prop - visual tests', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAccordionNativeCO.applyAriaDisabled.go();
       if (errorOnGo) throw errorOnGo;

package/ds-accordion-native/controlled/DSAccordionNative.controlled.func.spec.js

@@ -0,0 +1,22 @@
+import DSAccordionNativeCO from '../DSAccordionNativeCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18083 - AccordionNative, controlled -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.controlled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: single-open: opening another item collapses the previously open one', async () => {
+      await expect(await DSAccordionNativeCO.getAccordionHeader(0)).toHaveAttribute('aria-expanded', 'true');
+      await (await DSAccordionNativeCO.getAccordionHeader(1)).click();
+      await expect(await DSAccordionNativeCO.getAccordionHeader(1)).toHaveAttribute('aria-expanded', 'true');
+      await expect(await DSAccordionNativeCO.getAccordionHeader(0)).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('02: multiple-open: opening two items keeps both expanded', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(3)).click();
+      await (await DSAccordionNativeCO.getAccordionHeader(4)).click();
+      await expect(await DSAccordionNativeCO.getAccordionHeader(3)).toHaveAttribute('aria-expanded', 'true');
+      await expect(await DSAccordionNativeCO.getAccordionHeader(4)).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+}

package/ds-accordion-native/header-structure/DSAccordionNative.header-structure.func.spec.js

@@ -0,0 +1,53 @@
+import DSAccordionNativeCO from '../DSAccordionNativeCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  // Native equivalent of the ds-accordion PUI-18621 structural test. In native the heading is a real
+  // <h3> inside <summary> and custom actions render as a SIBLING of <details>, so the heading contains
+  // NO interactive elements (the toggle IS the <summary>) and the actions live outside it.
+  describe('PUI-18083 - AccordionNative:: heading structure (custom actions outside heading) - func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.headerControls.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: heading (h3) should contain no interactive elements', async () => {
+      const heading = await DSAccordionNativeCO.getHeadingByIndex(0);
+      await expect(await heading.getTagName()).toBe('h3');
+      const buttonsInsideHeading = await heading.$$('button');
+      await expect(buttonsInsideHeading.length).toBe(0);
+    });
+
+    it('02: custom actions container should exist outside the heading', async () => {
+      const customActionsContainer = await DSAccordionNativeCO.getAccordionItemCustomActionsContainerSlotByIndex(0);
+      await expect(customActionsContainer).toExist();
+    });
+
+    it('03: action buttons in custom actions container should reflect correct enabled/disabled state', async () => {
+      const enabledContainer = await DSAccordionNativeCO.getAccordionItemCustomActionsContainerSlotByIndex(0);
+      const enabledButton = await enabledContainer.$('[data-testid="ds-button"]');
+      await expect(enabledButton).toBeDisplayed();
+      await expect(enabledButton).toBeEnabled();
+
+      const disabledContainer = await DSAccordionNativeCO.getAccordionItemCustomActionsContainerSlotByIndex(2);
+      const disabledButton = await disabledContainer.$('[data-testid="ds-button"]');
+      await expect(disabledButton).toBeDisplayed();
+      await expect(disabledButton).not.toBeEnabled();
+    });
+
+    it('04: toolbar trigger in custom actions should open dropdown menu on click', async () => {
+      const toolbar = await DSAccordionNativeCO.getToolbarByIndex(0);
+      // The native ellipsis sits at the far-right edge of the header (custom actions are a sibling
+      // of <details>); a WebDriver coordinate click is flaky there and the menu doesn't open. A
+      // direct DOM click reliably toggles the DSDropdownMenuV2 (verified in the rendered DOM).
+      await browser.execute((el) => el.click(), toolbar);
+      const firstMenuOption = await $('*=Login');
+      await firstMenuOption.waitForDisplayed();
+      await expect(firstMenuOption).toBeDisplayed();
+    });
+  });
+}

package/ds-accordion-native/input-inside/DSAccordionNative.input-inside.func.spec.js

@@ -0,0 +1,16 @@
+import DSAccordionNativeCO from '../DSAccordionNativeCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18083 - AccordionNative, input inside content -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.inputInside.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should type into an input rendered inside the open accordion item', async () => {
+      const input = await $('[data-testid="task-name"]');
+      await input.waitForDisplayed();
+      await input.setValue('Test task');
+      await expect(input).toHaveValue('Test task');
+    });
+  });
+}

package/ds-accordion-native/scrollable-content/DSAccordionNative.scrollable-content.visual.spec.js

@@ -3,7 +3,8 @@ import { Key } from 'webdriverio';
 import DSAccordionNativeCO from '../DSAccordionNativeCO';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
-  describe('PUI-18083 - AccordionNative: Scrollable content -Visual', () => {
+  // Percy-aligned with ds-accordion (story content equivalent). See POC_FINDINGS.md.
+  describe('PUI-17174 - Accordion: Scrollable content -Visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAccordionNativeCO.scrollableContent.go();
       if (errorOnGo) throw errorOnGo;

package/ds-accordion-native/slots/DSAccordionNative.slots.visual.spec.js

@@ -1,7 +1,10 @@
 import DSAccordionNativeCO from '../DSAccordionNativeCO';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
-  describe('PUI-18083 - AccordionNative: Slots -Visual', () => {
+  // Percy-aligned with ds-accordion: native consumes the same styleOverrides colors (verified in the
+  // DOM). The diff reflects the slot-tree mapping (native summary/heading/chevron vs accordion
+  // header/header-container/addon), not broken theming. See QA_NOTES.
+  describe('PUI-15348 - Accordion: Slots -Visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAccordionNativeCO.slotsURL.go();
       if (errorOnGo) throw errorOnGo;

package/ds-accordion-native/wrapLabel/DSAccordionNative.wrap-label.visual.spec.js

@@ -3,7 +3,8 @@ import { Key } from 'webdriverio';
 import DSAccordionNativeCO from '../DSAccordionNativeCO';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
-  describe('PUI-18083 - AccordionNative: wrapLabel -Visual', () => {
+  // Percy-aligned with ds-accordion (story content equivalent). See POC_FINDINGS.md.
+  describe('PUI-17178 - Accordion: wrapLabel -Visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAccordionNativeCO.wrapLabel.go();
       if (errorOnGo) throw errorOnGo;
@@ -13,9 +14,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await (await DSAccordionNativeCO.getAccordionHeader(1)).waitForDisplayed();
       await browser.keys(Key.Tab);
       await browser.keys(Key.Return);
-      const snapshot = await browser.eyesCheckSnapshot(
-        DSAccordionNativeCO.snapshotPath('accordion-native-wrap-label'),
-      );
+      const snapshot = await browser.eyesCheckSnapshot(DSAccordionNativeCO.snapshotPath('accordion-native-wrap-label'));
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-form-date-range-picker/date-segment-aria-labels/DateRangePicker.date-segment-aria-labels.func.spec.js

@@ -0,0 +1,64 @@
+import { Key } from 'webdriverio';
+import DateRangePickerCO from '../DateRangePickerCO';
+
+// Tests for the fix introduced in PUI-15568 — each day/month/year segment now exposes a
+// name-only aria-label ("day"/"month"/"year") with no native role word and no sibling-field
+// state; per-field state lives on role="spinbutton" + aria-valuetext.
+// Chrome-only: pure DOM-attribute assertions are identical across browsers.
+
+// Asserts a single segment input is name-only: aria-label === field name, spinbutton role,
+// empty value-text, and none of the leaked phrases the defect used to inject into the label.
+const assertNameOnlyEmptySegment = async (input, name) => {
+  await expect(input).toHaveAttribute('aria-label', name);
+  await expect(input).toHaveAttribute('role', 'spinbutton');
+  await expect(input).toHaveAttribute('aria-valuetext', 'empty');
+  const label = await input.getAttribute('aria-label');
+  expect(label).not.toContain('input field');
+  expect(label).not.toContain('current values');
+};
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18653 - DSControlledDateRangePicker:: date segment aria-labels - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateRangePickerCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    // Static reads on the empty initial state — consolidated into one it() (no interaction).
+    // index 0 = Start date group, index 1 = End date group.
+    it('01: each segment exposes a name-only aria-label, spinbutton role and empty value-text', async () => {
+      // Start date group
+      await assertNameOnlyEmptySegment(await DateRangePickerCO.getMonthInputByIndex(0), 'month');
+      await assertNameOnlyEmptySegment(await DateRangePickerCO.getDayInputByIndex(0), 'day');
+      await assertNameOnlyEmptySegment(await DateRangePickerCO.getYearInputByIndex(0), 'year');
+      // End date group
+      await assertNameOnlyEmptySegment(await DateRangePickerCO.getMonthInputByIndex(1), 'month');
+      await assertNameOnlyEmptySegment(await DateRangePickerCO.getDayInputByIndex(1), 'day');
+      await assertNameOnlyEmptySegment(await DateRangePickerCO.getYearInputByIndex(1), 'year');
+    });
+
+    it('02: filling one segment does not leak its value into sibling aria-labels', async () => {
+      const month = await DateRangePickerCO.getMonthInputByIndex(0);
+      await month.click();
+      await browser.keys(Key.ArrowUp); // 01 / January
+      await browser.keys(Key.ArrowUp); // 02 / February
+
+      // filled field announces its OWN value via aria-valuetext; label stays name-only
+      await expect(month).toHaveAttribute('aria-label', 'month');
+      await expect(month).toHaveAttribute('aria-valuetext', 'February');
+
+      // siblings stay name-only + empty — no "February" leaks into their names
+      const day = await DateRangePickerCO.getDayInputByIndex(0);
+      const year = await DateRangePickerCO.getYearInputByIndex(0);
+      await expect(day).toHaveAttribute('aria-label', 'day');
+      await expect(day).toHaveAttribute('aria-valuetext', 'empty');
+      await expect(year).toHaveAttribute('aria-label', 'year');
+      await expect(year).toHaveAttribute('aria-valuetext', 'empty');
+    });
+  });
+}

package/ds-shuttle-v2/DSShuttleV2CO.js

@@ -12,6 +12,7 @@ const DSShuttleV2DataTestIds = {
   ITEM_LABEL_WRAPPER: 'ds-shuttlev2-item-label-wrapper',
   ITEM_MIDSECTION_WRAPPER: 'ds-shuttlev2-item-midsection-wrapper',
   ITEM_SELECTION: 'ds-shuttlev2-item-selection',
+  ITEM_SELECTION_CHECKBOX_UI: 'ds-shuttlev2-item-selection-checkbox-ui',
   ITEM_ACTIONS_WRAPPER: 'ds-shuttlev2-item-actions-wrapper',
   ITEM_ACTION_WRAPPER: 'ds-shuttlev2-item-action-wrapper',
   ITEM_ACTION_BTN: 'ds-shuttlev2-item-action-btn',
@@ -77,6 +78,8 @@ export default class DSShuttleV2CO extends PageObject {
 
   static insideDialogURL = new Urlbuilder(PATH_E2E_SHUTTLE_V2, 'inside-dialog-test');
 
+  static explicitSelectionUIURL = new Urlbuilder(PATH_E2E_SHUTTLE_V2, 'explicit-selection-ui-test');
+
   // Getter's
 
   static getHeaderSearchIcon = async (index = 0) =>
@@ -103,6 +106,14 @@ export default class DSShuttleV2CO extends PageObject {
 
   static getItemSelection = async (index = 0) => $$(`[data-testid=${DSShuttleV2DataTestIds.ITEM_SELECTION}]`)[index];
 
+  static getItemSelectionCheckboxUI = async (index = 0) =>
+    $$(`[data-testid=${DSShuttleV2DataTestIds.ITEM_SELECTION_CHECKBOX_UI}]`)[index];
+
+  static getItemSelections = async () => $$(`[data-testid=${DSShuttleV2DataTestIds.ITEM_SELECTION}]`);
+
+  static getItemSelectionCheckboxUIs = async () =>
+    $$(`[data-testid=${DSShuttleV2DataTestIds.ITEM_SELECTION_CHECKBOX_UI}]`);
+
   static getItemsActionsWrapper = async (index = 0) =>
     $$(`[data-testid=${DSShuttleV2DataTestIds.ITEM_ACTIONS_WRAPPER}]`)[index];
 

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

@@ -0,0 +1,37 @@
+import DSShuttleV2CO from '../DSShuttleV2CO';
+
+// Tests for the WCAG 1.4.1 "Use of Color" fix introduced in PUI-15539:
+// the `explicitSelectionUI` flag swaps the color-only vertical bar for an
+// explicit checkbox as the per-item selection indicator.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18638 - DSShuttleV2:: explicitSelectionUI checkbox indicator - func', () => {
+    before(async () => {
+      const errorOnGo = await DSShuttleV2CO.explicitSelectionUIURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render an explicit checkbox indicator per item and no color-only vertical bar', async () => {
+      const verticalBars = await DSShuttleV2CO.getItemSelections();
+      const checkboxUIs = await DSShuttleV2CO.getItemSelectionCheckboxUIs();
+      await expect(verticalBars.length).toBe(0);
+      await expect(checkboxUIs.length).toBeGreaterThan(0);
+      await expect(await DSShuttleV2CO.getItemSelectionCheckboxUI(0)).toBeExisting();
+    });
+
+    it('02: should check the selection indicator after selecting a selectable item', async () => {
+      const selectableItem = await DSShuttleV2CO.getItemWrapper(0); // "Source 0.0" — even index, selectable
+      const selectableCheckbox = await DSShuttleV2CO.getItemCheckboxByIndex(0);
+      await expect(await selectableCheckbox.getAttribute('aria-checked')).toBe('false');
+      await selectableItem.click();
+      await expect(await selectableCheckbox.getAttribute('aria-checked')).toBe('true');
+    });
+
+    it('03: should keep the selection-prevented item disabled and unchecked after click', async () => {
+      const preventedItem = await DSShuttleV2CO.getItemWrapper(1); // "Source 0.1" — odd index, prevented
+      const preventedCheckbox = await DSShuttleV2CO.getItemCheckboxByIndex(1);
+      await expect(await preventedCheckbox.getAttribute('aria-disabled')).toBe('true');
+      await preventedItem.click();
+      await expect(await preventedCheckbox.getAttribute('aria-checked')).toBe('false');
+    });
+  });
+}

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

@@ -0,0 +1,27 @@
+import DSShuttleV2CO from '../DSShuttleV2CO';
+
+// Visual coverage for the WCAG 1.4.1 "Use of Color" fix (PUI-15539): with
+// `explicitSelectionUI`, items expose unselected, selected and disabled
+// checkbox states as a non-color selection indicator.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18639 - DSShuttleV2:: explicitSelectionUI checkbox indicators - visual', () => {
+    before(async () => {
+      const errorOnGo = await DSShuttleV2CO.explicitSelectionUIURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display unselected checkboxes and disabled checkboxes on prevented items', async () => {
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display checked checkboxes and the BAB after selecting selectable items', async () => {
+      const firstSelectable = await DSShuttleV2CO.getItemWrapper(0); // "Source 0.0" — selectable
+      await firstSelectable.click();
+      const secondSelectable = await DSShuttleV2CO.getItemWrapper(2); // "Source 0.2" — selectable
+      await secondSelectable.click();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "dimsum-e2e-tests",
-  "version": "3.70.0-next.39",
+  "version": "3.70.0-next.40",
   "description": "End-to-end tests for dimsum library",
   "dependencies": {
     "@elliemae/ds-legacy-button": "1.0.16",
@@ -39,155 +39,155 @@
     "@elliemae/ds-legacy-wysiwygeditor": "1.0.16",
     "@elliemae/ds-legacy-zipcode-search": "1.0.16",
     "@elliemae/ds-legacy-zoom": "1.0.16",
-    "@elliemae/ds-accessibility": "3.70.0-next.39",
-    "@elliemae/ds-accordion": "3.70.0-next.39",
-    "@elliemae/ds-accordion-native": "3.70.0-next.39",
-    "@elliemae/ds-app-picker": "3.70.0-next.39",
-    "@elliemae/ds-basic": "3.70.0-next.39",
-    "@elliemae/ds-banner": "3.70.0-next.39",
-    "@elliemae/ds-breadcrumb": "3.70.0-next.39",
-    "@elliemae/ds-backdrop": "3.70.0-next.39",
-    "@elliemae/ds-button-v2": "3.70.0-next.39",
-    "@elliemae/ds-card": "3.70.0-next.39",
-    "@elliemae/ds-card-v1": "3.70.0-next.39",
-    "@elliemae/ds-card-navigation": "3.70.0-next.39",
-    "@elliemae/ds-card-v1-detail": "3.70.0-next.39",
-    "@elliemae/ds-card-v2-action-addon": "3.70.0-next.39",
-    "@elliemae/ds-card-v2": "3.70.0-next.39",
-    "@elliemae/ds-card-v3": "3.70.0-next.39",
-    "@elliemae/ds-card-v3-poc": "3.70.0-next.39",
-    "@elliemae/ds-chat": "3.70.0-next.39",
-    "@elliemae/ds-card-v2-group": "3.70.0-next.39",
-    "@elliemae/ds-chat-bubble": "3.70.0-next.39",
-    "@elliemae/ds-chat-card": "3.70.0-next.39",
-    "@elliemae/ds-chat-container-header": "3.70.0-next.39",
-    "@elliemae/ds-chat-empty-state": "3.70.0-next.39",
-    "@elliemae/ds-chat-floating-button": "3.70.0-next.39",
-    "@elliemae/ds-chat-container": "3.70.0-next.39",
-    "@elliemae/ds-chat-message-delimeter": "3.70.0-next.39",
-    "@elliemae/ds-chat-sidebar": "3.70.0-next.39",
-    "@elliemae/ds-chat-system-message": "3.70.0-next.39",
-    "@elliemae/ds-chip": "3.70.0-next.39",
-    "@elliemae/ds-chat-tile": "3.70.0-next.39",
-    "@elliemae/ds-circular-progress-indicator": "3.70.0-next.39",
-    "@elliemae/ds-classnames": "3.70.0-next.39",
-    "@elliemae/ds-codeeditor": "3.70.0-next.39",
-    "@elliemae/ds-controlled-form": "3.70.0-next.39",
-    "@elliemae/ds-comments": "3.70.0-next.39",
-    "@elliemae/ds-csv-converter": "3.70.0-next.39",
-    "@elliemae/ds-data-table": "3.70.0-next.39",
-    "@elliemae/ds-data-table-action-cell": "3.70.0-next.39",
-    "@elliemae/ds-data-table-cell": "3.70.0-next.39",
-    "@elliemae/ds-data-table-cell-header": "3.70.0-next.39",
-    "@elliemae/ds-data-table-drag-and-drop-cell": "3.70.0-next.39",
-    "@elliemae/ds-data-table-expand-cell": "3.70.0-next.39",
-    "@elliemae/ds-data-table-multi-select-cell": "3.70.0-next.39",
-    "@elliemae/ds-data-table-filters": "3.70.0-next.39",
-    "@elliemae/ds-dataviz": "3.70.0-next.39",
-    "@elliemae/ds-dataviz-pie": "3.70.0-next.39",
-    "@elliemae/ds-data-table-single-select-cell": "3.70.0-next.39",
-    "@elliemae/ds-date-time-picker": "3.70.0-next.39",
-    "@elliemae/ds-decision-graph": "3.70.0-next.39",
-    "@elliemae/ds-dialog": "3.70.0-next.39",
-    "@elliemae/ds-drag-and-drop": "3.70.0-next.39",
-    "@elliemae/ds-dropdownmenu-v2": "3.70.0-next.39",
-    "@elliemae/ds-floating-context": "3.70.0-next.39",
-    "@elliemae/ds-filter-bar": "3.70.0-next.39",
-    "@elliemae/ds-fast-list": "3.70.0-next.39",
-    "@elliemae/ds-form-checkbox": "3.70.0-next.39",
-    "@elliemae/ds-dropzone": "3.70.0-next.39",
-    "@elliemae/ds-form-date-range-picker": "3.70.0-next.39",
-    "@elliemae/ds-form-combobox": "3.70.0-next.39",
-    "@elliemae/ds-form-date-time-picker": "3.70.0-next.39",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.39",
-    "@elliemae/ds-form-input-text": "3.70.0-next.39",
-    "@elliemae/ds-form-input-textarea": "3.70.0-next.39",
-    "@elliemae/ds-form-layout-blocks": "3.70.0-next.39",
-    "@elliemae/ds-form-layout-autocomplete": "3.70.0-next.39",
-    "@elliemae/ds-form-layout-input-group": "3.70.0-next.39",
-    "@elliemae/ds-form-multi-combobox": "3.70.0-next.39",
-    "@elliemae/ds-form-layout-label": "3.70.0-next.39",
-    "@elliemae/ds-form-radio": "3.70.0-next.39",
-    "@elliemae/ds-form-native-select": "3.70.0-next.39",
-    "@elliemae/ds-form-single-combobox": "3.70.0-next.39",
-    "@elliemae/ds-form-select": "3.70.0-next.39",
-    "@elliemae/ds-form-toggle": "3.70.0-next.39",
-    "@elliemae/ds-hooks-focus-stack": "3.70.0-next.39",
-    "@elliemae/ds-hooks-focus-trap": "3.70.0-next.39",
-    "@elliemae/ds-global-header": "3.70.0-next.39",
-    "@elliemae/ds-hooks-fontsize-detector": "3.70.0-next.39",
-    "@elliemae/ds-hooks-fontsize-media": "3.70.0-next.39",
-    "@elliemae/ds-grid": "3.70.0-next.39",
-    "@elliemae/ds-hooks-is-mobile": "3.70.0-next.39",
-    "@elliemae/ds-hooks-is-showing-ellipsis": "3.70.0-next.39",
-    "@elliemae/ds-hooks-keyboard-navigation": "3.70.0-next.39",
-    "@elliemae/ds-hooks-on-blur-out": "3.70.0-next.39",
-    "@elliemae/ds-hooks-headless-tooltip": "3.70.0-next.39",
-    "@elliemae/ds-hooks-on-first-focus-in": "3.70.0-next.39",
-    "@elliemae/ds-icon": "3.70.0-next.39",
-    "@elliemae/ds-icons": "3.70.0-next.39",
-    "@elliemae/ds-imagelibrarymodal": "3.70.0-next.39",
-    "@elliemae/ds-image": "3.70.0-next.39",
-    "@elliemae/ds-indeterminate-progress-indicator": "3.70.0-next.39",
-    "@elliemae/ds-layout-provider": "3.70.0-next.39",
-    "@elliemae/ds-left-navigation": "3.70.0-next.39",
-    "@elliemae/ds-loading-indicator": "3.70.0-next.39",
-    "@elliemae/ds-menu-button": "3.70.0-next.39",
-    "@elliemae/ds-menu-items": "3.70.0-next.39",
-    "@elliemae/ds-menu-items-action": "3.70.0-next.39",
-    "@elliemae/ds-menu-items-commons": "3.70.0-next.39",
-    "@elliemae/ds-menu-items-multi": "3.70.0-next.39",
-    "@elliemae/ds-menu-items-section": "3.70.0-next.39",
-    "@elliemae/ds-menu-items-separator": "3.70.0-next.39",
-    "@elliemae/ds-menu-items-single": "3.70.0-next.39",
-    "@elliemae/ds-menu-items-single-with-submenu": "3.70.0-next.39",
-    "@elliemae/ds-menu-items-skeleton": "3.70.0-next.39",
-    "@elliemae/ds-menu-items-submenu": "3.70.0-next.39",
-    "@elliemae/ds-modal-slide": "3.70.0-next.39",
-    "@elliemae/ds-mobile": "3.70.0-next.39",
-    "@elliemae/ds-overlay": "3.70.0-next.39",
-    "@elliemae/ds-menu-tree-item": "3.70.0-next.39",
-    "@elliemae/ds-notification-badge": "3.70.0-next.39",
-    "@elliemae/ds-page-header-v1": "3.70.0-next.39",
-    "@elliemae/ds-page-header-v2": "3.70.0-next.39",
-    "@elliemae/ds-page-header": "3.70.0-next.39",
-    "@elliemae/ds-pagination": "3.70.0-next.39",
-    "@elliemae/ds-page-layout": "3.70.0-next.39",
-    "@elliemae/ds-pills-v2": "3.70.0-next.39",
-    "@elliemae/ds-props-helpers": "3.70.0-next.39",
-    "@elliemae/ds-portal": "3.70.0-next.39",
-    "@elliemae/ds-progress-indicator": "3.70.0-next.39",
-    "@elliemae/ds-query-builder": "3.70.0-next.39",
-    "@elliemae/ds-read-more": "3.70.0-next.39",
-    "@elliemae/ds-scrollable-container": "3.70.0-next.39",
-    "@elliemae/ds-ribbon": "3.70.0-next.39",
-    "@elliemae/ds-resizeable-container": "3.70.0-next.39",
-    "@elliemae/ds-separator": "3.70.0-next.39",
-    "@elliemae/ds-shared": "3.70.0-next.39",
-    "@elliemae/ds-shuttle-v2": "3.70.0-next.39",
-    "@elliemae/ds-side-panel": "3.70.0-next.39",
-    "@elliemae/ds-side-panel-header": "3.70.0-next.39",
-    "@elliemae/ds-square-indicator": "3.70.0-next.39",
-    "@elliemae/ds-slider-v2": "3.70.0-next.39",
-    "@elliemae/ds-skeleton": "3.70.0-next.39",
-    "@elliemae/ds-stepper": "3.70.0-next.39",
-    "@elliemae/ds-svg": "3.70.0-next.39",
-    "@elliemae/ds-system": "3.70.0-next.39",
-    "@elliemae/ds-tabs": "3.70.0-next.39",
-    "@elliemae/ds-toast": "3.70.0-next.39",
-    "@elliemae/ds-test-utils": "3.70.0-next.39",
-    "@elliemae/ds-toolbar-v1": "3.70.0-next.39",
-    "@elliemae/ds-toolbar-v2": "3.70.0-next.39",
-    "@elliemae/ds-tooltip-v3": "3.70.0-next.39",
-    "@elliemae/ds-tree-model": "3.70.0-next.39",
-    "@elliemae/ds-transition": "3.70.0-next.39",
-    "@elliemae/ds-treeview": "3.70.0-next.39",
-    "@elliemae/ds-truncated-expandable-text": "3.70.0-next.39",
-    "@elliemae/ds-wizard": "3.70.0-next.39",
-    "@elliemae/ds-typography": "3.70.0-next.39",
-    "@elliemae/ds-zustand-helpers": "3.70.0-next.39",
-    "@elliemae/ds-typescript-helpers": "3.70.0-next.39",
-    "@elliemae/ds-virtual-list": "3.70.0-next.39"
+    "@elliemae/ds-accessibility": "3.70.0-next.40",
+    "@elliemae/ds-accordion": "3.70.0-next.40",
+    "@elliemae/ds-backdrop": "3.70.0-next.40",
+    "@elliemae/ds-banner": "3.70.0-next.40",
+    "@elliemae/ds-accordion-native": "3.70.0-next.40",
+    "@elliemae/ds-app-picker": "3.70.0-next.40",
+    "@elliemae/ds-basic": "3.70.0-next.40",
+    "@elliemae/ds-breadcrumb": "3.70.0-next.40",
+    "@elliemae/ds-button-v2": "3.70.0-next.40",
+    "@elliemae/ds-card-navigation": "3.70.0-next.40",
+    "@elliemae/ds-card-v1-detail": "3.70.0-next.40",
+    "@elliemae/ds-card-v1": "3.70.0-next.40",
+    "@elliemae/ds-card": "3.70.0-next.40",
+    "@elliemae/ds-card-v2": "3.70.0-next.40",
+    "@elliemae/ds-card-v2-group": "3.70.0-next.40",
+    "@elliemae/ds-card-v2-action-addon": "3.70.0-next.40",
+    "@elliemae/ds-card-v3-poc": "3.70.0-next.40",
+    "@elliemae/ds-card-v3": "3.70.0-next.40",
+    "@elliemae/ds-chat-bubble": "3.70.0-next.40",
+    "@elliemae/ds-chat-card": "3.70.0-next.40",
+    "@elliemae/ds-chat": "3.70.0-next.40",
+    "@elliemae/ds-chat-container": "3.70.0-next.40",
+    "@elliemae/ds-chat-empty-state": "3.70.0-next.40",
+    "@elliemae/ds-chat-container-header": "3.70.0-next.40",
+    "@elliemae/ds-chat-floating-button": "3.70.0-next.40",
+    "@elliemae/ds-chat-message-delimeter": "3.70.0-next.40",
+    "@elliemae/ds-chat-sidebar": "3.70.0-next.40",
+    "@elliemae/ds-chat-system-message": "3.70.0-next.40",
+    "@elliemae/ds-chip": "3.70.0-next.40",
+    "@elliemae/ds-circular-progress-indicator": "3.70.0-next.40",
+    "@elliemae/ds-classnames": "3.70.0-next.40",
+    "@elliemae/ds-chat-tile": "3.70.0-next.40",
+    "@elliemae/ds-comments": "3.70.0-next.40",
+    "@elliemae/ds-codeeditor": "3.70.0-next.40",
+    "@elliemae/ds-csv-converter": "3.70.0-next.40",
+    "@elliemae/ds-data-table": "3.70.0-next.40",
+    "@elliemae/ds-controlled-form": "3.70.0-next.40",
+    "@elliemae/ds-data-table-action-cell": "3.70.0-next.40",
+    "@elliemae/ds-data-table-cell": "3.70.0-next.40",
+    "@elliemae/ds-data-table-cell-header": "3.70.0-next.40",
+    "@elliemae/ds-data-table-expand-cell": "3.70.0-next.40",
+    "@elliemae/ds-data-table-filters": "3.70.0-next.40",
+    "@elliemae/ds-data-table-drag-and-drop-cell": "3.70.0-next.40",
+    "@elliemae/ds-data-table-multi-select-cell": "3.70.0-next.40",
+    "@elliemae/ds-data-table-single-select-cell": "3.70.0-next.40",
+    "@elliemae/ds-dataviz": "3.70.0-next.40",
+    "@elliemae/ds-dataviz-pie": "3.70.0-next.40",
+    "@elliemae/ds-date-time-picker": "3.70.0-next.40",
+    "@elliemae/ds-dialog": "3.70.0-next.40",
+    "@elliemae/ds-drag-and-drop": "3.70.0-next.40",
+    "@elliemae/ds-decision-graph": "3.70.0-next.40",
+    "@elliemae/ds-dropzone": "3.70.0-next.40",
+    "@elliemae/ds-dropdownmenu-v2": "3.70.0-next.40",
+    "@elliemae/ds-fast-list": "3.70.0-next.40",
+    "@elliemae/ds-filter-bar": "3.70.0-next.40",
+    "@elliemae/ds-floating-context": "3.70.0-next.40",
+    "@elliemae/ds-form-checkbox": "3.70.0-next.40",
+    "@elliemae/ds-form-combobox": "3.70.0-next.40",
+    "@elliemae/ds-form-date-range-picker": "3.70.0-next.40",
+    "@elliemae/ds-form-input-text": "3.70.0-next.40",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.40",
+    "@elliemae/ds-form-date-time-picker": "3.70.0-next.40",
+    "@elliemae/ds-form-input-textarea": "3.70.0-next.40",
+    "@elliemae/ds-form-layout-blocks": "3.70.0-next.40",
+    "@elliemae/ds-form-layout-autocomplete": "3.70.0-next.40",
+    "@elliemae/ds-form-layout-input-group": "3.70.0-next.40",
+    "@elliemae/ds-form-layout-label": "3.70.0-next.40",
+    "@elliemae/ds-form-multi-combobox": "3.70.0-next.40",
+    "@elliemae/ds-form-native-select": "3.70.0-next.40",
+    "@elliemae/ds-form-radio": "3.70.0-next.40",
+    "@elliemae/ds-form-select": "3.70.0-next.40",
+    "@elliemae/ds-form-single-combobox": "3.70.0-next.40",
+    "@elliemae/ds-form-toggle": "3.70.0-next.40",
+    "@elliemae/ds-global-header": "3.70.0-next.40",
+    "@elliemae/ds-grid": "3.70.0-next.40",
+    "@elliemae/ds-hooks-focus-stack": "3.70.0-next.40",
+    "@elliemae/ds-hooks-focus-trap": "3.70.0-next.40",
+    "@elliemae/ds-hooks-fontsize-detector": "3.70.0-next.40",
+    "@elliemae/ds-hooks-fontsize-media": "3.70.0-next.40",
+    "@elliemae/ds-hooks-headless-tooltip": "3.70.0-next.40",
+    "@elliemae/ds-hooks-is-mobile": "3.70.0-next.40",
+    "@elliemae/ds-hooks-is-showing-ellipsis": "3.70.0-next.40",
+    "@elliemae/ds-hooks-keyboard-navigation": "3.70.0-next.40",
+    "@elliemae/ds-hooks-on-blur-out": "3.70.0-next.40",
+    "@elliemae/ds-hooks-on-first-focus-in": "3.70.0-next.40",
+    "@elliemae/ds-image": "3.70.0-next.40",
+    "@elliemae/ds-icon": "3.70.0-next.40",
+    "@elliemae/ds-icons": "3.70.0-next.40",
+    "@elliemae/ds-imagelibrarymodal": "3.70.0-next.40",
+    "@elliemae/ds-indeterminate-progress-indicator": "3.70.0-next.40",
+    "@elliemae/ds-layout-provider": "3.70.0-next.40",
+    "@elliemae/ds-left-navigation": "3.70.0-next.40",
+    "@elliemae/ds-menu-button": "3.70.0-next.40",
+    "@elliemae/ds-menu-items": "3.70.0-next.40",
+    "@elliemae/ds-loading-indicator": "3.70.0-next.40",
+    "@elliemae/ds-menu-items-action": "3.70.0-next.40",
+    "@elliemae/ds-menu-items-commons": "3.70.0-next.40",
+    "@elliemae/ds-menu-items-multi": "3.70.0-next.40",
+    "@elliemae/ds-menu-items-section": "3.70.0-next.40",
+    "@elliemae/ds-menu-items-single": "3.70.0-next.40",
+    "@elliemae/ds-menu-items-single-with-submenu": "3.70.0-next.40",
+    "@elliemae/ds-menu-items-separator": "3.70.0-next.40",
+    "@elliemae/ds-menu-items-skeleton": "3.70.0-next.40",
+    "@elliemae/ds-menu-items-submenu": "3.70.0-next.40",
+    "@elliemae/ds-menu-tree-item": "3.70.0-next.40",
+    "@elliemae/ds-mobile": "3.70.0-next.40",
+    "@elliemae/ds-modal-slide": "3.70.0-next.40",
+    "@elliemae/ds-notification-badge": "3.70.0-next.40",
+    "@elliemae/ds-page-header": "3.70.0-next.40",
+    "@elliemae/ds-page-header-v1": "3.70.0-next.40",
+    "@elliemae/ds-overlay": "3.70.0-next.40",
+    "@elliemae/ds-page-header-v2": "3.70.0-next.40",
+    "@elliemae/ds-page-layout": "3.70.0-next.40",
+    "@elliemae/ds-pagination": "3.70.0-next.40",
+    "@elliemae/ds-pills-v2": "3.70.0-next.40",
+    "@elliemae/ds-progress-indicator": "3.70.0-next.40",
+    "@elliemae/ds-props-helpers": "3.70.0-next.40",
+    "@elliemae/ds-portal": "3.70.0-next.40",
+    "@elliemae/ds-read-more": "3.70.0-next.40",
+    "@elliemae/ds-scrollable-container": "3.70.0-next.40",
+    "@elliemae/ds-resizeable-container": "3.70.0-next.40",
+    "@elliemae/ds-query-builder": "3.70.0-next.40",
+    "@elliemae/ds-separator": "3.70.0-next.40",
+    "@elliemae/ds-ribbon": "3.70.0-next.40",
+    "@elliemae/ds-shuttle-v2": "3.70.0-next.40",
+    "@elliemae/ds-side-panel": "3.70.0-next.40",
+    "@elliemae/ds-shared": "3.70.0-next.40",
+    "@elliemae/ds-skeleton": "3.70.0-next.40",
+    "@elliemae/ds-stepper": "3.70.0-next.40",
+    "@elliemae/ds-slider-v2": "3.70.0-next.40",
+    "@elliemae/ds-side-panel-header": "3.70.0-next.40",
+    "@elliemae/ds-svg": "3.70.0-next.40",
+    "@elliemae/ds-square-indicator": "3.70.0-next.40",
+    "@elliemae/ds-system": "3.70.0-next.40",
+    "@elliemae/ds-tabs": "3.70.0-next.40",
+    "@elliemae/ds-test-utils": "3.70.0-next.40",
+    "@elliemae/ds-toast": "3.70.0-next.40",
+    "@elliemae/ds-toolbar-v1": "3.70.0-next.40",
+    "@elliemae/ds-tooltip-v3": "3.70.0-next.40",
+    "@elliemae/ds-transition": "3.70.0-next.40",
+    "@elliemae/ds-tree-model": "3.70.0-next.40",
+    "@elliemae/ds-toolbar-v2": "3.70.0-next.40",
+    "@elliemae/ds-treeview": "3.70.0-next.40",
+    "@elliemae/ds-typescript-helpers": "3.70.0-next.40",
+    "@elliemae/ds-truncated-expandable-text": "3.70.0-next.40",
+    "@elliemae/ds-virtual-list": "3.70.0-next.40",
+    "@elliemae/ds-typography": "3.70.0-next.40",
+    "@elliemae/ds-zustand-helpers": "3.70.0-next.40",
+    "@elliemae/ds-wizard": "3.70.0-next.40"
   },
   "publishConfig": {
     "access": "public"

package/paths.js

@@ -314,6 +314,7 @@ export const PATH_E2E_TOAST = `${PATH_E2E}/Toast`;
 export const PATH_E2E_GLOBAL_HEADER = `${PATH_E2E}/Global-Header`;
 export const PATH_E2E_HOOK_FORM = `${PATH_E2E}/React-hook-form`;
 export const PATH_E2E_ACCORDION = `${PATH_E2E}/Accordion`;
+export const PATH_E2E_ACCORDION_PITFALLS = `${PATH_E2E_ACCORDION}/Pitfalls`;
 export const PATH_E2E_ACCORDION_NATIVE = `${PATH_E2E}/AccordionNative`;
 export const PATH_E2E_VIRTUAL_LIST = `${PATH_E2E}/Virtual-list`;
 export const PATH_E2E_COMBOBOX = `${PATH_E2E_END_OF_LIFE}/ComboboxV2`;