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

package/ds-form-toggle/DSToggleCO.js

@@ -36,8 +36,17 @@ export default class DSToggleCO extends PageObject {
     return $$('[data-testid="ds-controlled-toggle-checkbox"]')[index];
   }
 
-  static async getToggleState(state) {
-    return $(`//div/div[contains(text(), "${state}")]`);
+  // The on/off state is exposed semantically via aria-checked on the role="switch"
+  // button. Post PUI-16323 the visible ON/OFF label is aria-hidden and purely
+  // presentational, so state must be read from aria-checked, not the label text.
+  static async getSwitch(index = 0) {
+    return $$('button[role="switch"]')[index];
+  }
+
+  // Presentational ON/OFF label (aria-hidden). Targeted via its stable slot
+  // data-testid so we can assert the visible text tracks the state.
+  static async getStateLabel(index = 0) {
+    return $$('[data-testid="ds-formtoggle-text-wrapper"]')[index];
   }
 
   static async getTooltip() {

package/ds-global-header/GlobalHeader.announcements.func.spec.js

@@ -0,0 +1,27 @@
+import GlobalHeader from './GlobalHeaderCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18771 - GlobalHeader: SearchToggle result announcement -Func', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.withSearchToggleURL.go();
+      if (errorOnGo) throw errorOnGo;
+      await GlobalHeader.openAndPopulateSearchToggle();
+    });
+    it('01: search input should expose the accessible name guiding users to the result navigation', async () => {
+      const searchInput = await GlobalHeader.getSearchToggleInput();
+      await expect(searchInput).toHaveAttribute(
+        'aria-label',
+        'Search among the content of the page. Press Tab twice to reach the result navigation.',
+      );
+    });
+    it('02: results spinbutton should announce the total result count after typing', async () => {
+      const spinButton = await GlobalHeader.getSearchToggleSpinbutton();
+      await expect(spinButton).toHaveAttribute('aria-valuetext', '3 total results');
+    });
+  });
+}

package/ds-global-header/GlobalHeader.axe-core.func.spec.js

@@ -19,14 +19,14 @@ if (
       await browser.keys(Key.Tab);
       await browser.keys(Key.Tab);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('02: should have global header with expanded appPicker and pass axe-core scan', async () => {
       await browser.keys(Key.Tab);
       await browser.keys(Key.Enter);
 
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('03: should have global header with expanded menu-list and pass axe-core scan', async () => {
       await browser.keys(Key.Escape);
@@ -34,7 +34,7 @@ if (
       await browser.keys(Key.Tab);
       await browser.keys(Key.Enter);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 
@@ -47,12 +47,12 @@ if (
       const globalHeader = await GlobalHeaderCO.getGlobalHeader();
       await globalHeader.waitForDisplayed();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 
   // Skipped due to defect PUI-17970
-  describe.skip('PUI-12447 - GlobalHeader: toggle search -AxeCore', () => {
+  describe('PUI-12447 - GlobalHeader: toggle search -AxeCore', () => {
     before(async () => {
       const errorOnGo = await GlobalHeaderCO.withSearchToggleURL.go();
       if (errorOnGo) throw errorOnGo;
@@ -61,19 +61,19 @@ if (
       const globalHeader = await GlobalHeaderCO.getGlobalHeader();
       await globalHeader.waitForDisplayed();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('02: should have global header with toggle-search expanded and pass axe-core scan', async () => {
       const toggleSearch = await GlobalHeaderCO.getGHToolbarItem(0);
       await toggleSearch.click();
       await type('Hola');
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('03: should have global header with populated toggle-search and pass axe-core scan', async () => {
       await type('Hola');
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 
@@ -86,12 +86,12 @@ if (
       const globalHeader = await GlobalHeaderCO.getGlobalHeader();
       await globalHeader.waitForDisplayed();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 
   // Skipped due to defect PUI-17970
-  describe.skip('PUI-18379 - GlobalHeader: with search toggle -AxeCore', () => {
+  describe('PUI-18379 - GlobalHeader: with search toggle -AxeCore', () => {
     before(async () => {
       const errorOnGo = await GlobalHeaderCO.withSearchToggleURL.go();
       if (errorOnGo) throw errorOnGo;
@@ -103,7 +103,7 @@ if (
       await expect(toggleSearch).toHaveAttribute('aria-expanded', 'false');
       await expect(toggleSearch).toHaveAttribute('aria-controls');
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('02: should have global header with search toggle expanded and pass axe-core scan', async () => {
       const toggleSearch = await GlobalHeaderCO.getGHToolbarItem(0);
@@ -111,17 +111,17 @@ if (
       await expect(toggleSearch).toHaveAttribute('aria-expanded', 'true');
       await expect(toggleSearch).toHaveAttribute('aria-controls', /^ds-global-header/);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('03: should have global header with populated search toggle and pass axe-core scan', async () => {
       await type('Labor');
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 
   // Skipped due to defect PUI-17970
-  describe.skip('PUI-16270 - GlobalHeader: Controled with Iframe -AxeCore', () => {
+  describe('PUI-16270 - GlobalHeader: Controled with Iframe -AxeCore', () => {
     before(async () => {
       const errorOnGo = await GlobalHeaderCO.iframeURL.go();
       if (errorOnGo) throw errorOnGo;
@@ -130,7 +130,7 @@ if (
       const globalHeader = await GlobalHeaderCO.getGlobalHeader();
       await globalHeader.waitForDisplayed();
       const result = await axeCoreCheck({ extraDisabledRules: ['landmark-one-main'] });
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-global-header/GlobalHeader.func.spec.js

@@ -1,7 +1,19 @@
 import { Key } from 'webdriverio';
 import GlobalHeader from './GlobalHeaderCO';
 
-if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+// Asserts the search-toggle spinbutton reflects the expected selected-result state.
+const expectSelectedResult = async (valuenow, valuetext) => {
+  const spinButton = await GlobalHeader.getSearchToggleSpinbutton();
+  await expect(spinButton).toHaveAttribute('aria-valuenow', valuenow);
+  await expect(spinButton).toHaveAttribute('aria-valuetext', valuetext);
+};
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
   describe('PUI-10036 - GlobalHeader: title and aria attributes', () => {
     before(async () => {
       const errorOnGo = await GlobalHeader.customAttributes.go();
@@ -80,4 +92,61 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(firstToolbarItem).not.toBeFocused();
     });
   });
+
+  // Tests for the fix in PUI-17974 (SearchToggle arrow navigation could not start with ArrowDown nor cycle)
+  describe('PUI-18772 - GlobalHeader: SearchToggle result navigation with ArrowDown -Func', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.withSearchToggleURL.go();
+      if (errorOnGo) throw errorOnGo;
+      await GlobalHeader.openAndPopulateSearchToggle();
+    });
+    it('01: should be idle (no result selected) before navigation starts', async () => {
+      await expectSelectedResult('0', '3 total results');
+    });
+    it('02: should start navigation on last result when pressing ArrowDown from idle', async () => {
+      await browser.keys(Key.ArrowDown);
+      await expectSelectedResult('3', 'result 3 of 3');
+    });
+    it('03: should move to the previous result on subsequent ArrowDown', async () => {
+      await browser.keys(Key.ArrowDown);
+      await expectSelectedResult('2', 'result 2 of 3');
+    });
+    it('04: should reach the first result on ArrowDown', async () => {
+      await browser.keys(Key.ArrowDown);
+      await expectSelectedResult('1', 'result 1 of 3');
+    });
+    it('05: should cycle from the first result back to the last on ArrowDown', async () => {
+      await browser.keys(Key.ArrowDown);
+      await expectSelectedResult('3', 'result 3 of 3');
+    });
+  });
+
+  // Tests for the fix in PUI-17974 (SearchToggle arrow navigation could not start with ArrowDown nor cycle)
+  describe('PUI-18773 - GlobalHeader: SearchToggle result navigation with ArrowUp -Func', () => {
+    // same setup as above; here the ArrowUp navigation is exercised from idle
+    before(async () => {
+      const errorOnGo = await GlobalHeader.withSearchToggleURL.go();
+      if (errorOnGo) throw errorOnGo;
+      await GlobalHeader.openAndPopulateSearchToggle();
+    });
+    it('01: should be idle (no result selected) before navigation starts', async () => {
+      await expectSelectedResult('0', '3 total results');
+    });
+    it('02: should start navigation on the first result when pressing ArrowUp from idle', async () => {
+      await browser.keys(Key.ArrowUp);
+      await expectSelectedResult('1', 'result 1 of 3');
+    });
+    it('03: should move to the next result on subsequent ArrowUp', async () => {
+      await browser.keys(Key.ArrowUp);
+      await expectSelectedResult('2', 'result 2 of 3');
+    });
+    it('04: should reach the last result on ArrowUp', async () => {
+      await browser.keys(Key.ArrowUp);
+      await expectSelectedResult('3', 'result 3 of 3');
+    });
+    it('05: should cycle from the last result back to the first on ArrowUp', async () => {
+      await browser.keys(Key.ArrowUp);
+      await expectSelectedResult('1', 'result 1 of 3');
+    });
+  });
 }

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 } 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`);
@@ -84,6 +97,111 @@ export default class GlobalHeader extends PageObject {
     return $('button*=Skip');
   }
 
+  static async getSearchToggleInput() {
+    return $('[data-testid="ds-globalheader-searchtoggle-textinput"]');
+  }
+
+  static async getSearchToggleSpinbutton() {
+    return $('[data-testid="ds-globalheader-searchtoggle-spinbutton-text"]');
+  }
+
+  // Opens the search toggle, runs a query, and focuses the populated results spinbutton
+  // so result navigation can be exercised. Waits for results to load before returning.
+  static async openAndPopulateSearchToggle(searchText = 'Labor') {
+    const toggleSearch = await GlobalHeader.getGHToolbarItem(0);
+    await toggleSearch.click();
+    const searchInput = await GlobalHeader.getSearchToggleInput();
+    await searchInput.click();
+    await type(searchText);
+    const spinButton = await GlobalHeader.getSearchToggleSpinbutton();
+    await browser.waitUntil(async () => (await spinButton.getText()) !== 'n/a', {
+      timeout: 3000,
+      timeoutMsg: 'search results did not populate after typing',
+    });
+    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);
+    });
+  });
+}