dimsum-e2e-tests 3.70.0-next.62 → 3.70.0-next.69

package/ds-global-header/GlobalHeaderCO.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-relative-packages */
-import { PATH_E2E_GLOBAL_HEADER } from '../paths';
-import { PageObject, Urlbuilder, type } from '../helpers';
+import { PATH_E2E_GLOBAL_HEADER, PATH_E2E_GLOBAL_HEADER_PUI18647 } from '../paths';
+import { PageObject, Urlbuilder, getElementByIndex, type } from '../helpers';
 
 export default class GlobalHeader extends PageObject {
   static basicURL = new Urlbuilder(PATH_E2E_GLOBAL_HEADER, 'basic');
@@ -31,6 +31,19 @@ export default class GlobalHeader extends PageObject {
 
   static withLayoutProvider = new Urlbuilder(PATH_E2E_GLOBAL_HEADER, 'with-layout-provider');
 
+  // PUI-18647 — one story per out-of-the-box toolbar item type, each a minimal header carrying only
+  // that item with every injection point wired to data-public="true".
+  static appPickerPassthroughURL = new Urlbuilder(PATH_E2E_GLOBAL_HEADER_PUI18647, 'app-picker-contract-passthrough');
+
+  static iconButtonItemURL = new Urlbuilder(PATH_E2E_GLOBAL_HEADER_PUI18647, 'icon-button-item-attributes');
+
+  static popupMenuSlotSurfaceURL = new Urlbuilder(PATH_E2E_GLOBAL_HEADER_PUI18647, 'popup-menu-slot-surface');
+
+  static searchToggleSlotsURL = new Urlbuilder(
+    PATH_E2E_GLOBAL_HEADER_PUI18647,
+    'search-toggle-item-attributes-and-slots',
+  );
+
   // Selectors
   static async getGHBreadcrumbBtn(label) {
     return $(`//a[@data-testid="gh-breadcrumb-btn"]/span[contains(text(),"${label}")]/ancestor::a`);
@@ -108,6 +121,87 @@ export default class GlobalHeader extends PageObject {
     await spinButton.click();
   }
 
+  // PUI-18647 selectors
+
+  // Every element the stories wire to data-public="true". The assertions read this collection rather
+  // than probing one testid at a time: the contract under test is "the whole surface is reachable",
+  // so a slot silently dropping out has to fail the count, not slip through an unasserted gap.
+  static async getPublicNodes() {
+    return $$('[data-public="true"]');
+  }
+
+  static async getPublicNodeTestIds() {
+    const nodes = await GlobalHeader.getPublicNodes();
+    return Promise.all(Array.from({ length: nodes.length }, (_, index) => nodes[index].getAttribute('data-testid')));
+  }
+
+  // The stories render "Yes" here if any element in the page carries a type="ds-*" attribute. The
+  // toolbar `type` discriminator is internal routing and must never reach the DOM — `type` is a
+  // reserved HTML attribute.
+  static async getDsTypedItemExistFlag() {
+    return $('[data-testid="pui18647-ds-typed-item-exist"]');
+  }
+
+  static async getClickCount() {
+    return $('[data-testid="pui18647-click-count"]');
+  }
+
+  // A custom TriggerComponent handed to the app-picker item through componentProps. Its presence is
+  // what proves componentProps reaches DSAppPicker at all: it replaces the built-in trigger, so
+  // there is no `gh-toolbar-item` button in that story.
+  static async getAppPickerCustomTrigger() {
+    return $('[data-testid="pui18647-gh-apppicker-trigger-component"]');
+  }
+
+  // The popup-menu item's own root. Before PUI-18647 this element was an unstyled wrapper with no
+  // slot and no data-testid, so the item as a whole had no injection point.
+  static async getPopupMenuContainer() {
+    return $('[data-testid="ds-globalheader-menubar-item-popupmenu-container"]');
+  }
+
+  static async getPopupMenuItemButtons() {
+    return $$('[data-testid="ds-global-header-menubar-item-popupmenu-item-button"]');
+  }
+
+  static async getPopupMenuItemButtonByIndex(index = 0) {
+    return getElementByIndex(GlobalHeader.getPopupMenuItemButtons, index);
+  }
+
+  // The search-toggle item's root container. Item-level global attributes land HERE for this item
+  // type, not on the trigger button as with the sibling types.
+  static async getSearchToggleContainer() {
+    return $('[data-testid="ds-globalheader-menubar-item-searchtoggle-container"]');
+  }
+
+  static async getSearchTogglePrevButton() {
+    return $('[data-testid="ds-globalheader-searchtoggle-spinbutton-prev"]');
+  }
+
+  static async getSearchToggleNextButton() {
+    return $('[data-testid="ds-globalheader-searchtoggle-spinbutton-next"]');
+  }
+
+  // A neutral, non-focusable target outside any open overlay, used to assert that dismissing by
+  // pointer leaves focus where the click put it instead of yanking it back to the trigger.
+  // Anchored on a data-testid rather than on a tag: $('h1') matches Storybook's own hidden
+  // "No Preview" heading first, which is not clickable and is not part of the story at all.
+  static async getOutsideClickTarget() {
+    return GlobalHeader.getDsTypedItemExistFlag();
+  }
+
+  static async getSearchableRowByIndex(index = 0) {
+    return $(`[data-testid="pui18647-row-${index}"]`);
+  }
+
+  // The stories highlight the current result with an inline khaki background, so the selected row is
+  // read off the computed style rather than a semantic attribute — there is no semantic one to read.
+  // Matched on the rgb channels only: browsers disagree on whether to emit `rgb(...)` or `rgba(...,1)`
+  // and on internal spacing, and none of that is what the assertion is about.
+  static async isRowHighlighted(row) {
+    const { value } = await row.getCSSProperty('background-color');
+    return String(value).replace(/\s/g, '').includes('240,230,140');
+  }
+
   // Slots
 
   static async getGHBreadcrumbChevronlotByIndex(index = 0) {

package/ds-global-header/app-picker-passthrough/GlobalHeader.app-picker-passthrough.func.spec.js

@@ -0,0 +1,113 @@
+import { Key } from 'webdriverio';
+import GlobalHeaderCO from '../GlobalHeaderCO';
+import DSAppPickerCO from '../../ds-apppicker/DSAppPickerCO';
+
+// Tests for the fix in PUI-18647. Only a hand-maintained subset of props reached the out-of-the-box
+// GlobalHeader -> DSAppPicker item; the rest were silently dropped, so the item could not customise
+// the picker's slots at all. The reported symptom was `dsApppickerChip={{ 'data-public': true }}`
+// never arriving, leaving LogRocket masking the app icons and labels (blocks ENCW-136789).
+//
+// The hand-off is now a full contract passthrough, which this spec proves along three channels:
+//   1. the nine DSAppPicker slot props,
+//   2. non-slot members of the same contract — TriggerComponent, onOpen/onClose, id,
+//   3. GlobalHeader's own slots, which had to keep working across the refactor.
+//
+// Two a11y changes ride along and are pinned here because QA selectors depend on them: the trigger's
+// aria-haspopup is now "dialog" rather than "true", and it no longer carries aria-expanded (a dialog
+// announces its open state by being present). Open state is therefore asserted via the panel, never
+// via the attribute.
+//
+// Chrome only: DOM attributes plus programmatic focus landings, identical in every engine. The
+// `|| 'Chrome'` arm is mandatory (BrowserStack capitalises browserName; a lowercase-only guard
+// registers zero tests and still exits 0).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19015 - GlobalHeader:: app-picker componentProps contract passthrough - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await GlobalHeaderCO.appPickerPassthroughURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render the custom trigger handed through componentProps', async () => {
+      const trigger = await GlobalHeaderCO.getAppPickerCustomTrigger();
+      await trigger.waitForDisplayed();
+      await expect(trigger).toHaveText('Apps');
+
+      // componentProps.id reaches DSAppPicker and namespaces the generated trigger id.
+      await expect(await trigger.getAttribute('id')).toBe('pui18647-gh-apppicker-dialog-trigger-btn');
+
+      await expect(trigger).toHaveAttribute('aria-haspopup', 'dialog');
+      // Absent by design — asserting the panel is present is the supported way to read open state.
+      await expect(await trigger.getAttribute('aria-expanded')).toBe(null);
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+    });
+
+    it("02: should keep forwarding GlobalHeader's own slots while the picker is closed", async () => {
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual([
+        'ds-global-header',
+        'ds-global-header-logo-container',
+        'ds-global-header-menubar-container',
+        'ds-global-header-menubar-list',
+        'ds-global-header-menubar-item',
+      ]);
+    });
+
+    it('03: should forward every app-picker slot prop and the onOpen callback', async () => {
+      await (await GlobalHeaderCO.getAppPickerCustomTrigger()).click();
+      await (await DSAppPickerCO.getAppPickerRoot()).waitForDisplayed();
+
+      // The story's onOpen re-scans the document, so the table only grows if that callback arrived
+      // too — the count below is simultaneously the slot assertion and the onOpen assertion.
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      const countOf = (testId) => publicTestIds.filter((id) => id === testId).length;
+
+      // Three apps, two custom apps, one separator between the two sections.
+      await expect(countOf('ds-apppicker-root')).toBe(1);
+      await expect(countOf('ds-apppicker-group')).toBe(2);
+      await expect(countOf('ds-apppicker-row')).toBe(3);
+      await expect(countOf('ds-apppicker-title')).toBe(2);
+      await expect(countOf('ds-apppicker-item')).toBe(5);
+      await expect(countOf('ds-apppicker-separator')).toBe(1);
+      await expect(countOf('ds-apppicker-floating-wrapper')).toBe(1);
+      // dsApppickerChip — the prop the defect was raised about. One tagged node per app.
+      await expect(countOf('app-picker__chip')).toBe(5);
+
+      // The panel is a dialog named by the custom trigger, so the widened contract did not cost the
+      // picker its ARIA pattern.
+      const dialog = await DSAppPickerCO.getFloatingWrapper();
+      await expect(dialog).toHaveAttribute('role', 'dialog');
+      await expect(await dialog.getAttribute('aria-labelledby')).toBe(
+        await (await GlobalHeaderCO.getAppPickerCustomTrigger()).getAttribute('id'),
+      );
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+    });
+
+    it('04: should open onto the selected app with ArrowDown and ArrowUp', async () => {
+      // The toolbar is a menubar, so it opts the picker into openAndFocusOnArrowKeys. 'Reports' is
+      // the third app, so "landed on the selected app" cannot be read as "landed on the first app".
+      await browser.keys(Key.Escape);
+      const trigger = await GlobalHeaderCO.getAppPickerCustomTrigger();
+      await expect(trigger).toBeFocused();
+
+      await browser.keys(Key.ArrowDown);
+      await (await DSAppPickerCO.getAppPickerRoot()).waitForDisplayed();
+      await expect(await DSAppPickerCO.getChipByLabel('Reports')).toBeFocused();
+
+      // ArrowUp opens nothing before this change; it now lands on the same selected app.
+      await browser.keys(Key.Escape);
+      await expect(trigger).toBeFocused();
+      await browser.keys(Key.ArrowUp);
+      await (await DSAppPickerCO.getAppPickerRoot()).waitForDisplayed();
+      await expect(await DSAppPickerCO.getChipByLabel('Reports')).toBeFocused();
+    });
+  });
+}

package/ds-global-header/popup-menu-focus/GlobalHeader.popup-menu-focus.func.spec.js

@@ -0,0 +1,63 @@
+import { Key } from 'webdriverio';
+import GlobalHeaderCO from '../GlobalHeaderCO';
+
+// Tests for the popup-menu focus fixes shipped with PUI-18647:
+//
+//  - (NEW) ArrowDown on the trigger opens onto the FIRST item; ArrowUp opens onto the LAST. ArrowUp
+//    did not open the menu at all before.
+//  - (FIX) Clicking outside no longer drags focus back to the trigger. It stays where the click put
+//    it, so focus is no longer lost arbitrarily on a pointer dismissal.
+//  - (unchanged) Escape still closes and returns focus to the trigger.
+//
+// Full browser matrix on purpose: pointer-driven dismissal and where focus settles afterwards is
+// precisely the behaviour engines implement differently.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-19018 - GlobalHeader:: popup-menu open and focus return paths - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await GlobalHeaderCO.popupMenuSlotSurfaceURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should open onto the first menu item with ArrowDown', async () => {
+      // Focused programmatically rather than by clicking: a click would open the menu, and closing it
+      // again to get back to "closed trigger, focused" makes the starting state depend on where a
+      // dismissal leaves focus, which varies by engine. The ArrowDown behaviour is the case here.
+      const trigger = await GlobalHeaderCO.getGHToolbarItem(0);
+      await trigger.waitForDisplayed();
+      await browser.execute((el) => el.focus(), trigger);
+      await expect(trigger).toBeFocused();
+
+      await browser.keys(Key.ArrowDown);
+      await (await GlobalHeaderCO.getPopupContent()).waitForDisplayed();
+
+      const firstItem = await GlobalHeaderCO.getPopupMenuItemButtonByIndex(0);
+      await expect(firstItem).toBeFocused();
+      await expect(firstItem).toHaveText('Preferences');
+    });
+
+    it('02: should close and return focus to the trigger on Escape', async () => {
+      await browser.keys(Key.Escape);
+
+      await expect(await GlobalHeaderCO.getPopupContent()).not.toBeDisplayed();
+      await expect(await GlobalHeaderCO.getGHToolbarItem(0)).toBeFocused();
+    });
+
+    it('03: should open onto the last menu item with ArrowUp', async () => {
+      await browser.keys(Key.ArrowUp);
+      await (await GlobalHeaderCO.getPopupContent()).waitForDisplayed();
+
+      const lastItem = await GlobalHeaderCO.getPopupMenuItemButtonByIndex(1);
+      await expect(lastItem).toBeFocused();
+      await expect(lastItem).toHaveText('Sign out');
+    });
+
+    it('04: should close without returning focus to the trigger on an outside click', async () => {
+      await (await GlobalHeaderCO.getOutsideClickTarget()).click();
+
+      await expect(await GlobalHeaderCO.getPopupContent()).not.toBeDisplayed();
+      // The heading is not focusable, so focus settles on the body. The point is only that it did
+      // NOT get pulled back to the trigger, which is what used to happen.
+      await expect(await GlobalHeaderCO.getGHToolbarItem(0)).not.toBeFocused();
+    });
+  });
+}

package/ds-global-header/popup-menu-slots/GlobalHeader.popup-menu-slots.func.spec.js

@@ -0,0 +1,70 @@
+import { Key } from 'webdriverio';
+import GlobalHeaderCO from '../GlobalHeaderCO';
+
+// Tests for the new slot introduced in PUI-18647. The ds-popup-menu item's outermost element used to
+// be an unstyled wrapper with no slot and no data-testid, so the item as a whole had no injection
+// point — nowhere to reach it, nowhere for xstyled props to land. It is now
+// `dsGlobalheaderMenubarItemPopupmenuContainer` / `ds-globalheader-menubar-item-popupmenu-container`.
+//
+// The change is additive: every pre-existing slot name and data-testid in this subtree is unchanged
+// and sits in the same DOM position, so no existing selector moves. Both the new and the pre-existing
+// slots are asserted here so a regression in either fails.
+//
+// Chrome only — pure DOM attribute assertions. The `|| 'Chrome'` arm is mandatory (BrowserStack
+// capitalises browserName; a lowercase-only guard silently registers zero tests and still exits 0).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19017 - GlobalHeader:: popup-menu item slot surface - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await GlobalHeaderCO.popupMenuSlotSurfaceURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should expose the new item container slot while the menu is closed', async () => {
+      const container = await GlobalHeaderCO.getPopupMenuContainer();
+      await container.waitForDisplayed();
+      await expect(container).toHaveAttribute('data-dimsum-slot', 'dsGlobalheaderMenubarItemPopupmenuContainer');
+
+      // Closed, the reachable surface is the item container plus the trigger button. Item-level
+      // attributes land on the TRIGGER for this item type, not on the container.
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual(['ds-globalheader-menubar-item-popupmenu-container', 'gh-toolbar-item']);
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+    });
+
+    it('02: should expose every popup-menu slot once the menu is open', async () => {
+      const trigger = await GlobalHeaderCO.getGHToolbarItem(0);
+      await trigger.click();
+      await (await GlobalHeaderCO.getPopupContent()).waitForDisplayed();
+
+      // Two options and one separator, so the per-item slots appear twice. The exact testid spelling
+      // is asserted rather than normalised: the container and the item label use `ds-globalheader-`
+      // while their siblings use `ds-global-header-`, and that inconsistency is what consumers'
+      // selectors have to match.
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual([
+        'ds-globalheader-menubar-item-popupmenu-container',
+        'gh-toolbar-item',
+        'ds-global-header-menubar-item-popupmenu-list',
+        'ds-global-header-menubar-item-popupmenu-item',
+        'ds-global-header-menubar-item-popupmenu-item-button',
+        'ds-globalheader-menubar-item-popupmenu-item-label',
+        'ds-global-header-menubar-item-popupmenu-separator',
+        'ds-global-header-menubar-item-popupmenu-item',
+        'ds-global-header-menubar-item-popupmenu-item-button',
+        'ds-globalheader-menubar-item-popupmenu-item-label',
+      ]);
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+
+      await browser.keys(Key.Escape);
+    });
+  });
+}

package/ds-global-header/search-toggle-slots/GlobalHeader.search-toggle-slots.func.spec.js

@@ -0,0 +1,118 @@
+import { Key } from 'webdriverio';
+import GlobalHeaderCO from '../GlobalHeaderCO';
+import { type } from '../../helpers';
+
+// Tests for the ds-search-toggle changes in PUI-18647:
+//
+//  - (NEW) item-level attributes now land on the item's ROOT CONTAINER, not on the trigger button as
+//    with the sibling item types. The type declared that surface on its configuration type and
+//    forwarded none of it, so data-public on a search-toggle entry appeared nowhere.
+//  - (RENAMED) that container's data-testid moved from `ds-global-header-menubar-item-searchtoggle-
+//    container` to `ds-globalheader-menubar-item-searchtoggle-container`. The element itself is
+//    unchanged; commit 295f110651c dropped its legacy override in constants/index.ts, so the
+//    auto-generated post-convention value now wins. Asserted as the DOM currently renders it — if
+//    the legacy override is restored, this expectation flips back to the hyphenated spelling.
+//  - (BREAKING) the two spinbutton result-navigation identifiers were INVERTED: the control that
+//    triggered NEXT was slotted as PREVIOUS and vice versa. The accessible names were always right,
+//    so testid and accessible name now agree. This is the one breaking change for QA here.
+//  - (FIX) Escape was handled twice — on the input and again on the container it bubbles to — so one
+//    press collapsed twice and called onClear three times. It now fires once.
+//
+// Chrome only: attribute assertions plus click-to-state-change, both engine-independent. The
+// `|| 'Chrome'` arm is mandatory (BrowserStack capitalises browserName; a lowercase-only guard
+// registers zero tests and still exits 0).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19019 - GlobalHeader:: search-toggle item slots and result controls - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await GlobalHeaderCO.searchToggleSlotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should forward item-level attributes to the new item container while collapsed', async () => {
+      const container = await GlobalHeaderCO.getSearchToggleContainer();
+      await container.waitForDisplayed();
+      await expect(container).toHaveAttribute('data-dimsum-slot', 'dsGlobalheaderMenubarItemSearchtoggleContainer');
+
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual(['ds-globalheader-menubar-item-searchtoggle-container', 'gh-toolbar-item']);
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+    });
+
+    it('02: should expose the full search-toggle slot surface once expanded', async () => {
+      await (await GlobalHeaderCO.getGHToolbarItem(0)).click();
+      await (await GlobalHeaderCO.getSearchToggleInput()).waitForDisplayed();
+
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual([
+        'ds-globalheader-menubar-item-searchtoggle-container',
+        'gh-toolbar-item',
+        'ds-globalheader-searchtoggle-expanded-content-wrapper',
+        'ds-globalheader-searchtoggle-textinput',
+        'ds-globalheader-searchtoggle-spinbutton-wrapper',
+        'ds-globalheader-searchtoggle-spinbutton-text',
+        'ds-globalheader-searchtoggle-spinbutton-separator',
+        'ds-globalheader-searchtoggle-spinbutton-next',
+        'ds-globalheader-searchtoggle-spinbutton-prev',
+      ]);
+    });
+
+    it('03: should match each spinbutton data-testid to its accessible name', async () => {
+      // The un-inversion. Note the DOM order is next-then-prev, which is what made the original
+      // swap easy to miss — so identity is read off the accessible name, never off position.
+      await expect(await GlobalHeaderCO.getSearchTogglePrevButton()).toHaveAttribute(
+        'aria-label',
+        'Previous search result',
+      );
+      await expect(await GlobalHeaderCO.getSearchToggleNextButton()).toHaveAttribute(
+        'aria-label',
+        'Next search result',
+      );
+    });
+
+    it('04: should navigate results forward with next and backward with prev', async () => {
+      const input = await GlobalHeaderCO.getSearchToggleInput();
+      await input.click();
+      await type('L');
+
+      const spinbuttonText = await GlobalHeaderCO.getSearchToggleSpinbutton();
+      await browser.waitUntil(async () => (await spinbuttonText.getText()) === '4', {
+        timeout: 3000,
+        timeoutMsg: 'search results did not populate after typing',
+      });
+
+      // Four rows match "L"; the first hit is row 0 and the last is row 4.
+      await (await GlobalHeaderCO.getSearchToggleNextButton()).click();
+      await expect(spinbuttonText).toHaveText('1 / 4');
+      const firstMatch = await GlobalHeaderCO.getSearchableRowByIndex(0);
+      await expect(await GlobalHeaderCO.isRowHighlighted(firstMatch)).toBe(true);
+
+      // Prev from the first result wraps to the last, proving the control moves backward.
+      await (await GlobalHeaderCO.getSearchTogglePrevButton()).click();
+      await expect(spinbuttonText).toHaveText('4 / 4');
+      const lastMatch = await GlobalHeaderCO.getSearchableRowByIndex(4);
+      await expect(await GlobalHeaderCO.isRowHighlighted(lastMatch)).toBe(true);
+    });
+
+    it('05: should collapse, clear and return focus on a single Escape', async () => {
+      await (await GlobalHeaderCO.getSearchToggleInput()).click();
+      await browser.keys(Key.Escape);
+
+      await expect(await GlobalHeaderCO.getSearchToggleInput()).not.toBeDisplayed();
+      await expect(await GlobalHeaderCO.getGHToolbarItem(0)).toBeFocused();
+
+      // Collapsing clears the query, so the highlight is gone and the reachable surface is back to
+      // the two collapsed-state nodes.
+      const lastMatch = await GlobalHeaderCO.getSearchableRowByIndex(4);
+      await expect(await GlobalHeaderCO.isRowHighlighted(lastMatch)).toBe(false);
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual(['ds-globalheader-menubar-item-searchtoggle-container', 'gh-toolbar-item']);
+    });
+  });
+}

package/ds-global-header/toolbar-item-attributes/GlobalHeader.toolbar-item-attributes.func.spec.js

@@ -0,0 +1,53 @@
+import GlobalHeaderCO from '../GlobalHeaderCO';
+
+// Tests for the contract formalised in PUI-18647: item-level global attributes are forwarded to
+// whatever an out-of-the-box toolbar item renders as its root. The typeless (icon button) item
+// already behaved this way before the refactor — this pins the baseline so the widened contract
+// cannot quietly move it.
+//
+// Also guards the `type` discriminator: it routes the item internally and must never reach the DOM,
+// because `type` is a reserved HTML attribute.
+//
+// Chrome only: every assertion is a DOM attribute or a rendered text value, identical in every
+// engine. The `|| 'Chrome'` arm is mandatory — BrowserStack capitalises browserName, and a
+// lowercase-only guard registers zero tests while still exiting 0.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19016 - GlobalHeader:: typeless toolbar item attributes and onClick - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await GlobalHeaderCO.iconButtonItemURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should forward item-level attributes only to the rendered button', async () => {
+      const button = await GlobalHeaderCO.getGHToolbarItem(0);
+      await button.waitForDisplayed();
+
+      // The story wires data-public at item level only, so the button is the single element that may
+      // carry it. Asserting the whole collection rather than just the button is what catches the
+      // attribute leaking onto an ancestor.
+      const publicTestIds = await GlobalHeaderCO.getPublicNodeTestIds();
+      await expect(publicTestIds).toEqual(['gh-toolbar-item']);
+
+      await expect(button).toHaveAttribute('data-dimsum-slot', 'dsGlobalheaderMenubarItemButton');
+      // The button's own type, not the toolbar item's routing discriminator.
+      await expect(button).toHaveAttribute('type', 'button');
+
+      const dsTypedFlag = await GlobalHeaderCO.getDsTypedItemExistFlag();
+      await expect(dsTypedFlag).toHaveText('No');
+    });
+
+    it('02: should forward the item-level onClick handler to the rendered button', async () => {
+      const clickCount = await GlobalHeaderCO.getClickCount();
+      await expect(clickCount).toHaveText('0');
+
+      await (await GlobalHeaderCO.getGHToolbarItem(0)).click();
+
+      await expect(clickCount).toHaveText('1');
+    });
+  });
+}

package/ds-grid/DSGridCO.js

@@ -43,6 +43,8 @@ export default class DSGridCO extends PageObject {
 
   static breakpointsV2 = new Urlbuilder(PATH_E2E_GRID, 'with-breakpoints-v-2-test');
 
+  static layoutMode = new Urlbuilder(PATH_E2E_GRID, 'with-layout-mode-test');
+
   static getUrl(component = 'basic') {
     return PageObject.getUrl(PATH_E2E_GRID, component);
   }
@@ -70,6 +72,24 @@ export default class DSGridCO extends PageObject {
     return $(`//div[text()="Scrollable Body"]`);
   }
 
+  static async getGridByTestId(testId) {
+    return $(`[data-testid="${testId}"]`);
+  }
+
+  // Computed grid-template-columns, e.g. "640px 640px 640px". Returned as a string so callers can
+  //   compare two grids to each other without depending on the resolved px values.
+  static async getResolvedColumns(testId) {
+    const grid = await this.getGridByTestId(testId);
+    await grid.waitForDisplayed();
+    return String((await grid.getCSSProperty('grid-template-columns')).value);
+  }
+
+  // Number of resolved column tracks. This is the only cross-browser-stable signal of which
+  //   breakpoint definition won, and it never asserts px values.
+  static async getResolvedColumnCount(testId) {
+    return (await this.getResolvedColumns(testId)).trim().split(/\s+/).filter(Boolean).length;
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('Grid', example);

package/ds-grid/layout-mode/DSGrid.layout-mode.func.spec.js

@@ -0,0 +1,51 @@
+import DSGridCO from '../DSGridCO';
+
+// Coverage for the withLayoutMode opt-in shipped in PUI-17417: an opted-in Grid collapses its
+// responsive cols/rows/span OBJECT definitions to the single value selected by the ancestor
+// DSLayoutProvider layoutMode instead of the viewport media-query ladder. The feature has no DOM
+// footprint - the only observable effect is the emitted CSS, since the collapsed array takes the
+// Array.isArray branch of manageCols and emits ONE unconditional grid-template-columns. So we
+// assert the resolved column COUNT (whitespace separated tracks of the computed value), never the
+// px values. Chrome only: a computed CSS read is identical across engines.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18978 - DSGrid:: withLayoutMode breakpoint resolution - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.layoutMode.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should resolve cols from the ancestor layoutMode when opted in', async () => {
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-l')).toEqual(3);
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-m')).toEqual(2);
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-s')).toEqual(1);
+    });
+
+    it('02: should honor an explicit xsmall definition, keeping xs distinct from s', async () => {
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-xs-explicit')).toEqual(1);
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-s-explicit')).toEqual(2);
+    });
+
+    it('03: should resolve xs to the small definition when xsmall is not declared', async () => {
+      await expect(await DSGridCO.getResolvedColumnCount('ds-grid-layout-mode-xs-backfilled')).toEqual(1);
+    });
+
+    it('04: should ignore the ancestor layoutMode when not opted in', async () => {
+      // Width independent invariant: opting out inside a provider must render exactly what the same
+      //   grid renders with no provider at all. The layoutMode path can never satisfy this.
+      const optedOut = await DSGridCO.getResolvedColumns('ds-grid-opt-out-in-provider');
+      const noProvider = await DSGridCO.getResolvedColumns('ds-grid-opt-out-no-provider');
+      await expect(optedOut).toEqual(noProvider);
+
+      // The failure mode being guarded against is the provider mode s leaking in, which is exactly
+      //   1 column. The correct value is whatever the viewport resolves to (3 above 1024px), so we
+      //   assert more than one column rather than pinning a viewport width.
+      const columnCount = await DSGridCO.getResolvedColumnCount('ds-grid-opt-out-in-provider');
+      await expect(columnCount).toBeGreaterThan(1);
+    });
+  });
+}

package/ds-grid/layout-mode/DSGrid.layout-mode.visual.spec.js

@@ -0,0 +1,22 @@
+import DSGridCO from '../DSGridCO';
+
+// Coverage for the withLayoutMode opt-in shipped in PUI-17417. Every grid in the story shares one
+// responsive cols definition and one viewport width, so this single snapshot is the human readable
+// proof that each grid lays out for the DSLayoutProvider mode of the container it lives in - and
+// that the two opted-out grids stay viewport driven.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18979 - DSGrid:: withLayoutMode breakpoint resolution - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.layoutMode.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display each grid laid out for its own LayoutProvider mode', async () => {
+      const firstGrid = await DSGridCO.getGridByTestId('ds-grid-layout-mode-l');
+      await firstGrid.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(DSGridCO.snapshotPath('layout-mode'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}