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

package/ds-form-date-range-picker/DateRangePicker.functional.spec.js

@@ -34,8 +34,16 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await openPickerBtn.click();
       const startDate = await DateRangePickerCO.getRangeStartDay();
       const endDate = await DateRangePickerCO.getRangeEndDay();
-      await expect(startDate).toHaveAttribute('aria-label', 'February third 2020, Monday');
-      await expect(endDate).toHaveAttribute('aria-label', 'February eighth 2020, Saturday');
+      // PUI-18279 (a11y): days inside the selected range announce the whole range instead of a
+      // bare weekday label, so screen-reader users hear the full selection on every range day.
+      await expect(startDate).toHaveAttribute(
+        'aria-label',
+        'February third 2020, range from February third 2020 to February eighth 2020 selected.',
+      );
+      await expect(endDate).toHaveAttribute(
+        'aria-label',
+        'February eighth 2020, range from February third 2020 to February eighth 2020 selected.',
+      );
     });
     it('03: should change the text input to the picked date (mouse)', async () => {
       const exampleDate1 = await DateRangePickerCO.getDayOnCalendarByIndex(16);
@@ -55,24 +63,78 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(endingDay).toHaveValue(expect.stringContaining('09'));
       await expect(endingYear).toHaveValue(expect.stringContaining('2020'));
     });
-    it('04: should change the text input to the picked date (KB)', async () => {
-      await browser.keys(Key.ArrowDown);
-      await browser.keys(Key.Return);
+    // Keyboard range selection previously lived here as a 4th step, but it re-picked over the range
+    // typed in test 01 (a stateful re-pick whose result is hard to reason about). It now has
+    // dedicated, deterministic, fresh-state coverage in the PUI-15572 describe below (mouse +
+    // keyboard + auto-ordering).
+  });
+
+  // PUI-15572 (WCAG 3.2.2 On Input): completing the range must close the calendar automatically and
+  // return focus to the trigger so the user knows the selection succeeded. beforeEach reloads a
+  // fresh empty picker so each scenario is independent (the stateful Basic flow above re-picks over
+  // an existing range and is intentionally not used to assert closure). The story fixes
+  // onCalendarOpenFocusedDay to 12/27/2000, so keyboard navigation lands on deterministic days.
+  describe('PUI-18775 - DSControlledDateRangePicker:: calendar closes on completed range -Func', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DateRangePickerCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should stay open on start pick, then close and refocus trigger on end pick (mouse)', async () => {
+      const openPickerBtn = await DateRangePickerCO.getPickerBtn();
+      await openPickerBtn.click();
+      const dialog = await DateRangePickerCO.getCalendarDialog();
+      await expect(dialog).toBeDisplayedInViewport();
+
+      // first pick = start date -> range incomplete, calendar must stay open
+      await (await DateRangePickerCO.getDayOnCalendarByIndex(16)).click();
+      await expect(dialog).toBeDisplayedInViewport();
+
+      // second pick = end date -> range complete, calendar must close and focus returns to trigger
+      await (await DateRangePickerCO.getDayOnCalendarByIndex(20)).click();
+      await expect(dialog).not.toBeDisplayedInViewport();
+      await expect(openPickerBtn).toBeFocused();
+    });
+
+    it('02: should complete the range via keyboard, closing the calendar and refocusing the trigger', async () => {
+      const openPickerBtn = await DateRangePickerCO.getPickerBtn();
+      await openPickerBtn.click();
+      const dialog = await DateRangePickerCO.getCalendarDialog();
+      await expect(dialog).toBeDisplayedInViewport();
+
+      // focus opens on Dec 27 2000; ArrowRight -> Dec 28, Enter picks the start (range incomplete)
       await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.Enter);
+      await expect(dialog).toBeDisplayedInViewport();
+
+      // ArrowRight x2 -> Dec 30, Enter completes the range -> calendar closes and focus returns
       await browser.keys(Key.ArrowRight);
-      await browser.keys(Key.Space);
-      const startingMonth = await DateRangePickerCO.getMonthInputByIndex(0);
-      const startingDay = await DateRangePickerCO.getDayInputByIndex(0);
-      const startingYear = await DateRangePickerCO.getYearInputByIndex(0);
-      const endingMonth = await DateRangePickerCO.getMonthInputByIndex(1);
-      const endingDay = await DateRangePickerCO.getDayInputByIndex(1);
-      const endingYear = await DateRangePickerCO.getYearInputByIndex(1);
-      await expect(startingMonth).toHaveValue(expect.stringContaining('02'));
-      await expect(startingDay).toHaveValue(expect.stringContaining('14'));
-      await expect(startingYear).toHaveValue(expect.stringContaining('2020'));
-      await expect(endingMonth).toHaveValue(expect.stringContaining('02'));
-      await expect(endingDay).toHaveValue(expect.stringContaining('16'));
-      await expect(endingYear).toHaveValue(expect.stringContaining('2020'));
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.Enter);
+      await expect(dialog).not.toBeDisplayedInViewport();
+      await expect(openPickerBtn).toBeFocused();
+
+      await expect(await DateRangePickerCO.getMonthInputByIndex(0)).toHaveValue(expect.stringContaining('12'));
+      await expect(await DateRangePickerCO.getDayInputByIndex(0)).toHaveValue(expect.stringContaining('28'));
+      await expect(await DateRangePickerCO.getMonthInputByIndex(1)).toHaveValue(expect.stringContaining('12'));
+      await expect(await DateRangePickerCO.getDayInputByIndex(1)).toHaveValue(expect.stringContaining('30'));
+    });
+
+    it('03: should auto-order the range when the completing pick precedes the start pick', async () => {
+      const openPickerBtn = await DateRangePickerCO.getPickerBtn();
+      await openPickerBtn.click();
+      const dialog = await DateRangePickerCO.getCalendarDialog();
+
+      // pick the start (Dec 28), then pick an earlier day (ArrowUp = -1 week -> Dec 21)
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.Enter);
+      await browser.keys(Key.ArrowUp);
+      await browser.keys(Key.Enter);
+
+      // the earlier day becomes the start (from < to) and the range completes -> calendar closes
+      await expect(dialog).not.toBeDisplayedInViewport();
+      await expect(await DateRangePickerCO.getDayInputByIndex(0)).toHaveValue(expect.stringContaining('21'));
+      await expect(await DateRangePickerCO.getDayInputByIndex(1)).toHaveValue(expect.stringContaining('28'));
     });
   });
 

package/ds-form-date-range-picker/DateRangePickerCO.js

@@ -30,6 +30,8 @@ export default class DateRangePickerCO extends PageObject {
     'apply-aria-disabled-invalid-selection-test',
   );
 
+  static pickerCallbacks = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'picker-callbacks-test');
+
   // Story elements
 
   static getNextMonthBtn = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-next-month"]');
@@ -56,11 +58,22 @@ export default class DateRangePickerCO extends PageObject {
   static getYearInputByIndex = async (index = 0) =>
     $$('[data-testid="ds-controlled-date-time-picker-year-input"]')[index];
 
+  // Grouped field (DSFormLayoutBlockItem isGroup) a11y wiring
+  static getNamedGroupByLabel = async (label) => $$(`[role="group"][aria-label="${label}"]`);
+
+  static getFieldsetContainer = async () => $('[data-testid="ds-formlayoutblockitem-container"]');
+
+  static getValidationAlert = async () => $('[data-testid="ds-formlayoutblockitem-error-message"]');
+
   static getClearableBtns = async () => $$(`[data-testid="ds-controlled-date-time-picker-clear-btn"]`);
 
   static getClearableByIndex = async (index = 0) =>
     $$(`[data-testid="ds-controlled-date-time-picker-clear-btn"]`)[index];
 
+  static getOpenCallbackCount = async () => $('[data-testid="picker-open-count"]');
+
+  static getCloseCallbackCount = async () => $('[data-testid="picker-close-count"]');
+
   // TimeInput
   static getHourInput = async () => $('[data-testid="ds-controlled-date-time-picker-hour-input"]');
 
@@ -111,6 +124,12 @@ export default class DateRangePickerCO extends PageObject {
     return $(`[data-testid="ds-controlled-date-time-picker-calendar-context-content-wrapper"]`);
   }
 
+  // The open calendar popover is the modal dialog (role="dialog"); it is the same DOM node as
+  // the contextual-menu wrapper above, exposed here under an accessibility-semantic name.
+  static async getCalendarDialog() {
+    return $(`[data-testid="ds-controlled-date-time-picker-calendar-context-content-wrapper"]`);
+  }
+
   static async getCalendarHeaderLabel() {
     return $(`[data-testid="ds-controlled-date-time-picker-calendar-header-label"]`);
   }

package/ds-form-date-range-picker/date-segment-aria-labels/DateRangePicker.date-segment-aria-labels.func.spec.js

@@ -0,0 +1,66 @@
+import { Key } from 'webdriverio';
+import DateRangePickerCO from '../DateRangePickerCO';
+
+// Tests for the fix introduced in PUI-15569 (lack of clear distinction between start and end date
+// fields). Each day/month/year segment now carries a distinguishing name-only aria-label that
+// encodes which date it belongs to ("Start date month" / "End date year" ...) while per-field value
+// still lives on role="spinbutton" + aria-valuetext. This fix (commit d1ded9edc7b) reversed the
+// earlier PUI-15568 name-only labels ("month"/"day"/"year"), which is why the label strings changed.
+// Chrome-only: pure DOM-attribute assertions are identical across browsers.
+
+// Asserts a single segment input carries its full distinguishing aria-label, spinbutton role,
+// empty value-text, and none of the leaked phrases the earlier defect used to inject into the label.
+const assertDistinguishingEmptySegment = async (input, label) => {
+  await expect(input).toHaveAttribute('aria-label', label);
+  await expect(input).toHaveAttribute('role', 'spinbutton');
+  await expect(input).toHaveAttribute('aria-valuetext', 'empty');
+  const ariaLabel = await input.getAttribute('aria-label');
+  expect(ariaLabel).not.toContain('input field');
+  expect(ariaLabel).not.toContain('current values');
+};
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18653 - DSControlledDateRangePicker:: start and end date segment aria-labels - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateRangePickerCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    // Static reads on the empty initial state — consolidated into one it() (no interaction).
+    // index 0 = Start date group, index 1 = End date group.
+    it('01: each segment names its own date (start/end) with a spinbutton role and empty value', async () => {
+      // Start date group
+      await assertDistinguishingEmptySegment(await DateRangePickerCO.getMonthInputByIndex(0), 'Start date month');
+      await assertDistinguishingEmptySegment(await DateRangePickerCO.getDayInputByIndex(0), 'Start date day');
+      await assertDistinguishingEmptySegment(await DateRangePickerCO.getYearInputByIndex(0), 'Start date year');
+      // End date group
+      await assertDistinguishingEmptySegment(await DateRangePickerCO.getMonthInputByIndex(1), 'End date month');
+      await assertDistinguishingEmptySegment(await DateRangePickerCO.getDayInputByIndex(1), 'End date day');
+      await assertDistinguishingEmptySegment(await DateRangePickerCO.getYearInputByIndex(1), 'End date year');
+    });
+
+    it('02: filling one segment does not leak its value into sibling aria-labels', async () => {
+      const month = await DateRangePickerCO.getMonthInputByIndex(0);
+      await month.click();
+      await browser.keys(Key.ArrowUp); // 01 / January
+      await browser.keys(Key.ArrowUp); // 02 / February
+
+      // filled field announces its OWN value via aria-valuetext; label stays the distinguishing name
+      await expect(month).toHaveAttribute('aria-label', 'Start date month');
+      await expect(month).toHaveAttribute('aria-valuetext', 'February');
+
+      // siblings keep their distinguishing names + empty value — no "February" leaks into their labels
+      const day = await DateRangePickerCO.getDayInputByIndex(0);
+      const year = await DateRangePickerCO.getYearInputByIndex(0);
+      await expect(day).toHaveAttribute('aria-label', 'Start date day');
+      await expect(day).toHaveAttribute('aria-valuetext', 'empty');
+      await expect(year).toHaveAttribute('aria-label', 'Start date year');
+      await expect(year).toHaveAttribute('aria-valuetext', 'empty');
+    });
+  });
+}

package/ds-form-date-range-picker/grouped-field-error-announcement/DateRangePicker.grouped-field-error-announcement.func.spec.js

@@ -0,0 +1,59 @@
+import DateRangePickerCO from '../DateRangePickerCO';
+
+// Tests for the fix introduced in PUI-15570 (feedback message announced as part of the group heading
+// and not programmatically associated with any field). When the range picker sits inside a
+// DSFormLayoutBlockItem isGroup fieldset, the fix (commit d1ded9edc7b) removed the nested named
+// role="group" (aria-label="Start date"/"End date") that collided with the fieldset legend, so the
+// legend + validation message now announce correctly. Each field self-identifies via its own
+// aria-label and is marked aria-invalid, telling the user exactly which fields contain errors, while
+// the validation message is announced separately via role="alert".
+// Chrome-only: pure DOM-attribute assertions are identical across browsers.
+
+// Asserts a single segment input is marked invalid and keeps its distinguishing name in the error state.
+const assertInvalidNamedSegment = async (input, label) => {
+  await expect(input).toHaveAttribute('aria-label', label);
+  await expect(input).toHaveAttribute('role', 'spinbutton');
+  await expect(input).toHaveAttribute('aria-invalid', 'true');
+};
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18711 - DSControlledDateRangePicker:: grouped field error announcement - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateRangePickerCO.invalidSelection.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    // Static reads on the error-state load — consolidated into one it() (no interaction).
+    it('01: drops the nested named group, marks each named field invalid, announces error via alert', async () => {
+      // Regression guard for the fix: the nested named role="group" wrappers are gone, so they no
+      // longer compete with the DSFormLayoutBlockItem fieldset legend / validation message.
+      const startNamedGroups = await DateRangePickerCO.getNamedGroupByLabel('Start date');
+      const endNamedGroups = await DateRangePickerCO.getNamedGroupByLabel('End date');
+      expect(startNamedGroups.length).toBe(0);
+      expect(endNamedGroups.length).toBe(0);
+
+      // The grouping is still provided by the fieldset container.
+      await expect(await DateRangePickerCO.getFieldsetContainer()).toBeExisting();
+
+      // Each field self-identifies (start/end) and is flagged invalid — tells the user which fields
+      // contain errors. index 0 = Start date group, index 1 = End date group.
+      await assertInvalidNamedSegment(await DateRangePickerCO.getMonthInputByIndex(0), 'Start date month');
+      await assertInvalidNamedSegment(await DateRangePickerCO.getDayInputByIndex(0), 'Start date day');
+      await assertInvalidNamedSegment(await DateRangePickerCO.getYearInputByIndex(0), 'Start date year');
+      await assertInvalidNamedSegment(await DateRangePickerCO.getMonthInputByIndex(1), 'End date month');
+      await assertInvalidNamedSegment(await DateRangePickerCO.getDayInputByIndex(1), 'End date day');
+      await assertInvalidNamedSegment(await DateRangePickerCO.getYearInputByIndex(1), 'End date year');
+
+      // The validation message is a separate element announced on its own via role="alert".
+      const alert = await DateRangePickerCO.getValidationAlert();
+      await expect(alert).toBeExisting();
+      await expect(alert).toHaveAttribute('role', 'alert');
+      await expect(alert).toHaveText('The selected range is not valid', { containing: true });
+    });
+  });
+}

package/ds-form-date-range-picker/picker-callbacks/DateRangePicker.picker-callbacks.func.spec.js

@@ -0,0 +1,36 @@
+import { Key } from 'webdriverio';
+import DateRangePickerCO from '../DateRangePickerCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  // Tests for the fix introduced in PUI-18907 (forward picker open and close callbacks).
+  describe('PUI-19082 - DSControlledDateRangePicker:: picker open and close callbacks - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DateRangePickerCO.pickerCallbacks.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should invoke onPickerOpen when the calendar opens', async () => {
+      const calendarTrigger = await DateRangePickerCO.getPickerBtn();
+      const openCallbackCount = await DateRangePickerCO.getOpenCallbackCount();
+
+      await expect(openCallbackCount).toHaveText('0');
+      await calendarTrigger.click();
+      await expect(await DateRangePickerCO.getCalendarDialog()).toBeDisplayedInViewport();
+      await expect(openCallbackCount).toHaveText('1');
+    });
+
+    it('02: should invoke onPickerClose when the calendar closes', async () => {
+      const closeCallbackCount = await DateRangePickerCO.getCloseCallbackCount();
+
+      await expect(closeCallbackCount).toHaveText('0');
+      await browser.keys(Key.Escape);
+      await expect(await DateRangePickerCO.getCalendarDialog()).not.toBeDisplayedInViewport();
+      await expect(closeCallbackCount).toHaveText('1');
+    });
+  });
+}

package/ds-form-date-time-picker/DSControlledDateTimePickerCO.js

@@ -281,6 +281,13 @@ export default class DSDateTimePickerCO extends PageObject {
   static getCalendarSelectedFocusedDay = async () =>
     $(`[data-testid="ds-controlled-date-time-picker-calendar-selected-focused-day"]`);
 
+  // Non-current-month day cells only carry the `notCurrentMonth` wrapper class (they share the
+  // generic calendar-day data-testid), so this class is the only distinguishing selector. The grid
+  // renders leading/trailing spillover cells that are hidden, so index 0 is a hidden filler — use
+  // index 1 for the first visible non-current-month day. PUI-14872.
+  static getCalendarNotCurrentMonthDayByIndex = async (index = 0) =>
+    $$(`.notCurrentMonth button[data-testid="ds-controlled-date-time-picker-calendar-day"]`)[index];
+
   // TIMEWHEEL
   static getTimeWheelHeaderLabel = async () =>
     $(`[data-testid="ds-controlled-date-time-picker-timewheel-header-label"]`);

package/ds-form-date-time-picker/date-time-full/DateTimeFull.axe-core.func.spec.js

@@ -1,7 +1,7 @@
 /* eslint-disable prettier/prettier */
 /* eslint-disable max-len */
 /* eslint-disable max-lines */
-import { axeCoreCheck } from '../../helpers';
+import { axeCoreCheck, mouseOver } from '../../helpers';
 import DateTimePickerCO from '../DSControlledDateTimePickerCO';
 
 if (
@@ -21,5 +21,12 @@ if (
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
     });
+    it('02: should pass axe-core color-contrast while hovering a non-current-month day', async () => {
+      const notCurrentMonthDay = await DateTimePickerCO.getCalendarNotCurrentMonthDayByIndex(1);
+      await notCurrentMonthDay.waitForDisplayed();
+      await mouseOver(notCurrentMonthDay);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
   });
 }

package/ds-form-date-time-picker/date-time-full/DateTimePicker.DateTimeFull.visual.spec.js

@@ -45,5 +45,14 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       );
       await expect(snapshot).toEqual(0);
     });
+    it('05: should keep readable contrast when hovering a non-current-month day', async () => {
+      const notCurrentMonthDay = await DateTimePickerCO.getCalendarNotCurrentMonthDayByIndex(1);
+      await notCurrentMonthDay.waitForDisplayed();
+      await mouseOver(notCurrentMonthDay);
+      const snapshot = await browser.checkSnapshot(
+        DateTimePickerCO.snapshotPath('date-time-full-not-current-month-day-hover'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
   });
 }

package/ds-form-date-time-picker/partial-date-open-focus/DateTimePicker.partial-date-open-focus.func.spec.js

@@ -0,0 +1,45 @@
+import DateTimePickerCO from '../DSControlledDateTimePickerCO';
+import { type } from '../../helpers';
+
+// Tests for the fix introduced in PUI-15900 (focus lost when the input holds a partial date
+// while onCalendarOpenFocusedDay is set — the displayed month must follow the focused day so
+// the prop date is rendered and receives focus on open).
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18784 - DSControlledDateTimePicker:: focus on calendar open with partial date -Func', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DateTimePickerCO.emptyDatePickerStartingMonth.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: empty input focuses the onCalendarOpenFocusedDay day (Dec 27) on open', async () => {
+      const trigger = await DateTimePickerCO.getTrigger();
+      await trigger.click();
+
+      const focusedDay = await DateTimePickerCO.getCalendarFocusedDay();
+      await expect(focusedDay).toHaveText('27');
+      await expect(focusedDay).toBeFocused();
+    });
+
+    it('02: partial month still focuses the onCalendarOpenFocusedDay day (Dec 27) on open', async () => {
+      const month = await DateTimePickerCO.getMonthInput();
+      await month.click();
+      await type('1'); // partial date — month typed, no day/year
+
+      const trigger = await DateTimePickerCO.getTrigger();
+      await trigger.click();
+
+      // grid follows the focused day's month (December) so the prop date is visible + focused
+      const focusedDay = await DateTimePickerCO.getCalendarFocusedDay();
+      await expect(focusedDay).toHaveText('27');
+      await expect(focusedDay).toBeFocused();
+
+      // the displayed month must be December 2000 (the prop's month), not the typed January
+      const headerLabel = await DateTimePickerCO.getCalendarHeaderLabel();
+      await expect(headerLabel).toHaveText('December 2000');
+
+      // focus must NOT have landed on the previous-month navigation button
+      const prevMonthBtn = await DateTimePickerCO.getCalendarPrevMonthBtn();
+      await expect(prevMonthBtn).not.toBeFocused();
+    });
+  });
+}

package/ds-form-native-select/NativeSelect.axe-core.func.spec.js

@@ -54,4 +54,43 @@ if (
       expect(result.length).toBe(0);
     });
   });
+
+  describe('PUI-16464 - NativeSelect: ApplyAriaDisabled -AxeCore', () => {
+    before(async () => {
+      const errorOnGo = await NativeSelect.applyAriaDisabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have applyAriaDisabled native select and pass axe-core scan', async () => {
+      const nativeSelect = await NativeSelect.getRootByIndex(0);
+      await nativeSelect.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-16464 - NativeSelect: ReadOnly -AxeCore', () => {
+    before(async () => {
+      const errorOnGo = await NativeSelect.readOnlyURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have readOnly native select and pass axe-core scan', async () => {
+      const nativeSelect = await NativeSelect.getRootByIndex(0);
+      await nativeSelect.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-16464 - NativeSelect: ApplyAriaDisabled + hasError -AxeCore', () => {
+    before(async () => {
+      const errorOnGo = await NativeSelect.applyAriaDisabledWithErrorURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have applyAriaDisabled + hasError native select and pass axe-core scan', async () => {
+      const nativeSelect = await NativeSelect.getRootByIndex(0);
+      await nativeSelect.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
 }

package/ds-form-native-select/NativeSelect.visual.spec.js

@@ -0,0 +1,33 @@
+import NativeSelect from './NativeSelectCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18537 - NativeSelect:: basic state -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await NativeSelect.controlledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render the basic controlled native select', async () => {
+      const root = await NativeSelect.getRootByIndex(0);
+      await root.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(NativeSelect.snapshotPath('basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  // Coverage for the fix introduced in PUI-14617
+  // (disabled-state colors aligned with Combobox disabled-state colors to meet WCAG 1.4.3).
+  describe('PUI-18538 - NativeSelect:: disabled state -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await NativeSelect.disabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render the disabled native select', async () => {
+      const root = await NativeSelect.getRootByIndex(0);
+      await root.waitForDisplayed();
+      const snapshot = await browser.percyCheckScreenshot(NativeSelect.snapshotPath('disabled'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-native-select/NativeSelectCO.js

@@ -11,6 +11,12 @@ export default class NativeSelect extends PageObject {
 
   static disabledURL = new Urlbuilder(PATH_E2E_NATIVE_SELECT, 'disabled-test');
 
+  static applyAriaDisabledURL = new Urlbuilder(PATH_E2E_NATIVE_SELECT, 'apply-aria-disabled-test');
+
+  static readOnlyURL = new Urlbuilder(PATH_E2E_NATIVE_SELECT, 'read-only-test');
+
+  static applyAriaDisabledWithErrorURL = new Urlbuilder(PATH_E2E_NATIVE_SELECT, 'apply-aria-disabled-with-error-test');
+
   // Selectors
   static async getInputSlotByIndex(index = 0) {
     return $$(`[data-dimsum-slot="dsNativeselectInput"]`)[index];

package/ds-form-native-select/option-selection/NativeSelect.option-selection.func.spec.js

@@ -0,0 +1,25 @@
+import NativeSelect from '../NativeSelectCO';
+
+// Tests for the option selection behavior of the native select introduced in PUI-14617.
+// Selecting an option must update the <select> value (options use value={index}).
+// Uses the WebDriver native select command (selectByIndex) so the native popup is opened and an
+// option committed the same way in every browser — simulated keystrokes on the OS-drawn popup are
+// not reachable by WebDriver on macOS/Safari, which is why a keystroke-based assertion is not portable.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18563 - NativeSelect:: Option selection updates value -Func', () => {
+    before(async () => {
+      const errorOnGo = await NativeSelect.controlledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should update the value when selecting an option from the popup', async () => {
+      const nativeSelect = await NativeSelect.getRootByIndex(0);
+      await nativeSelect.waitForDisplayed();
+
+      const input = await NativeSelect.getInputSlotByIndex(0);
+      await input.selectByIndex(2);
+
+      await expect(input).toHaveValue('2');
+    });
+  });
+}

package/ds-form-toggle/DSToggle.func.spec.js

@@ -11,14 +11,16 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await (await DSToggleCO.getToggle()).waitForExist();
     });
     it('01: should change state to ON', async () => {
-      await (await DSToggleCO.getToggle()).click();
-      const toggleState = await DSToggleCO.getToggleState('ON');
-      await expect(toggleState).toBeDisplayed();
+      await (await DSToggleCO.getSwitch()).click();
+      await expect(await DSToggleCO.getSwitch()).toHaveAttribute('aria-checked', 'true');
+      // the visible (presentational) label should track the state
+      await expect(await DSToggleCO.getStateLabel()).toHaveText('ON');
     });
     it('02: should change state to OFF', async () => {
-      await (await DSToggleCO.getToggle()).click();
-      const toggleState = await DSToggleCO.getToggleState('OFF');
-      await expect(toggleState).toBeDisplayed();
+      await (await DSToggleCO.getSwitch()).click();
+      await expect(await DSToggleCO.getSwitch()).toHaveAttribute('aria-checked', 'false');
+      // the visible (presentational) label should track the state
+      await expect(await DSToggleCO.getStateLabel()).toHaveText('OFF');
     });
   });
   describe('PUI-6760 - DSControlledToggle:: states on/off - keyboard navigation', () => {
@@ -34,18 +36,15 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('02: should change state to ON (Enter)', async () => {
       await browser.keys(Key.Enter);
-      const toggleState = await DSToggleCO.getToggleState('ON');
-      await expect(toggleState).toBeDisplayed();
+      await expect(await DSToggleCO.getSwitch()).toHaveAttribute('aria-checked', 'true');
     });
     it('03: should change state to OFF (Space)', async () => {
       await browser.keys(Key.Space);
-      const toggleState = await DSToggleCO.getToggleState('OFF');
-      await expect(toggleState).toBeDisplayed();
+      await expect(await DSToggleCO.getSwitch()).toHaveAttribute('aria-checked', 'false');
     });
     it('04: should change state to ON (Space)', async () => {
       await browser.keys(Key.Space);
-      const toggleState = await DSToggleCO.getToggleState('ON');
-      await expect(toggleState).toBeDisplayed();
+      await expect(await DSToggleCO.getSwitch()).toHaveAttribute('aria-checked', 'true');
     });
   });
 
@@ -56,10 +55,11 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await (await DSToggleCO.getToggle()).waitForExist();
     });
     it('01: should not change state in disabled toggle', async () => {
-      const disabledToggle = await DSToggleCO.getToggleByIndex(0);
-      await disabledToggle.click();
-      const toggleState = await disabledToggle.$('//div[@disabled]//div[2]').getText();
-      await expect(toggleState).toEqual('ON');
+      const disabledSwitch = await DSToggleCO.getSwitch(0);
+      const initialState = await disabledSwitch.getAttribute('aria-checked');
+      // click the container (the button itself is disabled and not interactable)
+      await (await DSToggleCO.getToggleByIndex(0)).click();
+      await expect(await DSToggleCO.getSwitch(0)).toHaveAttribute('aria-checked', initialState);
     });
   });
 
@@ -84,18 +84,15 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('03: should not change state on [Enter] key press', async () => {
       await browser.keys(Key.Enter);
-      const toggleState = await DSToggleCO.getToggleState('OFF');
-      await expect(toggleState).toBeDisplayed();
+      await expect(await DSToggleCO.getSwitch()).toHaveAttribute('aria-checked', 'false');
     });
     it('04: should not change state on [Space] key press', async () => {
       await browser.keys(Key.Space);
-      const toggleState = await DSToggleCO.getToggleState('OFF');
-      await expect(toggleState).toBeDisplayed();
+      await expect(await DSToggleCO.getSwitch()).toHaveAttribute('aria-checked', 'false');
     });
     it('05: should not change state on click', async () => {
-      await (await DSToggleCO.getToggle()).click();
-      const toggleState = await DSToggleCO.getToggleState('OFF');
-      await expect(toggleState).toBeDisplayed();
+      await (await DSToggleCO.getSwitch()).click();
+      await expect(await DSToggleCO.getSwitch()).toHaveAttribute('aria-checked', 'false');
     });
   });
   describe('PUI-8814 - DSControlledToggle:: Tabbing', () => {