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

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');
 
@@ -100,11 +102,21 @@ export default class DSAccordionCO extends PageObject {
 
   static getToolbarByIndex = async (index) => getElementByIndex(this.getToolbarTriggers, index);
 
+  static async getToolbarMenuByIndex(index = 0) {
+    return $$('[data-testid="ds-menuitem-menu-item-wrapper"]')[index];
+  }
+
   static getAccordionItemHeaderContainers = async () => $$('[data-testid="ds-accordion-item-header-container"]');
 
   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/QA_NOTES.md

@@ -0,0 +1,105 @@
+# QA Notes — ds-accordion E2E
+
+Durable QA knowledge for the `accordion` suite. Carried over from the `ds-accordion-native` POC
+notes ([PUI-18083](https://jira.elliemae.io/browse/PUI-18083)) when that parallel suite was removed —
+see "Native migration" below.
+
+## Native migration ([PUI-18742](https://jira.elliemae.io/browse/PUI-18742))
+
+`ds-accordion` now renders a native `<details>` / `<summary>` disclosure instead of the previous
+WAI-ARIA button pattern. Public API, slot names and `data-testid` values are unchanged; only the DOM
+engine changed. Full contract: [`stories/ds-accordion/docs/NativeDisclosureMigration.md`](../../stories/ds-accordion/docs/NativeDisclosureMigration.md).
+
+```html
+<div data-testid="ds-accordion_item">
+  <details data-testid="ds-accordion-item-details">
+    <summary data-testid="ds-accordion_item-header" aria-expanded aria-controls="ds-accordion-content-0">
+      <div data-testid="ds-accordion-item-header-container">… chevron + title(s) …</div>
+    </summary>
+    <div data-testid="ds-accordion_item-content" role="region" aria-labelledby="ds-accordion-header-0">…</div>
+  </details>
+  <div data-testid="ds-accordion-item-header-custom-actions-container">… custom actions …</div>
+</div>
+```
+
+**What this changes for specs:**
+
+- The trigger is a `<summary>`, **not** a `<button>`. `getAccordionHeader(i)` returns the `<summary>`.
+- The heading container lives **inside** the summary (inverse of the pre-migration nesting).
+- `role="heading"` + `aria-level` are **not** emitted by the component. They are opt-in per consumer
+  through the `dsAccordionItemHeaderContainer` slot prop. Only stories that set that prop
+  (e.g. `WithSecondaryTitleTest`, `AdvancedHeadingStructureCustomization`) expose heading semantics —
+  `HeaderControlExamplesTest` does not. Assert the role only on a story that opts in
+  (`role/DSAccordion.role-heading.func.spec.js`).
+- Custom actions render as a **sibling of `<details>`**, outside the trigger. Nothing interactive is
+  nested inside the `<summary>`.
+- `ds-accordion-item-details` is an additive slot/testid introduced by the migration.
+
+The former `ds-accordion-native` E2E suite was deleted here — `ds-accordion` **is** the native engine
+now, so the parity suite had no stories left to point at (`stories/ds-accordion-native` and
+`PATH_E2E_ACCORDION_NATIVE` were removed in PUI-18742).
+
+## header-structure func — test 04 flaky "Login not displayed" (cloud)
+
+**Status:** spec hardened (spec-only + one additive CO helper). Investigated 2026-07-02 on the native
+suite; the same hardening now lives in `header-structure/DSAccordion.header-structure.func.spec.js`.
+
+**Symptom:** in the cloud run (`E2E_BACKEND=cloud`, `BASE_URL`=NEXT/d3, Chrome-only) test
+`04: toolbar trigger in custom actions should open dropdown menu on click` broke with
+`element ("*=Login") still not displayed after 10000ms`. Only that browser runs it (the spec is
+Chrome-guarded), so it surfaces as 1 broken.
+
+**Not a defect.** Reproduced against NEXT/d3 at the SDK viewport (1920×1080): the click opens the
+`DSDropdownMenuV2` (`dropdown-menu-listbox` + `ds-floating-wrapper-root` present), `Login` resolves to
+a single visible `<p>`, not clipped by any overflow ancestor and not occluded (`elementFromPoint` at
+its center returns the element), and it stays open at 3s. Selectors, story and package are correct.
+Passed 100% locally, broke 100% in cloud → the delta is real-Chrome + BrowserStack +
+`browser.maximizeWindow()` (cloud-only).
+
+**Root cause:** the pattern "one-shot click on a toggle + `waitForDisplayed` on a deep descendant" is
+fragile. If the click doesn't leave the menu open in that driver, the wait sits the full 10s on a menu
+that never opened.
+
+**Fix:** wait for the trigger to be clickable, click it, then assert the `DSDropdownMenuV2` item
+wrapper (`getToolbarMenuByIndex` → `ds-menuitem-menu-item-wrapper`) is displayed _before_ checking the
+first option, and tag-qualify the option selector as `p*=Login` (`DSTypography variant="b1"` renders a
+`<p>`). The SDK's retries absorb residual flakiness. Optional broader mitigation: enable
+`config.specFileRetries` in `wdio.config.mjs`.
+
+## input-inside func — `data-testid` is on the `<input>`, not a wrapper
+
+`DSInputText` forwards `data-testid` through its global attributes straight onto `StyledInput`, i.e.
+the `<input>` element. A descendant selector like `[data-testid="task-name"] input` matches nothing
+and breaks on every browser. Target the testid directly.
+
+## Open defects from the native POC — re-verify against ds-accordion
+
+These were logged against `ds-accordion-native` while it was a separate POC package. Now that
+`ds-accordion` ships the native engine, **each needs re-verification against `ds-accordion`** before
+being closed or re-pointed — they are listed here so the findings are not lost with the deleted suite,
+not as confirmed `ds-accordion` defects.
+
+| Ticket                                                 | Summary                                                                                                                                                                                                                                 |
+| ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [PUI-18640](https://jira.elliemae.io/browse/PUI-18640) | Content-container slot did not apply style-props — `maxHeight`/`overflow` (scrollable-content) and padding `p` (XstyledpropsInContent) — the way pre-migration `ds-accordion` did. Breaking for consumers styling content via the slot. |
+| [PUI-18641](https://jira.elliemae.io/browse/PUI-18641) | Default title behavior changed from truncate-with-tooltip to wrap. With `wrapLabel={false}` the title truncates but shows no tooltip on hover → full text unreadable. Backwards-incompatible default + readability gap.                 |
+| [PUI-18642](https://jira.elliemae.io/browse/PUI-18642) | Arrow Icon visual spec violations (Accordion Draft v1.5.0): region width is not the spec'd 20px; when the title wraps the icon is center-aligned instead of top-aligned ("Fixed Top-aligned — Region A").                               |
+| [PUI-18695](https://jira.elliemae.io/browse/PUI-18695) | _Safari-only:_ Tab does not move focus between accordion headers after a click. Click-focus, focus ring and Enter all work; only Tab traversal is broken. Found by E2E visual PUI-14324 - 02 (Safari).                                  |
+
+Related upstream: [WebKit bug #319162](https://bugs.webkit.org/show_bug.cgi?id=319162) — in Safari,
+tabbing away from a `<summary>` that contains nested elements after **mouse** activation does not
+advance focus correctly. Keyboard-only navigation is unaffected. Unresolved upstream.
+
+## Known visual baseline note — slots (`PUI-15348 - 01`)
+
+Percy flagged a ~0.05% diff: a small lavender box at the left of each "… Secondary" row. Not a
+regression. `StyledHeading` moved from `display: contents` → `display: flex`; an element with
+`display: contents` generates no box and therefore never paints its `background`, so the `SlotsTest`
+story's lavender `item-heading` background was silently dropped before and paints now. Only visible in
+that synthetic story (every slot painted a loud color). Re-approve the baseline if it resurfaces.
+
+---
+
+_Historical detail (A/B/C/D divergence audit, Percy mechanism, run commands) lived in
+`stories/ds-accordion-native/POC_FINDINGS.md`, removed in PUI-18742. Recover with
+`git show 3468ca3ccb4^:stories/ds-accordion-native/POC_FINDINGS.md`._

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,65 @@
+import DSAccordionCO from '../DSAccordionCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  // Structural coverage for custom actions living OUTSIDE the disclosure trigger.
+  // Originally written for PUI-17912 (custom actions moved out of the role="heading" container).
+  // PUI-18742 migrated ds-accordion to a native <details>/<summary> disclosure, which supersedes
+  // that fix: the <summary> IS the toggle, the heading container now sits INSIDE it, and heading
+  // semantics (role="heading" + aria-level) are opt-in per consumer via the
+  // dsAccordionItemHeaderContainer slot prop — see role/DSAccordion.role-heading.func.spec.js.
+  // The invariant that still matters here: nothing interactive is nested inside the trigger.
+  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: summary trigger should wrap the heading container and no other interactive elements', async () => {
+      const trigger = await DSAccordionCO.getAccordionHeader(0);
+      await expect(await trigger.getTagName()).toBe('summary');
+
+      const headingContainer = await DSAccordionCO.getAccordionItemHeaderContainerByIndex(0);
+      await expect(headingContainer).toExist();
+
+      // The <summary> is the toggle itself, so no nested <button> may live inside it.
+      const buttonsInsideTrigger = await trigger.$$('button');
+      await expect(buttonsInsideTrigger.length).toBe(0);
+    });
+
+    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 () => {
+      // Hardened after the cloud-only "Login not displayed" flake (see QA_NOTES.md): wait for the
+      // trigger to be clickable, then assert the DSDropdownMenuV2 item wrapper is displayed before
+      // reaching for the option, so a menu that never opened fails fast instead of burning the
+      // 10s waitForDisplayed. `p*=Login` is tag-qualified — DSTypography variant="b1" renders a <p>.
+      const toolbar = await DSAccordionCO.getToolbarByIndex(0);
+      await toolbar.waitForClickable({ timeout: 10000 });
+      await toolbar.click();
+      const menu = await DSAccordionCO.getToolbarMenuByIndex(0);
+      await expect(menu).toBeDisplayed();
+      const firstMenuOption = await $('p*=Login');
+      await expect(firstMenuOption).toBeDisplayed();
+    });
+  });
+}

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

@@ -0,0 +1,19 @@
+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 () => {
+      // DSInputText forwards `data-testid` through its global attributes onto the <input> itself
+      // (StyledInput), not onto the wrapper — so the testid IS the input, never its ancestor.
+      const input = await $('[data-testid="task-name"]');
+      await input.waitForDisplayed();
+      await input.setValue('Test task');
+      await expect(input).toHaveValue('Test task');
+    });
+  });
+}

package/ds-apppicker/DSAppPickerCO.js

@@ -18,14 +18,27 @@ export default class DSAppPickerCO extends PageObject {
 
   static reflowURL = new Urlbuilder(`${PATH_E2E_APP_PICKER}`, 'reflow-test');
 
+  // PUI-18647 — the two custom-trigger APIs side by side. Storybook kebab-cases the
+  // `PUI18647CustomTriggers...` export with a hyphen after the prefix, hence `pui-18647`.
+  static customTriggerFocusURL = new Urlbuilder(
+    `${PATH_E2E_APP_PICKER}`,
+    'pui-18647-custom-triggers-focus-parity-with-deprecated',
+  );
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('AppPicker', example);
   }
 
   // selectors
+  // Anchored on data-testid, NOT on the `#app-picker__button` id this used to select. The trigger's
+  // `id` is the per-instance dialog label id the dialog's aria-labelledby resolves to
+  // (`ds-app-picker-<uid>-dialog-trigger-btn`), deliberately uid-based so several pickers can
+  // coexist — documented under "Multiple pickers on one page" in the AccessibilityBehavior docs,
+  // which points automation at either a `data-testid` or an `id` prop passed to DSAppPicker.
+  // data-testid is the QA-stability-protected identifier, so it is the correct anchor here.
   static async getOpenAppPicker() {
-    return $(`#app-picker__button`);
+    return $('[data-testid="app-picker__button"]');
   }
 
   static getChips = async () => $$('[data-testid="app-picker__chip"]');
@@ -51,12 +64,97 @@ export default class DSAppPickerCO extends PageObject {
     return $('[data-testid="ds-apppicker-root"]');
   }
 
+  // The floating layer that wraps the panel — carries role="dialog" + aria-labelledby. It sits two
+  // levels ABOVE the panel root and is portaled to document.body, so it is not reachable from the
+  // root selector.
+  static async getFloatingWrapper() {
+    return $('[data-testid="ds-apppicker-floating-wrapper"]');
+  }
+
+  // One per section (apps + customApps) — the ARIA group tying a section title to its chips.
+  static getGroups = async () => $$('[data-testid="ds-apppicker-group"]');
+
+  static getGroupByIndex = async (index) => getElementByIndex(this.getGroups, index);
+
+  static getTitles = async () => $$('[data-testid="ds-apppicker-title"]');
+
+  static getTitleByIndex = async (index) => getElementByIndex(this.getTitles, index);
+
+  // Full-width layout rows holding a section title or the separator — purely presentational.
+  static getRows = async () => $$('[data-testid="ds-apppicker-row"]');
+
+  static async openPanel() {
+    const trigger = await this.getOpenAppPicker();
+    await trigger.waitForDisplayed();
+    await trigger.click();
+    await (await this.getAppPickerRoot()).waitForDisplayed();
+  }
+
+  // Reads one value per element in a wdio element array. Element arrays in wdio 9 expose their own
+  // promise-returning `map`, so `Promise.all(list.map(fn))` is handed a Promise rather than an
+  // iterable and throws. `length` + index access behave like a plain array in every version, so the
+  // iteration is built from those instead.
+  static async collect(elements, read) {
+    return Promise.all(Array.from({ length: elements.length }, (_, index) => read(elements[index])));
+  }
+
+  // Measures every chip in the open panel and buckets them by vertical offset — one bucket per
+  // rendered grid row. Row membership is derived, not hardcoded: the 3-column grid reflows with
+  // viewport width and font size, so which chips share a row is a runtime fact.
+  static async getChipRowsGeometry() {
+    const chips = await this.getChips();
+    const measured = await DSAppPickerCO.collect(chips, async (chip) => {
+      const { y } = await chip.getLocation();
+      const { height } = await chip.getSize();
+      return { label: await chip.getAttribute('aria-label'), top: Math.round(y), height: Math.round(height) };
+    });
+
+    const rowsByTop = measured.reduce((acc, chip) => {
+      acc[chip.top] = [...(acc[chip.top] ?? []), chip];
+      return acc;
+    }, {});
+
+    return Object.values(rowsByTop).map(DSAppPickerCO.summariseChipRow);
+  }
+
+  // Reduces one measured row to the numbers a height assertion needs, plus a human-readable
+  // breakdown so a failure names the offending chips and their pixel heights.
+  static summariseChipRow(row) {
+    const heights = row.map((chip) => chip.height);
+    return {
+      chipCount: row.length,
+      tallest: Math.max(...heights),
+      shortest: Math.min(...heights),
+      breakdown: row.map((chip) => `${chip.label} (${chip.height}px)`).join(', '),
+    };
+  }
+
   static async getChipLabelByIndex(index) {
     return $$('[data-testid="ds-chip-label"]')[index];
   }
 
+  // Selection is exposed as `aria-current="true"`, not `aria-selected`. The chips are `role="button"`,
+  // which does not support `aria-selected` — PUI-17213/PUI-17860 (#8260) swapped it for `aria-current`
+  // plus the "X of Y" position announcement, signed off with the A11y SME.
+  // The attribute is omitted (not `false`) when unselected, so `getAttribute` resolves to null: compare
+  // the value instead of calling a string method on it, so an unselected chip returns false rather than
+  // throwing.
   static async isSelected(element) {
-    return (await element.getAttribute('aria-selected')).includes('true');
+    return (await element.getAttribute('aria-current')) === 'true';
+  }
+
+  // PUI-18647 selectors
+
+  // The supported API: DSAppPicker hands the trigger renderer `innerRef` plus the internal handlers,
+  // so it can drive the first-app/selected-app focus logic on open.
+  static async getSupportedCustomTrigger() {
+    return $('[data-testid="pui18647-trigger-component"]');
+  }
+
+  // The deprecated API: `renderTrigger` receives only `ref`, so it cannot reach those handlers. It
+  // keeps its pre-existing behaviour by design — this is not a bug, it is the documented delta.
+  static async getDeprecatedCustomTrigger() {
+    return $('[data-testid="pui18647-render-trigger"]');
   }
 
   // Slots
@@ -78,6 +176,6 @@ export default class DSAppPickerCO extends PageObject {
   }
 
   static async getTitleSlotByIndex(index = 0) {
-    return $$('[data-dimsum-slot="dsApppickerTitle"]')[index];
+    return $$('[data-dimsum-parent-slot="dsApppickerTitle"]')[index];
   }
 }

package/ds-apppicker/aria-pattern/DSAppPicker.aria-pattern.func.spec.js

@@ -0,0 +1,100 @@
+import DSAppPickerCO from '../DSAppPickerCO';
+
+// Tests for the fix introduced in PUI-17213 (Roles and Pattern Mismatch): the AppPicker was built
+// as a menu but carried neither the menu nor the dialog ARIA contract. It is now a dialog —
+// aria-haspopup="dialog" + no aria-expanded on the trigger, role="dialog" + aria-labelledby on the
+// floating layer, one role="group" per section labelled by its <h3> title, presentational layout
+// rows, and chips left with their native button semantics instead of role="option".
+//
+// Every id in this component is namespaced by a per-instance uid, so the assertions are relational
+// (the dialog's aria-labelledby resolves to the trigger's id) rather than matching literal strings.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18911 - DSAppPicker:: dialog ARIA pattern roles and relationships - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAppPickerCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should expose the closed trigger as a dialog popup button', async () => {
+      const trigger = await DSAppPickerCO.getOpenAppPicker();
+      await trigger.waitForDisplayed();
+
+      await expect(trigger).toHaveAttribute('aria-haspopup', 'dialog');
+      await expect(trigger).toHaveAttribute('aria-label', 'Application picker');
+      // aria-expanded belongs to disclosure patterns; on a dialog popup it produces a conflicting
+      // announcement, so it must be absent both closed and open (re-checked in 02).
+      await expect(await trigger.getAttribute('aria-expanded')).toBe(null);
+      await expect(await trigger.getAttribute('id')).not.toBe(null);
+    });
+
+    it('02: should open a dialog whose accessible name comes from the trigger', async () => {
+      const trigger = await DSAppPickerCO.getOpenAppPicker();
+      await DSAppPickerCO.openPanel();
+
+      const dialog = await DSAppPickerCO.getFloatingWrapper();
+      await expect(dialog).toHaveAttribute('role', 'dialog');
+      // The dialog and the trigger share one accessible name: aria-labelledby points at the trigger.
+      await expect(await dialog.getAttribute('aria-labelledby')).toBe(await trigger.getAttribute('id'));
+      // The replaced aria-label="popup menu" must not have come back alongside aria-labelledby.
+      await expect(await dialog.getAttribute('aria-label')).toBe(null);
+
+      // The panel root is roleless (the former role="region" is gone), so it carries no name either.
+      const root = await DSAppPickerCO.getAppPickerRoot();
+      await expect(await root.getAttribute('role')).toBe(null);
+      await expect(await root.getAttribute('aria-label')).toBe(null);
+
+      await expect(await trigger.getAttribute('aria-expanded')).toBe(null);
+    });
+
+    it('03: should group each section and label it with its own h3 heading', async () => {
+      const groups = await DSAppPickerCO.getGroups();
+      const titles = await DSAppPickerCO.getTitles();
+      // The story renders apps + customApps, so both sections are present.
+      await expect(groups.length).toBe(2);
+      await expect(titles.length).toBe(2);
+
+      const mainGroup = await DSAppPickerCO.getGroupByIndex(0);
+      const mainTitle = await DSAppPickerCO.getTitleByIndex(0);
+      await expect(mainGroup).toHaveAttribute('role', 'group');
+      await expect(await mainGroup.getAttribute('aria-labelledby')).toBe(await mainTitle.getAttribute('id'));
+
+      const customGroup = await DSAppPickerCO.getGroupByIndex(1);
+      const customTitle = await DSAppPickerCO.getTitleByIndex(1);
+      await expect(customGroup).toHaveAttribute('role', 'group');
+      await expect(await customGroup.getAttribute('aria-labelledby')).toBe(await customTitle.getAttribute('id'));
+
+      // The titles stay real headings: role="presentation" would hide them from screen reader
+      // heading navigation in browse mode.
+      await expect(await mainTitle.getTagName()).toBe('h3');
+      await expect(await customTitle.getTagName()).toBe('h3');
+      await expect(await mainTitle.getAttribute('role')).toBe(null);
+      await expect(await customTitle.getAttribute('role')).toBe(null);
+    });
+
+    it('04: should keep layout rows presentational and chips as buttons', async () => {
+      // The full-row wrappers around the titles and the separator are layout only: role="group" was
+      // reserved for the real sections (03) and aria-hidden="true" would drop them from the tree
+      // instead of conveying them as presentation.
+      const rows = await DSAppPickerCO.getRows();
+      await expect(rows.length).toBeGreaterThan(0);
+      const rowRoles = await DSAppPickerCO.collect(rows, (row) => row.getAttribute('role'));
+      const rowAriaHidden = await DSAppPickerCO.collect(rows, (row) => row.getAttribute('aria-hidden'));
+      await expect(rowRoles.every((role) => role === null)).toBe(true);
+      await expect(rowAriaHidden.every((hidden) => hidden === null)).toBe(true);
+
+      // Chips keep their native button semantics inside the dialog — role="option" claimed a
+      // listbox parent that never existed.
+      const chips = await DSAppPickerCO.getChips();
+      await expect(chips.length).toBeGreaterThan(0);
+      const chipTags = await DSAppPickerCO.collect(chips, (chip) => chip.getTagName());
+      const chipRoles = await DSAppPickerCO.collect(chips, (chip) => chip.getAttribute('role'));
+      await expect(chipTags.every((tag) => tag === 'button')).toBe(true);
+      await expect(chipRoles.every((role) => role === 'button')).toBe(true);
+    });
+  });
+}

package/ds-apppicker/basic/DSAppPicker.basic.keyboard-nav.func.spec.js

@@ -1,11 +1,7 @@
 import { Key } from 'webdriverio';
 import DSAppPickerCO from '../DSAppPickerCO';
 
-if (
-  !browser.capabilities['ice:options'].isPhone &&
-  !browser.capabilities['ice:options'].isTablet &&
-  browser.capabilities.browserName !== 'Safari'
-) {
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-8030 - AppPicker:: Basic - keyboard nav func', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAppPickerCO.basicURL.go();
@@ -34,12 +30,27 @@ if (
       const appPickerChip = await DSAppPickerCO.getChipByIndex(1);
       await expect(appPickerChip).toBeFocused();
     });
-    it('05: should close the menu - Escape', async () => {
+    // PUI-17950 made Escape the dismissal mechanism for a chip's expanded label, satisfying the
+    // "Dismissible" clause of WCAG 2.1 AA 1.4.13. Escape on an open panel is therefore two-stage
+    // whenever the focused chip's label truncates: the first press dismisses the expansion, only
+    // the second reaches the dialog. Chip 1 here truncates, so both presses are needed. The
+    // dismissal is conditional, not blanket — on a chip whose label fits, Escape still closes the
+    // panel in a single press, so this is not a rule that can be applied by rote to every spec.
+    it('05: should dismiss the expanded chip label and keep the menu open - Escape', async () => {
+      const appPickerChip = await DSAppPickerCO.getChipByIndex(1);
+      expect(await appPickerChip.getAttribute('data-expanded')).toEqual('true');
+      await browser.keys(Key.Escape);
+      const appPicker = await DSAppPickerCO.getAppPickerRoot();
+      await expect(appPicker).toBeDisplayedInViewport();
+      await expect(appPickerChip).toBeFocused();
+      expect(await appPickerChip.getAttribute('data-expanded')).not.toEqual('true');
+    });
+    it('06: should close the menu - Escape', async () => {
       const openAppPickerBtn = await DSAppPickerCO.getOpenAppPicker();
       await browser.keys(Key.Escape);
       await expect(openAppPickerBtn).toBeFocused();
     });
-    it('06: should reopen the menu and focus the first enabled chip - Space', async () => {
+    it('07: should reopen the menu and focus the first enabled chip - Space', async () => {
       await browser.keys(Key.Space);
       const appPicker = await DSAppPickerCO.getAppPickerRoot();
       const appPickerChip = await DSAppPickerCO.getChipByIndex(1);

package/ds-apppicker/closeAfterSelection/DSAppPicker.closeAfterSelection.func.spec.js

@@ -20,7 +20,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(appPicker).not.toBeDisplayedInViewport();
       await expect(triggerBtn).toBeFocused();
     });
-    it('03: should open appPicker and have the third chip still focused', async () => {
+    it('03: should reopen appPicker with the selected app still marked as current', async () => {
       const openAppPickerBtn = await DSAppPickerCO.getOpenAppPicker();
       await openAppPickerBtn.click();
       const reportChip = await DSAppPickerCO.getChipByIndex(6);

package/ds-apppicker/custom-trigger-focus/DSAppPicker.custom-trigger-focus.func.spec.js

@@ -0,0 +1,82 @@
+import { Key } from 'webdriverio';
+import DSAppPickerCO from '../DSAppPickerCO';
+
+// Tests for the change introduced in PUI-18647 (GlobalHeader -> DSAppPicker contract passthrough).
+// Widening the hand-off meant a consumer can finally supply a custom trigger, which exposed two
+// different focus stories that now need pinning:
+//
+//  - `TriggerComponent` (supported) receives `innerRef` AND the internal open handlers, so a keyboard
+//    open can run the selected-app focus logic and land on the selected chip.
+//  - `renderTrigger` (deprecated) receives only `ref`, so it cannot reach those handlers and falls
+//    back to focusing the panel on every path. Unchanged by design.
+//
+// The mouse path is the RE-BASELINE: a TriggerComponent picker opened with the mouse used to land on
+// the FIRST app and now lands on the panel, matching the built-in trigger. Kept on the full browser
+// matrix because pointer-driven focus is exactly where engines disagree.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-19014 - DSAppPicker:: custom trigger open focus destinations - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAppPickerCO.customTriggerFocusURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should focus the panel when the supported trigger is opened with the mouse', async () => {
+      const trigger = await DSAppPickerCO.getSupportedCustomTrigger();
+      await trigger.waitForDisplayed();
+      await trigger.click();
+
+      const panel = await DSAppPickerCO.getAppPickerRoot();
+      await panel.waitForDisplayed();
+      await expect(panel).toBeFocused();
+    });
+
+    it('02: should focus the selected app when the supported trigger is opened with Enter', async () => {
+      // Escape closes the panel opened in 01 and returns focus to the trigger, which is also the
+      // starting state this case needs.
+      await browser.keys(Key.Escape);
+      const trigger = await DSAppPickerCO.getSupportedCustomTrigger();
+      await expect(trigger).toBeFocused();
+
+      await browser.keys(Key.Enter);
+      await (await DSAppPickerCO.getAppPickerRoot()).waitForDisplayed();
+
+      // 'Reports' is deliberately the third app, so "landed on the selected app" cannot be mistaken
+      // for "landed on the first app".
+      const selectedChip = await DSAppPickerCO.getChipByLabel('Reports');
+      await expect(selectedChip).toBeFocused();
+      await expect(await DSAppPickerCO.isSelected(selectedChip)).toBe(true);
+    });
+
+    it('03: should focus the panel when the deprecated trigger is opened with the mouse', async () => {
+      await browser.keys(Key.Escape);
+
+      const trigger = await DSAppPickerCO.getDeprecatedCustomTrigger();
+      await trigger.waitForDisplayed();
+      await trigger.click();
+
+      const panel = await DSAppPickerCO.getAppPickerRoot();
+      await panel.waitForDisplayed();
+      await expect(panel).toBeFocused();
+    });
+
+    it('04: should focus the panel when the deprecated trigger is opened with Enter', async () => {
+      // The panel 03 left open is controlled from the story and has no Escape handler, so it is
+      // dismissed by clicking its trigger again. Where a dismissal click leaves focus is NOT what
+      // this case is about and is not consistent across engines — clicking a <button> does not focus
+      // it on macOS, and the panel unmounting mid-click can blur. So the keyboard starting state is
+      // established explicitly instead of being inherited from the click.
+      const trigger = await DSAppPickerCO.getDeprecatedCustomTrigger();
+      await trigger.click();
+      await (await DSAppPickerCO.getAppPickerRoot()).waitForDisplayed({ reverse: true });
+
+      await browser.execute((el) => el.focus(), trigger);
+      await expect(trigger).toBeFocused();
+
+      await browser.keys(Key.Enter);
+
+      const panel = await DSAppPickerCO.getAppPickerRoot();
+      await panel.waitForDisplayed();
+      await expect(panel).toBeFocused();
+    });
+  });
+}