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

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

@@ -0,0 +1,200 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSAccordionNativeCO from './DSAccordionNativeCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-18083 - AccordionNative, basic -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the accordion closed', async () => {
+      const firstContent = await DSAccordionNativeCO.getContents(1);
+      await expect(firstContent).not.toBeDisplayedInViewport();
+    });
+    it('02: should open the accordion', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(1)).click();
+      const firstContent = await DSAccordionNativeCO.getContents(1);
+      await expect(firstContent).toBeDisplayedInViewport();
+    });
+    it('03: should open the third accordion closing the second', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(2)).click();
+      const firstContent = await DSAccordionNativeCO.getContents(1);
+      const secondContent = await DSAccordionNativeCO.getContents(2);
+      await expect(firstContent).not.toBeDisplayedInViewport();
+      await expect(secondContent).toBeDisplayedInViewport();
+    });
+    it('04: should close the accordion', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(2)).click();
+      const secondContent = await DSAccordionNativeCO.getContents(2);
+      await expect(secondContent).not.toBeDisplayedInViewport();
+    });
+  });
+}
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18083 - AccordionNative, multiple -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.multipleURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the accordion expanded', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(0)).click();
+      const firstContent = await DSAccordionNativeCO.getContents(0);
+      await expect(firstContent).toBeDisplayedInViewport();
+    });
+    it('02: should open the second accordion without closing the first', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(1)).click();
+      const firstContent = await DSAccordionNativeCO.getContents(0);
+      const secondContent = await DSAccordionNativeCO.getContents(1);
+      await expect(firstContent).toBeDisplayedInViewport();
+      await expect(secondContent).toBeDisplayedInViewport();
+    });
+    it('03: should close the second accordion', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(1)).click();
+      const firstContent = await DSAccordionNativeCO.getContents(0);
+      const secondContent = await DSAccordionNativeCO.getContents(1);
+      await expect(firstContent).toBeDisplayedInViewport();
+      await expect(secondContent).not.toBeDisplayedInViewport();
+    });
+    it('04: should close the first accordion', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(0)).click();
+      const firstContent = await DSAccordionNativeCO.getContents(0);
+      const secondContent = await DSAccordionNativeCO.getContents(1);
+      await expect(firstContent).not.toBeDisplayedInViewport();
+      await expect(secondContent).not.toBeDisplayedInViewport();
+    });
+  });
+
+  describe('PUI-18083 - AccordionNative, keyboard nav -a11y', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.customActions.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should press tab and focus on first accordion', async () => {
+      const firstAccordion = await DSAccordionNativeCO.getAccordionHeader(0);
+      await browser.keys(Key.Tab);
+      await expect(firstAccordion).toBeFocused();
+    });
+    // The POC renders the custom action as a SIBLING of <summary>, not inside it,
+    // so tabbing from summary lands on the action button next — same observable
+    // tab order as the prod accordion, achieved via DOM order instead of slot
+    // embedding.
+    it('02: should focus the first accordion button after press tab', async () => {
+      await browser.keys(Key.Tab);
+      const firstButton = await DSAccordionNativeCO.getButtonsByIndex(0);
+      await expect(firstButton).toBeFocused();
+    });
+    it('03: should focus the second accordion and expand it after press tab and space', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const secondAccordion = await DSAccordionNativeCO.getAccordionHeader(1);
+      const secondContent = await DSAccordionNativeCO.getContents(1);
+      await expect(secondAccordion).toBeFocused();
+      await expect(secondContent).toBeDisplayedInViewport();
+    });
+    it('04: should go back to the button when pressing shift+tab (goes backwards)', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      const firstButton = await DSAccordionNativeCO.getButtonsByIndex(0);
+      await expect(firstButton).toBeFocused();
+    });
+  });
+
+  describe('PUI-18083 - AccordionNative, Custom actions with hooks', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.customActionHooks.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have custom actions rendered with ON text by default', async () => {
+      const customAction1text = await (await DSAccordionNativeCO.getButtonsByIndex(0)).getText();
+      const customAction2text = await (await DSAccordionNativeCO.getButtonsByIndex(1)).getText();
+      const customAction3text = await (await DSAccordionNativeCO.getButtonsByIndex(2)).getText();
+      await expect(customAction1text).toEqual('on');
+      await expect(customAction2text).toEqual('on');
+      await expect(customAction3text).toEqual('on');
+    });
+    it('02: should re-render the first two custom actions when activating them to have OFF text', async () => {
+      const customAction1 = await DSAccordionNativeCO.getButtonsByIndex(0);
+      await customAction1.click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      const customAction1text = await customAction1.getText();
+      const customAction2text = await (await DSAccordionNativeCO.getButtonsByIndex(1)).getText();
+      const customAction3text = await (await DSAccordionNativeCO.getButtonsByIndex(2)).getText();
+      await expect(customAction1text).toEqual('off');
+      await expect(customAction2text).toEqual('off');
+      await expect(customAction3text).toEqual('on');
+    });
+  });
+
+  describe('PUI-18083 - AccordionNative, conditional render -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.conditionalRender.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display second accordion when condition is true', async () => {
+      const headers = await DSAccordionNativeCO.getAccordionHeaders();
+      // BaseRate, BaseRate2, BaseRate3 — index 1 is BaseRate2.
+      await headers[1].click();
+      const secondContent = await DSAccordionNativeCO.getContents(1);
+      await expect(secondContent).toBeDisplayedInViewport();
+    });
+    it('02: should remove second accordion from DOM after toggle', async () => {
+      const toggleBtn = await $('[data-testid="toggle-btn"]');
+      await toggleBtn.click();
+      // After the toggle, only 2 items remain (BaseRate + BaseRate3). Asserting
+      // count is more robust than asserting visibility on a removed node.
+      const headers = await DSAccordionNativeCO.getAccordionHeaders();
+      await expect(headers.length).toEqual(2);
+    });
+  });
+
+  describe('PUI-18083 - AccordionNative, keep content mounted -a11y', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.keepContentURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have accordion closed and content existing in DOM by default', async () => {
+      const accordionContent = await $('[data-testid="accordion-native-keep-content"]');
+      await expect(accordionContent).toExist();
+      await expect(accordionContent).not.toBeDisplayed();
+    });
+    it('02: should have accordion expanded and content visible', async () => {
+      const firstAccordion = await DSAccordionNativeCO.getAccordionHeader(0);
+      await firstAccordion.click();
+      const accordionContent = await $('[data-testid="accordion-native-keep-content"]');
+      await expect(accordionContent).toBeDisplayed();
+    });
+    it('03: should have accordion closed and content still in DOM', async () => {
+      const firstAccordion = await DSAccordionNativeCO.getAccordionHeader(0);
+      await firstAccordion.click();
+      const accordionContent = await $('[data-testid="accordion-native-keep-content"]');
+      await expect(accordionContent).not.toBeDisplayed();
+      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

@@ -0,0 +1,158 @@
+import { Key } from 'webdriverio';
+import DSAccordionNativeCO from './DSAccordionNativeCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // 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;
+    });
+    it('01: should display all closed', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(1)).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSAccordionNativeCO.snapshotPath('accordion-native-closed'));
+      await expect(snapshot).toEqual(0);
+    });
+    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'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display focus on the second, hover on third', async () => {
+      await mouseOver(await DSAccordionNativeCO.getAccordionHeader(2));
+      const snapshot = await browser.checkSnapshot(
+        DSAccordionNativeCO.snapshotPath('accordion-native-interacted-states'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  // 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;
+    });
+    it('01: should display accordion expanded with header props', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(1)).waitForDisplayed();
+      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'));
+      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);
+    });
+  });
+
+  // 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;
+    });
+    it('01: should display accordion with custom actions collapsed', async () => {
+      const snapshot = await browser.checkSnapshot(
+        DSAccordionNativeCO.snapshotPath('accordion-native-customactions-col'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display accordion with custom actions expanded', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(0)).waitForDisplayed();
+      await (await DSAccordionNativeCO.getAccordionHeader(0)).click();
+      const snapshot = await browser.checkSnapshot(
+        DSAccordionNativeCO.snapshotPath('accordion-native-customactions-exp'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  // 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;
+    });
+    it('01: should corectly display two expanded accordions', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(0)).click();
+      await (await DSAccordionNativeCO.getAccordionHeader(1)).click();
+      const firstContent = await DSAccordionNativeCO.getContents(0);
+      const secondContent = await DSAccordionNativeCO.getContents(1);
+      await firstContent.waitForDisplayed();
+      await secondContent.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSAccordionNativeCO.snapshotPath('accordion-native-two-expanded'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  // 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 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);
+    });
+  });
+
+  // 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 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();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should expand one accordion and hover the other', async () => {
+      await (await DSAccordionNativeCO.getAccordionHeader(1)).click();
+      const snapshot = await browser.checkSnapshot(
+        DSAccordionNativeCO.snapshotPath('accordion-native-tomobile-interacted'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-accordion-native/DSAccordionNativeCO.js

@@ -0,0 +1,161 @@
+/* eslint-disable import/no-relative-packages */
+import { ACCORDION_NATIVE_DATA_TESTID } from '@elliemae/ds-accordion-native';
+import { PATH_E2E_ACCORDION_NATIVE } from '../paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSAccordionNativeCO extends PageObject {
+  // Desktop URLs
+  static basicURL = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'basic-test');
+
+  static multipleURL = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'multiple-test');
+
+  static controlled = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'controlled-test');
+
+  static disabled = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'disabled-test');
+
+  static applyAriaDisabled = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'apply-aria-disabled-test');
+
+  static subtitle = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'with-secondary-title-test');
+
+  static headerControls = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'header-control-examples-test');
+
+  static customActions = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'render-custom-actions-test');
+
+  static scrollableContent = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'scrollable-content-test');
+
+  static wrapLabel = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'wrap-label');
+
+  static toMobileURL = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'desktop-to-mobile-test');
+
+  static slotsURL = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'slots-test');
+
+  static customActionHooks = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'custom-actions-with-hooks');
+
+  static datepickerInside = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'actionable-within');
+
+  static conditionalRender = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'pui-11406-null-check');
+
+  static inputInside = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'pui-9261-input-inside');
+
+  static xstyledContent = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'xstyledprops-in-content');
+
+  static tooltip = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'tooltip');
+
+  static globalHeight = new Urlbuilder(PATH_E2E_ACCORDION_NATIVE, 'global-height');
+
+  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');
+  }
+
+  // Core selectors
+  static async getWrapper() {
+    return $(`[data-testid="${ACCORDION_NATIVE_DATA_TESTID.ROOT}"]`);
+  }
+
+  // The POC's "click target" is <summary>; this is what gets focused / pressed /
+  // hovered in tests — equivalent to the prod accordion's "accordion header".
+  static async getAccordionHeaders() {
+    return $$(`[data-testid="${ACCORDION_NATIVE_DATA_TESTID.ITEM_SUMMARY}"]`);
+  }
+
+  static async getAccordionHeader(index) {
+    return (await this.getAccordionHeaders())[index];
+  }
+
+  static async getAccordionItems() {
+    return $$(`[data-testid="${ACCORDION_NATIVE_DATA_TESTID.ITEM_CONTAINER}"]`);
+  }
+
+  static async getAccordionItem(index) {
+    return (await this.getAccordionItems())[index];
+  }
+
+  // The POC keeps content inside <details>; visibility is driven by the native
+  // open state. `[open]` exists on the <details> element when the item is
+  // expanded — so we use that as the content-displayed signal.
+  static async getContents(index) {
+    const items = await this.getAccordionItems();
+    const item = items[index];
+    return item?.$(`[data-testid="${ACCORDION_NATIVE_DATA_TESTID.ITEM_CONTENT_CONTAINER}"]`);
+  }
+
+  static async getDetailsByIndex(index) {
+    const items = await this.getAccordionItems();
+    const item = items[index];
+    return item?.$(`[data-testid="${ACCORDION_NATIVE_DATA_TESTID.ITEM_DETAILS}"]`);
+  }
+
+  static async getHeadings() {
+    return $$(`[data-testid="${ACCORDION_NATIVE_DATA_TESTID.ITEM_HEADING}"]`);
+  }
+
+  static async getHeadingByIndex(index) {
+    return (await this.getHeadings())[index];
+  }
+
+  static async getButtons() {
+    return $$('[data-testid="ds-button"]');
+  }
+
+  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];
+  }
+
+  static async getAccordionItemContainerSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsAccordionnativeItemContainer"]')[index];
+  }
+
+  static async getAccordionItemDetailsSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsAccordionnativeItemDetails"]')[index];
+  }
+
+  static async getAccordionItemSummarySlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsAccordionnativeItemSummary"]')[index];
+  }
+
+  static async getAccordionItemHeadingSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsAccordionnativeItemHeading"]')[index];
+  }
+
+  static async getAccordionItemChevronSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsAccordionnativeItemChevron"]')[index];
+  }
+
+  static async getAccordionItemTitlesContainerSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsAccordionnativeItemTitlesContainer"]')[index];
+  }
+
+  static async getAccordionItemPrimaryTitleSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsAccordionnativeItemPrimaryTitle"]')[index];
+  }
+
+  static async getAccordionItemSecondaryTitleSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsAccordionnativeItemSecondaryTitle"]')[index];
+  }
+
+  static async getAccordionItemCustomActionsContainerSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsAccordionnativeItemCustomActionsContainer"]')[index];
+  }
+
+  static async getAccordionItemContentContainerSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsAccordionnativeItemContentContainer"]')[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.axe-core.func.spec.js

@@ -0,0 +1,25 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSAccordionNativeCO from '../DSAccordionNativeCO';
+import { axeCoreCheck } from '../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18083 - AccordionNative:: ApplyAriaDisabled prop - axe-core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAccordionNativeCO.applyAriaDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display accordion with aria-disabled and pass axecore scan', async () => {
+      const firstItem = await DSAccordionNativeCO.getAccordionHeader(0);
+      await firstItem.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}