dimsum-e2e-tests 3.70.0-next.61 → 3.70.0-next.63

package/ds-apppicker/DSAppPickerCO.js

@@ -126,8 +126,14 @@ export default class DSAppPickerCO extends PageObject {
     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';
   }
 
   // Slots

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/reflow/DSAppPicker.reflow.visual.spec.js

@@ -1,18 +1,19 @@
 /* eslint-disable wdio/no-pause */
 import DSAppPickerCO from '../DSAppPickerCO';
+import { setTextSize } from '../../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-17867 - AppPicker:: Reflow test -visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAppPickerCO.reflowURL.go();
       if (errorOnGo) throw errorOnGo;
-      await browser.maximizeWindow();
+      await setTextSize('26');
     });
 
     it('01: should show appPicker open', async () => {
       const openAppPickerBtn = await DSAppPickerCO.getOpenAppPicker();
       await openAppPickerBtn.click();
-      const snapshot = await browser.percyCheckScreenshot(DSAppPickerCO.snapshotPath('reflow-appPicker-open'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
 
@@ -20,16 +21,14 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const secondPipelineChip = await DSAppPickerCO.getChipByLabelAndIndex('Pipeline', 1);
       await secondPipelineChip.scrollIntoView();
       await browser.pause(300);
-      const snapshot = await browser.percyCheckScreenshot(DSAppPickerCO.snapshotPath('reflow-appPicker-scrolled'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
 
     it('03: should select the 2nd Pipeline chip', async () => {
       const secondPipelineChip = await DSAppPickerCO.getChipByLabelAndIndex('Pipeline', 1);
       await secondPipelineChip.click();
-      const snapshot = await browser.percyCheckScreenshot(
-        DSAppPickerCO.snapshotPath('reflow-appPicker-pipeline-selected'),
-      );
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-banner/DSBanner.text-resize.visual.spec.js

@@ -1,14 +1,17 @@
 import DSBannerCO from './DSBannerCO';
+import { setTextSize } from '../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-17535 - DSBanner - Text Resize In Different Layouts - Visual Test', () => {
     before('loading page', async () => {
       const errorOnGo = await DSBannerCO.textResizeInDifferentLayoutsTest.go();
       if (errorOnGo) throw errorOnGo;
+      await setTextSize('26');
     });
     it('01: should display text resize in different layouts properly', async () => {
-      await browser.eyesOpen();
-      const snapshot = await browser.eyesCheckSnapshot(DSBannerCO.snapshotPath('text-resize-in-different-layouts'));
+      const banner = await DSBannerCO.getBannerByIndex();
+      await banner.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-banner/DSBannerCO.js

@@ -62,6 +62,10 @@ export default class DSBannerCO extends PageObject {
     return $('[data-testid="ds-banner"');
   }
 
+  static async getBannerByIndex(index = 0) {
+    return $$('[data-testid="ds-banner"]')[index];
+  }
+
   static async getBannerContainer() {
     return $('[data-testid="ds-banner-container"]');
   }

package/ds-card-v3/reflow/DSCardV3.reflow.visual.spec.js

@@ -1,10 +1,12 @@
 import DSCardV3CO from '../DSCardV3CO';
+import { setTextSize } from '../../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-13981 - CardV3: Reflow -Visual Test', () => {
     before('loading page', async () => {
       const errorOnGo = await DSCardV3CO.reflowURL.go();
       if (errorOnGo) throw errorOnGo;
+      await setTextSize('26');
     });
     it('01: should display cards after a 200% of text resize', async () => {
       const expandContentButton = await DSCardV3CO.getExpandContentButton();

package/ds-controlled-form/ds-controlled-checkbox/DSControlledCheckboxCO.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-relative-packages */
-import { PATH_E2E_CHECKBOX } from '../../paths';
+import { PATH_E2E_CHECKBOX, PATH_E2E_CHECKBOX_SLOTS } from '../../paths';
 import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
 
 export default class DSControlledCheckboxCO extends PageObject {
@@ -25,6 +25,8 @@ export default class DSControlledCheckboxCO extends PageObject {
 
   static themeFontURL = new Urlbuilder(PATH_E2E_CHECKBOX, 'theme-font-family-test');
 
+  static slotsTest = new Urlbuilder(PATH_E2E_CHECKBOX_SLOTS, 'slots-test');
+
   static async getCheckbox() {
     return $('[data-testid="ds-checkbox"]');
   }
@@ -80,4 +82,41 @@ export default class DSControlledCheckboxCO extends PageObject {
   static async getFallbackCheckboxLabel() {
     return $('[data-testid="theme-font-fallback"] [data-testid="ds-checkbox-label-typography"]');
   }
+
+  // Slots rendered through styled(DSTypography) expose the owner slot on
+  // `data-dimsum-parent-slot` (the element's own `data-dimsum-slot` is the typography root),
+  // while plain-tag slots expose it on `data-dimsum-slot`.
+  static async getSlotsRoot() {
+    return $('[data-testid="slots-wrapped"] [data-dimsum-slot="dsCheckboxRoot"]');
+  }
+
+  static async getSlotsInputWrapper() {
+    return $('[data-testid="slots-wrapped"] [data-dimsum-slot="dsCheckboxInputWrapper"]');
+  }
+
+  static async getSlotsInput() {
+    return $('[data-testid="slots-wrapped"] [data-dimsum-slot="dsCheckboxInput"]');
+  }
+
+  static async getSlotsLabel() {
+    return $('[data-testid="slots-wrapped"] [data-dimsum-slot="dsCheckboxLabel"]');
+  }
+
+  static async getSlotsLabelTypography() {
+    return $('[data-testid="slots-wrapped"] [data-dimsum-parent-slot="dsCheckboxLabelTypography"]');
+  }
+
+  static async getSlotsTruncatedLabel() {
+    return $('[data-testid="slots-truncated"] [data-dimsum-parent-slot="dsCheckboxTruncatedLabel"]');
+  }
+
+  // The truncation tooltip renders through a portal, outside the story wrapper, so both tooltip
+  // slots are queried document-wide instead of scoped to the instance.
+  static async getSlotsTooltipContainer() {
+    return $('[data-dimsum-slot="dsCheckboxTooltipContainer"]');
+  }
+
+  static async getSlotsTooltipText() {
+    return $('[data-dimsum-parent-slot="dsCheckboxTooltipText"]');
+  }
 }

package/ds-controlled-form/ds-controlled-checkbox/slots/DSControlledCheckbox.slots.func.spec.js

@@ -0,0 +1,78 @@
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+
+// Slot surface added when the DSControlledCheckbox label moved to DSTypography under PUI-18774:
+// label-typography, truncated-label, tooltip-container and tooltip-text. The tooltip pair only
+// exists while the label is truncated AND hovered, which is why this lives in E2E rather than in
+// the package's jest slot tests.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18976 - DSControlledCheckbox:: label typography and tooltip slots - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have custom aria-* for each rendered label slot', async () => {
+      const root = await DSControlledCheckboxCO.getSlotsRoot();
+      const inputWrapper = await DSControlledCheckboxCO.getSlotsInputWrapper();
+      const input = await DSControlledCheckboxCO.getSlotsInput();
+      const label = await DSControlledCheckboxCO.getSlotsLabel();
+      const labelTypography = await DSControlledCheckboxCO.getSlotsLabelTypography();
+      const truncatedLabel = await DSControlledCheckboxCO.getSlotsTruncatedLabel();
+      await expect(root).toHaveAttribute('aria-label', 'root aria');
+      await expect(inputWrapper).toHaveAttribute('aria-label', 'inputwrapper aria');
+      await expect(input).toHaveAttribute('aria-label', 'input aria');
+      await expect(label).toHaveAttribute('aria-label', 'label aria');
+      await expect(labelTypography).toHaveAttribute('aria-label', 'labeltypography aria');
+      await expect(truncatedLabel).toHaveAttribute('aria-label', 'truncatedlabel aria');
+    });
+
+    it('02: should have custom data-* for each rendered label slot', async () => {
+      const root = await DSControlledCheckboxCO.getSlotsRoot();
+      const inputWrapper = await DSControlledCheckboxCO.getSlotsInputWrapper();
+      const input = await DSControlledCheckboxCO.getSlotsInput();
+      const label = await DSControlledCheckboxCO.getSlotsLabel();
+      const labelTypography = await DSControlledCheckboxCO.getSlotsLabelTypography();
+      const truncatedLabel = await DSControlledCheckboxCO.getSlotsTruncatedLabel();
+      await expect(root).toHaveAttribute('data-testid', 'root data');
+      await expect(inputWrapper).toHaveAttribute('data-testid', 'inputwrapper data');
+      await expect(input).toHaveAttribute('data-testid', 'input data');
+      await expect(label).toHaveAttribute('data-testid', 'label data');
+      await expect(labelTypography).toHaveAttribute('data-testid', 'labeltypography data');
+      await expect(truncatedLabel).toHaveAttribute('data-testid', 'truncatedlabel data');
+    });
+
+    it('03: should have custom lang for each rendered label slot', async () => {
+      const root = await DSControlledCheckboxCO.getSlotsRoot();
+      const inputWrapper = await DSControlledCheckboxCO.getSlotsInputWrapper();
+      const input = await DSControlledCheckboxCO.getSlotsInput();
+      const label = await DSControlledCheckboxCO.getSlotsLabel();
+      const labelTypography = await DSControlledCheckboxCO.getSlotsLabelTypography();
+      const truncatedLabel = await DSControlledCheckboxCO.getSlotsTruncatedLabel();
+      await expect(root).toHaveAttribute('lang', 'ja');
+      await expect(inputWrapper).toHaveAttribute('lang', 'it');
+      await expect(input).toHaveAttribute('lang', 'de');
+      await expect(label).toHaveAttribute('lang', 'fr');
+      await expect(labelTypography).toHaveAttribute('lang', 'es');
+      await expect(truncatedLabel).toHaveAttribute('lang', 'pt');
+    });
+
+    it('04: should have custom aria-*, data-* and lang for the tooltip slots on hover', async () => {
+      const truncatedLabel = await DSControlledCheckboxCO.getSlotsTruncatedLabel();
+      await truncatedLabel.moveTo();
+      const tooltipContainer = await DSControlledCheckboxCO.getSlotsTooltipContainer();
+      await tooltipContainer.waitForDisplayed();
+      const tooltipText = await DSControlledCheckboxCO.getSlotsTooltipText();
+      await expect(tooltipContainer).toHaveAttribute('aria-label', 'tooltipcontainer aria');
+      await expect(tooltipContainer).toHaveAttribute('data-testid', 'tooltipcontainer data');
+      await expect(tooltipContainer).toHaveAttribute('lang', 'zh');
+      await expect(tooltipText).toHaveAttribute('aria-label', 'tooltiptext aria');
+      await expect(tooltipText).toHaveAttribute('data-testid', 'tooltiptext data');
+      await expect(tooltipText).toHaveAttribute('lang', 'ru');
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-radio/DSControlledRadioCO.js

@@ -1,4 +1,4 @@
-import { PATH_E2E_RADIO } from '../../paths';
+import { PATH_E2E_RADIO, PATH_E2E_RADIO_SLOTS } from '../../paths';
 import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
 
 export default class DSControlledRadioCO extends PageObject {
@@ -18,6 +18,8 @@ export default class DSControlledRadioCO extends PageObject {
 
   static themeFontURL = new Urlbuilder(PATH_E2E_RADIO, 'theme-font-family-test');
 
+  static slotsTest = new Urlbuilder(PATH_E2E_RADIO_SLOTS, 'slots-test');
+
   static async getRadio() {
     return $('[data-testid="ds-radio"]');
   }
@@ -53,4 +55,41 @@ export default class DSControlledRadioCO extends PageObject {
   static async getFallbackRadioLabel() {
     return $('[data-testid="theme-font-fallback"] [data-testid="ds-radio-label-typography"]');
   }
+
+  // Slots rendered through styled(DSTypography) expose the owner slot on
+  // `data-dimsum-parent-slot` (the element's own `data-dimsum-slot` is the typography root),
+  // while plain-tag slots expose it on `data-dimsum-slot`.
+  static async getSlotsRoot() {
+    return $('[data-testid="slots-wrapped"] [data-dimsum-slot="dsRadioRoot"]');
+  }
+
+  static async getSlotsInputWrapper() {
+    return $('[data-testid="slots-wrapped"] [data-dimsum-slot="dsRadioInputWrapper"]');
+  }
+
+  static async getSlotsInput() {
+    return $('[data-testid="slots-wrapped"] [data-dimsum-slot="dsRadioInput"]');
+  }
+
+  static async getSlotsLabel() {
+    return $('[data-testid="slots-wrapped"] [data-dimsum-slot="dsRadioLabel"]');
+  }
+
+  static async getSlotsLabelTypography() {
+    return $('[data-testid="slots-wrapped"] [data-dimsum-parent-slot="dsRadioLabelTypography"]');
+  }
+
+  static async getSlotsTruncatedLabel() {
+    return $('[data-testid="slots-truncated"] [data-dimsum-parent-slot="dsRadioTruncatedLabel"]');
+  }
+
+  // The truncation tooltip renders through a portal, outside the story wrapper, so both tooltip
+  // slots are queried document-wide instead of scoped to the instance.
+  static async getSlotsTooltipContainer() {
+    return $('[data-dimsum-slot="dsRadioTooltipContainer"]');
+  }
+
+  static async getSlotsTooltipText() {
+    return $('[data-dimsum-parent-slot="dsRadioTooltipText"]');
+  }
 }

package/ds-controlled-form/ds-controlled-radio/slots/DSControlledRadio.slots.func.spec.js

@@ -0,0 +1,78 @@
+import DSControlledRadioCO from '../DSControlledRadioCO';
+
+// Slot surface added when the DSControlledRadio label moved to DSTypography under PUI-18774:
+// label-typography, truncated-label, tooltip-container and tooltip-text. The tooltip pair only
+// exists while the label is truncated AND hovered, which is why this lives in E2E rather than in
+// the package's jest slot tests.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18975 - DSControlledRadio:: label typography and tooltip slots - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledRadioCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have custom aria-* for each rendered label slot', async () => {
+      const root = await DSControlledRadioCO.getSlotsRoot();
+      const inputWrapper = await DSControlledRadioCO.getSlotsInputWrapper();
+      const input = await DSControlledRadioCO.getSlotsInput();
+      const label = await DSControlledRadioCO.getSlotsLabel();
+      const labelTypography = await DSControlledRadioCO.getSlotsLabelTypography();
+      const truncatedLabel = await DSControlledRadioCO.getSlotsTruncatedLabel();
+      await expect(root).toHaveAttribute('aria-label', 'root aria');
+      await expect(inputWrapper).toHaveAttribute('aria-label', 'inputwrapper aria');
+      await expect(input).toHaveAttribute('aria-label', 'input aria');
+      await expect(label).toHaveAttribute('aria-label', 'label aria');
+      await expect(labelTypography).toHaveAttribute('aria-label', 'labeltypography aria');
+      await expect(truncatedLabel).toHaveAttribute('aria-label', 'truncatedlabel aria');
+    });
+
+    it('02: should have custom data-* for each rendered label slot', async () => {
+      const root = await DSControlledRadioCO.getSlotsRoot();
+      const inputWrapper = await DSControlledRadioCO.getSlotsInputWrapper();
+      const input = await DSControlledRadioCO.getSlotsInput();
+      const label = await DSControlledRadioCO.getSlotsLabel();
+      const labelTypography = await DSControlledRadioCO.getSlotsLabelTypography();
+      const truncatedLabel = await DSControlledRadioCO.getSlotsTruncatedLabel();
+      await expect(root).toHaveAttribute('data-testid', 'root data');
+      await expect(inputWrapper).toHaveAttribute('data-testid', 'inputwrapper data');
+      await expect(input).toHaveAttribute('data-testid', 'input data');
+      await expect(label).toHaveAttribute('data-testid', 'label data');
+      await expect(labelTypography).toHaveAttribute('data-testid', 'labeltypography data');
+      await expect(truncatedLabel).toHaveAttribute('data-testid', 'truncatedlabel data');
+    });
+
+    it('03: should have custom lang for each rendered label slot', async () => {
+      const root = await DSControlledRadioCO.getSlotsRoot();
+      const inputWrapper = await DSControlledRadioCO.getSlotsInputWrapper();
+      const input = await DSControlledRadioCO.getSlotsInput();
+      const label = await DSControlledRadioCO.getSlotsLabel();
+      const labelTypography = await DSControlledRadioCO.getSlotsLabelTypography();
+      const truncatedLabel = await DSControlledRadioCO.getSlotsTruncatedLabel();
+      await expect(root).toHaveAttribute('lang', 'ja');
+      await expect(inputWrapper).toHaveAttribute('lang', 'it');
+      await expect(input).toHaveAttribute('lang', 'de');
+      await expect(label).toHaveAttribute('lang', 'fr');
+      await expect(labelTypography).toHaveAttribute('lang', 'es');
+      await expect(truncatedLabel).toHaveAttribute('lang', 'pt');
+    });
+
+    it('04: should have custom aria-*, data-* and lang for the tooltip slots on hover', async () => {
+      const truncatedLabel = await DSControlledRadioCO.getSlotsTruncatedLabel();
+      await truncatedLabel.moveTo();
+      const tooltipContainer = await DSControlledRadioCO.getSlotsTooltipContainer();
+      await tooltipContainer.waitForDisplayed();
+      const tooltipText = await DSControlledRadioCO.getSlotsTooltipText();
+      await expect(tooltipContainer).toHaveAttribute('aria-label', 'tooltipcontainer aria');
+      await expect(tooltipContainer).toHaveAttribute('data-testid', 'tooltipcontainer data');
+      await expect(tooltipContainer).toHaveAttribute('lang', 'zh');
+      await expect(tooltipText).toHaveAttribute('aria-label', 'tooltiptext aria');
+      await expect(tooltipText).toHaveAttribute('data-testid', 'tooltiptext data');
+      await expect(tooltipText).toHaveAttribute('lang', 'ru');
+    });
+  });
+}

package/ds-dataviz/DSDataViz.axis.visual.spec.js

@@ -65,8 +65,7 @@ if (!browser.capabilities['ice:options'].isPhone) {
 
   // fails on firefox due to fake-positive of infinte loop
   if (browser.capabilities.browserName !== 'Firefox') {
-    // Skipped until PUI-16334 gets fixed
-    describe.skip('PUI-9401 - DSDataViz, TimeLinear axis -Visual', () => {
+    describe('PUI-9401 - DSDataViz, TimeLinear axis -Visual', () => {
       before('loading page', async () => {
         const errorOnGo = await DSDataVizCO.timeLinearAxis.go();
         if (errorOnGo) throw errorOnGo;

package/ds-dataviz/DSDataViz.ticks.visual.spec.js

@@ -62,8 +62,7 @@ if (!browser.capabilities['ice:options'].isPhone) {
     });
   });
 
-  // Skipped until PUI-16334 gets fixed
-  describe.skip('PUI-10321 - DSDataViz, Force ticks -Visual', () => {
+  describe('PUI-10321 - DSDataViz, Force ticks -Visual', () => {
     before('loading page', async () => {
       const errorOnGo = await DSDataVizCO.forceTicks.go();
       if (errorOnGo) throw errorOnGo;

package/ds-form-combobox-multi/DSComboboxMultiCO.js

@@ -39,6 +39,8 @@ export default class DSComboboxMultiCO extends PageObject {
 
   static withTooltip = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'with-tooltip-test');
 
+  static themeFontURL = new Urlbuilder(PATH_E2E_COMBOBOX_MULTI, 'theme-font-family-test');
+
   static controlledMenuStateWithSectionsSlotsTest = new Urlbuilder(
     PATH_E2E_COMBOBOX_MULTI_SLOTS,
     'controlled-menu-state-with-section-slots-test',
@@ -294,4 +296,18 @@ export default class DSComboboxMultiCO extends PageObject {
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DSComboboxMulti', example, 'ds-combobox-multi');
   }
+
+  // The selection wrapper and the selected pills' labels both render through
+  // styled(DSTypography), so the owner slot lands on `data-dimsum-parent-slot`.
+  static async getThemedSelection() {
+    return $('[data-testid="theme-font-sentinel"] [data-dimsum-parent-slot="dsComboboxSelection"]');
+  }
+
+  static async getFallbackSelection() {
+    return $('[data-testid="theme-font-fallback"] [data-dimsum-parent-slot="dsComboboxSelection"]');
+  }
+
+  static async getThemedPillLabel() {
+    return $('[data-testid="theme-font-sentinel"] [data-dimsum-parent-slot="dsPillLabel"]');
+  }
 }

package/ds-form-combobox-multi/aria-disabled/DSComboboxMulti.aria-disabled.visual.spec.js

@@ -11,8 +11,10 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('01: The first aria-disabled combobox should be focused', async () => {
       await browser.eyesOpen();
-      const firstCombobox = await DSComboboxMultiCO.getComboboxByIndex(0);
-      await firstCombobox.click();
+      // the container centre lands on the aria-hidden overlay input, which never focuses the
+      // combobox; the selected-values area is the only pointer target that reliably focuses it
+      const firstComboboxValues = await DSComboboxMultiCO.getSelectedValuesByIndex(0);
+      await firstComboboxValues.click();
       const snapshot = await browser.eyesCheckSnapshot(
         DSComboboxMultiCO.snapshotPath('combobox-multi-aria-disabled-click'),
       );

package/ds-form-combobox-multi/theme-font/DSComboboxMulti.theme-font.func.spec.js

@@ -0,0 +1,38 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+// Tests the theme-driven font-family mechanism covered by the combobox theming spike PUI-18214
+// (the selection wrapper and the selected pills' labels render through DSTypography, which reads
+// theme.fonts.default, falling back to proxima-nova). Theme-agnostic: uses a sentinel font,
+// never the dsConsumer POC theme values, so it survives any future theme change.
+// Out of scope on purpose: the native <input> that holds typed text mirrors b2 as raw CSS and
+// declares no font-family, so it does NOT follow theme.fonts.default (measured under the sentinel
+// theme it still computes proxima-nova, i.e. the inherited page font, while the selection text
+// switches). Asserting it here would lock in that gap; it is reported separately instead.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18974 - ComboboxMulti:: theme font-family wiring - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.themeFontURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should read selection and pill font-family from theme with proxima-nova fallback', async () => {
+      const themed = await DSComboboxMultiCO.getThemedSelection();
+      await themed.waitForDisplayed();
+      const themedFont = (await themed.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(themedFont).toContain('sentinelfont');
+
+      const themedPill = await DSComboboxMultiCO.getThemedPillLabel();
+      const themedPillFont = (await themedPill.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(themedPillFont).toContain('sentinelfont');
+
+      const fallback = await DSComboboxMultiCO.getFallbackSelection();
+      const fallbackFont = (await fallback.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(fallbackFont).toContain('proxima-nova');
+    });
+  });
+}

package/ds-form-combobox-single/DSComboboxSingleCO.js

@@ -45,6 +45,8 @@ export default class DSComboboxSingleCO extends PageObject {
 
   static withTooltip = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'with-tooltip-test');
 
+  static themeFontURL = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'theme-font-family-test');
+
   // COMBOBOX - INPUT
   static async getCombobox() {
     return $('[data-testid="combobox-container"]');
@@ -275,4 +277,14 @@ export default class DSComboboxSingleCO extends PageObject {
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DSComboboxV3', example, 'ds-combobox');
   }
+
+  // The selection text renders through styled(DSTypography), so the owner slot lands on
+  // `data-dimsum-parent-slot` (the element's own `data-dimsum-slot` is the typography root).
+  static async getThemedSelection() {
+    return $('[data-testid="theme-font-sentinel"] [data-dimsum-parent-slot="dsComboboxSelection"]');
+  }
+
+  static async getFallbackSelection() {
+    return $('[data-testid="theme-font-fallback"] [data-dimsum-parent-slot="dsComboboxSelection"]');
+  }
 }

package/ds-form-combobox-single/theme-font/DSComboboxSingle.theme-font.func.spec.js

@@ -0,0 +1,34 @@
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+
+// Tests the theme-driven font-family mechanism covered by the combobox theming spike PUI-18214
+// (the selection text renders through DSTypography, which reads theme.fonts.default, falling
+// back to proxima-nova). Theme-agnostic: uses a sentinel font, never the dsConsumer POC theme
+// values, so it survives any future theme change.
+// Out of scope on purpose: the native <input> that holds typed text mirrors b2 as raw CSS and
+// declares no font-family, so it does NOT follow theme.fonts.default (measured under the sentinel
+// theme it still computes proxima-nova, i.e. the inherited page font, while the selection text
+// switches). Asserting it here would lock in that gap; it is reported separately instead.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18973 - ComboboxSingle:: theme font-family wiring - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.themeFontURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should read selection font-family from theme with proxima-nova fallback', async () => {
+      const themed = await DSComboboxSingleCO.getThemedSelection();
+      await themed.waitForDisplayed();
+      const themedFont = (await themed.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(themedFont).toContain('sentinelfont');
+
+      const fallback = await DSComboboxSingleCO.getFallbackSelection();
+      const fallbackFont = (await fallback.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(fallbackFont).toContain('proxima-nova');
+    });
+  });
+}

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);