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

package/ds-controlled-form/ds-controlled-checkbox/Basic/DSControlledCheckbox.basic.visual.spec.js

@@ -0,0 +1,56 @@
+import { Key } from 'webdriverio';
+import { mouseOver } from '../../../helpers';
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18822 - DSControlledCheckbox: update to latest spec and typography- visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01:  the checked checkbox is not focused', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCustomCheckbox();
+      await checkbox.waitForExist();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: checkbox hover even when checked', async () => {
+      const controlBox = await DSControlledCheckboxCO.getCheckboxInputWrapper();
+      await controlBox.moveTo();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('03:  the checked checkbox is focused', async () => {
+      await browser.keys(Key.Tab);
+      const checkbox = await DSControlledCheckboxCO.getCustomCheckbox();
+      await expect(checkbox).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('04: checkbox is focused but unchecked', async () => {
+      await browser.keys(Key.Space);
+      const checkbox = await DSControlledCheckboxCO.getCustomCheckbox();
+      await expect(checkbox).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('05: checkbox not focused, not hovered when unchecked', async () => {
+      await browser.keys(Key.Tab);
+      await mouseOver(null, 400, 300);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('06: checkbox hover even when unchecked', async () => {
+      const controlBox = await DSControlledCheckboxCO.getCheckboxInputWrapper();
+      await controlBox.moveTo();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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 {
@@ -23,10 +23,18 @@ export default class DSControlledCheckboxCO extends PageObject {
 
   static applyAriaDisabled = new Urlbuilder(PATH_E2E_CHECKBOX, 'apply-aria-disabled-test');
 
+  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"]');
   }
 
+  static async getCheckboxInputWrapper() {
+    return $('[data-testid="ds-checkbox-input-wrapper"]');
+  }
+
   static async getCustomCheckbox() {
     return $('[data-testid="custom-data-testid"]');
   }
@@ -66,4 +74,49 @@ export default class DSControlledCheckboxCO extends PageObject {
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DSControlledCheckbox', example, 'ds-controlled-checkbox');
   }
+
+  static async getThemedCheckboxLabel() {
+    return $('[data-testid="theme-font-sentinel"] [data-testid="ds-checkbox-label-typography"]');
+  }
+
+  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/Disabled/DSControlledCheckbox.axe-core.disabled.func.spec.js

@@ -18,7 +18,7 @@ if (
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await checkbox.waitForExist();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-controlled-form/ds-controlled-checkbox/Disabled/DSControlledCheckbox.disabled.visual.spec.js

@@ -11,7 +11,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const checkbox = await DSControlledCheckboxCO.getCheckboxByLabel('Group');
       await checkbox.waitForDisplayed();
       await browser.keys(Key.Tab);
-      const snapshot = await browser.checkSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-disabled'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-controlled-form/ds-controlled-checkbox/HasError/DSControlledCheckbox.axe-core.hasError.func.spec.js

@@ -19,24 +19,24 @@ if (
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await checkbox.waitForExist();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('02: Evaluate checkbox accessibility with axe-core (focused)', async () => {
       await browser.keys(Key.Tab);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('03: Evaluate checkbox accessibility with axe-core (hovered)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await mouseOver(checkbox);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('04: Evaluate checkbox accessibility with axe-core (clicked)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(1);
       await checkbox.click();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-controlled-form/ds-controlled-checkbox/HasError/DSControlledCheckbox.has-error.visual.spec.js

@@ -1,3 +1,4 @@
+import { Key } from 'webdriverio';
 import { mouseOver } from '../../../helpers';
 import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
 
@@ -13,7 +14,76 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await checkbox1.click();
       await checkbox1.click();
       await mouseOver(checkbox2);
-      const snapshot = await browser.checkSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-hasError'));
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-18849 - DSControlledCheckbox - hasError - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.hasError.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01:  the partial selected checkbox is not focused', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await checkbox.waitForExist();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: checkbox hover even when partial selected', async () => {
+      const controlBox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await controlBox.moveTo();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('03:  the partial selected checkbox is focused', async () => {
+      await browser.keys(Key.Tab);
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await expect(checkbox).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('04: checkbox is focused but not selected', async () => {
+      await browser.keys(Key.Space);
+      await browser.keys(Key.Space);
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await expect(checkbox).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('05: checkbox not focused, not hovered when not selected', async () => {
+      await browser.keys(Key.Tab);
+      await mouseOver(null, 400, 300);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('06: checkbox hover even when not selected', async () => {
+      const controlBox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await controlBox.moveTo();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+    it('07: the selected checkbox is focused', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const controlBox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await mouseOver(controlBox);
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      await expect(checkbox).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+    it('08: the selected checkbox is hovered', async () => {
+      await browser.keys(Key.Tab);
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      await mouseOver(checkbox);
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-controlled-form/ds-controlled-checkbox/Mixed/DSControlledCheckbox.axe-core.mixed.func.spec.js

@@ -19,24 +19,24 @@ if (
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await checkbox.waitForExist();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('02: Evaluate checkbox accessibility with axe-core (focused)', async () => {
       await browser.keys(Key.Tab);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('03: Evaluate checkbox accessibility with axe-core (hovered)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await mouseOver(checkbox);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('04: Evaluate checkbox accessibility with axe-core (clicked)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(2);
       await checkbox.click();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-controlled-form/ds-controlled-checkbox/Mixed/DSControlledCheckbox.mixed.visual.spec.js

@@ -12,7 +12,7 @@ describe('PUI-7100 - DSControlledCheckbox - Visual Test - mixed', () => {
     await checkbox1.click();
     await checkbox1.click();
     await mouseOver(checkbox2);
-    const snapshot = await browser.checkSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-mixed'));
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });

package/ds-controlled-form/ds-controlled-checkbox/ReadOnly/DSControlledCheckbox.axe-core.read-only.func.spec.js

@@ -17,18 +17,18 @@ if (
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await checkbox.waitForExist();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('02: Evaluate checkbox accessibility with axe-core (focused)', async () => {
       await browser.keys(Key.Tab);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('03: Evaluate checkbox accessibility with axe-core (hovered)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await mouseOver(checkbox);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-controlled-form/ds-controlled-checkbox/ReadOnly/DSControlledCheckbox.read-only.visual.spec.js

@@ -14,7 +14,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await checkbox1.click();
       await checkbox1.click();
       await mouseOver(checkbox2);
-      const snapshot = await browser.eyesCheckSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-readOnly'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-controlled-form/ds-controlled-checkbox/WithTooltip/DSControlledCheckbox.axe-core.with-tooltip.func.spec.js

@@ -16,7 +16,7 @@ if (
       const checkboxLabel = await DSControlledCheckboxCO.getCheckboxLabelByIndex(4);
       await mouseOver(checkboxLabel);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-controlled-form/ds-controlled-checkbox/WithTooltip/DSControlledCheckbox.with-tooltip.visual.spec.js

@@ -11,9 +11,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.eyesOpen();
       const checkboxLabel = await DSControlledCheckboxCO.getCheckboxLabelByIndex(4);
       await mouseOver(checkboxLabel);
-      const snapshot = await browser.eyesCheckSnapshot(
-        DSControlledCheckboxCO.snapshotPath('checkbox-tooltip-longword'),
-      );
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-controlled-form/ds-controlled-checkbox/WrapLabel/DSControlledCheckbox.axe-core.wrap-label.func.spec.js

@@ -16,7 +16,7 @@ if (
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await checkbox.waitForExist();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-controlled-form/ds-controlled-checkbox/WrapLabel/DSControlledCheckbox.wrap-label.visual.spec.js

@@ -10,7 +10,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.eyesOpen();
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(1);
       await checkbox.waitForExist();
-      const snapshot = await browser.eyesCheckSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-wrapped'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-controlled-form/ds-controlled-checkbox/aria-disabled/DSControlledCheckbox.aria-disabled.visual.spec.js

@@ -11,18 +11,14 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.eyesOpen();
       const firstcheckbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await firstcheckbox.click();
-      const snapshot = await browser.eyesCheckSnapshot(
-        DSControlledCheckboxCO.snapshotPath('checkbox-aria-disabled-mouse'),
-      );
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
     it('02: The second aria-disabled checkbox should be focused - KB nav', async () => {
       await browser.eyesOpen();
       await browser.keys(Key.Tab);
       await browser.keys(Key.Enter);
-      const snapshot = await browser.eyesCheckSnapshot(
-        DSControlledCheckboxCO.snapshotPath('checkbox-aria-disabled-kb-nav'),
-      );
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-controlled-form/ds-controlled-checkbox/aria-disabled/DSControlledCheckbox.axe-core.aria-disabled.func.spec.js

@@ -18,7 +18,7 @@ if (
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(1);
       await checkbox.click();
       const result = await axeCoreCheck();
-      await expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

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-checkbox/theme-font/DSControlledCheckbox.theme-font.func.spec.js

@@ -0,0 +1,30 @@
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+
+// Tests the theme-driven font-family mechanism shipped under PUI-18210
+// (the checkbox label 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.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18799 - DSControlledCheckbox:: theme font-family wiring - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.themeFontURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should read label font-family from theme with proxima-nova fallback', async () => {
+      const themed = await DSControlledCheckboxCO.getThemedCheckboxLabel();
+      await themed.waitForDisplayed();
+      const themedFont = (await themed.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(themedFont).toContain('sentinelfont');
+
+      const fallback = await DSControlledCheckboxCO.getFallbackCheckboxLabel();
+      const fallbackFont = (await fallback.getCSSProperty('font-family')).value.toLowerCase();
+      await expect(fallbackFont).toContain('proxima-nova');
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox-group/DSControlledCheckboxGroup.axe-core.func.spec.js

@@ -18,24 +18,24 @@ if (
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await checkbox.waitForExist();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('02: Evaluate checkbox accessibility with axe-core (focused)', async () => {
       await browser.keys(Key.Tab);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('03: Evaluate checkbox accessibility with axe-core (hovered)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(10);
       await mouseOver(checkbox);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('04: Evaluate checkbox accessibility with axe-core (clicked)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(10);
       await checkbox.click();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-controlled-form/ds-controlled-checkbox-group/DSControlledCheckboxGroup.visual.spec.js

@@ -11,7 +11,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.eyesOpen();
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(1);
       await checkbox.waitForExist();
-      const snapshot = await browser.eyesCheckSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-layout'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

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 {
@@ -16,6 +16,10 @@ export default class DSControlledRadioCO extends PageObject {
 
   static wrapLabel = new Urlbuilder(PATH_E2E_RADIO, 'wrap-label');
 
+  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"]');
   }
@@ -43,4 +47,49 @@ export default class DSControlledRadioCO extends PageObject {
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DSControlledRadio', example, 'ds-controlled-radio');
   }
+
+  static async getThemedRadioLabel() {
+    return $('[data-testid="theme-font-sentinel"] [data-testid="ds-radio-label-typography"]');
+  }
+
+  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"]');
+  }
 }