voyager-ionic-core 7.5.0 → 7.5.5

package/dist/collection/components/alert/alert.md.css

@@ -122,12 +122,45 @@
   overscroll-behavior-y: contain;
 }
 
-.alert-checkbox-group::-webkit-scrollbar,
-.alert-radio-group::-webkit-scrollbar,
-.alert-message::-webkit-scrollbar {
-  display: none;
+.alert-checkbox-label,
+.alert-radio-label {
+  /**
+   * This allows long words to wrap to the next line
+   * instead of flowing outside of the container.
+   *
+   * The "anywhere" keyword should be used instead
+   * of the "break-word" keyword since the parent
+   * container is using flexbox. Flex relies on min-content and
+   * max-content intrinsic sizes to structure the layout. Flex will
+   * wrap content only until it reaches its min-content intrinsic size
+   * which in this case is equal to the longest word in this container.
+   * "break-word" does not shrink the min-content intrinsic size
+   * of the flex item which causes the long word to still overflow.
+   * "anywhere" on the other hand does shrink the min-content
+   * intrinsic size which allows the long word to wrap to the next line.
+   */
+  overflow-wrap: anywhere;
 }
 
+/**
+  * Scrollbars on mobile devices will be hidden.
+  * Users can still scroll the content by swiping.
+  * If a user has a fine pointing device, such as a
+  * mouse or trackpad, then scrollbars will be
+  * visible. This allows users to scroll the
+  * content with their pointing device.
+  * Otherwise, the user would have to use the
+  * keyboard to navigate through the options.
+  * This may not be intuitive for users who
+  * are not familiar with keyboard navigation.
+  */
+@media (any-pointer: coarse) {
+  .alert-checkbox-group::-webkit-scrollbar,
+  .alert-radio-group::-webkit-scrollbar,
+  .alert-message::-webkit-scrollbar {
+    display: none;
+  }
+}
 .alert-input {
   padding-left: 0;
   padding-right: 0;

package/dist/collection/components/alert/test/a11y/alert.e2e.js

@@ -19,6 +19,54 @@ const testAria = async (page, buttonID, expectedAriaLabelledBy, expectedAriaDesc
   expect(ariaLabelledBy).toBe(expectedAriaLabelledBy);
   expect(ariaDescribedBy).toBe(expectedAriaDescribedBy);
 };
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('alert: text wrapping'), () => {
+    test('should break on words and white spaces for radios', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28406',
+      });
+      await page.setContent(`
+        <ion-alert header='Text Wrapping'></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.inputs = [
+            { type: 'radio', value: 'a', label: 'ThisIsAllOneReallyLongWordThatShouldWrap' },
+            { type: 'radio', value: 'b', label: 'These are separate words that should wrap' }
+          ];
+        </script>
+      `, config);
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const alert = page.locator('ion-alert');
+      await alert.evaluate((el) => el.present());
+      await ionAlertDidPresent.next();
+      await expect(page).toHaveScreenshot(screenshot(`alert-radio-text-wrap`));
+    });
+    test('should break on words and white spaces for checkboxes', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28406',
+      });
+      await page.setContent(`
+        <ion-alert header='Text Wrapping'></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.inputs = [
+            { type: 'checkbox', value: 'a', label: 'ThisIsAllOneReallyLongWordThatShouldWrap' },
+            { type: 'checkbox', value: 'b', label: 'These are separate words that should wrap' }
+          ];
+        </script>
+      `, config);
+      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+      const alert = page.locator('ion-alert');
+      await alert.evaluate((el) => el.present());
+      await ionAlertDidPresent.next();
+      await expect(page).toHaveScreenshot(screenshot(`alert-checkbox-text-wrap`));
+    });
+  });
+});
 configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
   test.describe(title('alert: a11y'), () => {
     test.beforeEach(async ({ page }) => {

package/dist/collection/components/checkbox/checkbox.ios.css

@@ -121,7 +121,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-checkbox) label:dir(rtl) {
+    :host(.legacy-checkbox:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -343,7 +343,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -356,7 +356,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }

package/dist/collection/components/checkbox/checkbox.md.css

@@ -121,7 +121,7 @@
     right: 0;
   }
   @supports selector(:dir(rtl)) {
-    :host(.legacy-checkbox) label:dir(rtl) {
+    :host(.legacy-checkbox:dir(rtl)) label {
       left: unset;
       right: unset;
       right: 0;
@@ -343,7 +343,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper:dir(rtl) {
+  :host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper {
     transform-origin: right top;
   }
 }
@@ -356,7 +356,7 @@ input {
 }
 
 @supports selector(:dir(rtl)) {
-  :host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper:dir(rtl) {
+  :host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper {
     transform-origin: calc(100% - center) top;
   }
 }

package/dist/collection/components/datetime/datetime.ios.css

@@ -196,7 +196,7 @@ ion-picker-column-internal {
       right: -99999px;
     }
     @supports selector(:dir(rtl)) {
-      :host(.show-month-and-year) .calendar-next-prev:dir(rtl), :host(.show-month-and-year) .calendar-days-of-week:dir(rtl), :host(.show-month-and-year) .calendar-body:dir(rtl), :host(.show-month-and-year) .datetime-time:dir(rtl) {
+      :host(.show-month-and-year:dir(rtl)) .calendar-next-prev, :host(.show-month-and-year:dir(rtl)) .calendar-days-of-week, :host(.show-month-and-year:dir(rtl)) .calendar-body, :host(.show-month-and-year:dir(rtl)) .datetime-time {
         left: unset;
         right: unset;
         right: -99999px;
@@ -224,15 +224,35 @@ ion-picker-column-internal {
   display: none;
 }
 
-:host(.datetime-readonly),
 :host(.datetime-disabled) {
   pointer-events: none;
 }
-
-:host(.datetime-disabled) {
+:host(.datetime-disabled) .calendar-days-of-week,
+:host(.datetime-disabled) .datetime-time {
   opacity: 0.4;
 }
 
+:host(.datetime-readonly) {
+  pointer-events: none;
+  /**
+   * Allow user to navigate months
+   * while in readonly mode
+   */
+  /**
+   * Disabled buttons should have full opacity
+   * in readonly mode
+   */
+}
+:host(.datetime-readonly) .calendar-action-buttons,
+:host(.datetime-readonly) .calendar-body,
+:host(.datetime-readonly) .datetime-year {
+  pointer-events: initial;
+}
+:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),
+:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled] {
+  opacity: 1;
+}
+
 /**
  * Title should not wrap
  * to the next line and should

package/dist/collection/components/datetime/datetime.js

@@ -94,6 +94,13 @@ export class Datetime {
       this.workingParts = Object.assign({}, parts);
     };
     this.setActiveParts = (parts, removeDate = false) => {
+      /** if the datetime component is in readonly mode,
+       * allow browsing of the calendar without changing
+       * the set value
+       */
+      if (this.readonly) {
+        return;
+      }
       const { multiple, minParts, maxParts, activeParts } = this;
       /**
        * When setting the active parts, it is possible
@@ -914,7 +921,13 @@ export class Datetime {
    * are rendered independently of presentation.
    */
   renderFooter() {
-    const { showDefaultButtons, showClearButton } = this;
+    const { disabled, readonly, showDefaultButtons, showClearButton } = this;
+    /**
+     * The cancel, clear, and confirm buttons
+     * should not be interactive if the datetime
+     * is disabled or readonly.
+     */
+    const isButtonDisabled = disabled || readonly;
     const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
     if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
       return;
@@ -933,7 +946,7 @@ export class Datetime {
     return (h("div", { class: "datetime-footer" }, h("div", { class: "datetime-buttons" }, h("div", { class: {
         ['datetime-action-buttons']: true,
         ['has-clear-button']: this.showClearButton,
-      } }, h("slot", { name: "buttons" }, h("ion-buttons", null, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true) }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick() }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true) }, this.doneText)))))))));
+      } }, h("slot", { name: "buttons" }, h("ion-buttons", null, showDefaultButtons && (h("ion-button", { id: "cancel-button", color: this.color, onClick: () => this.cancel(true), disabled: isButtonDisabled }, this.cancelText)), h("div", { class: "datetime-action-buttons-container" }, showClearButton && (h("ion-button", { id: "clear-button", color: this.color, onClick: () => clearButtonClick(), disabled: isButtonDisabled }, this.clearText)), showDefaultButtons && (h("ion-button", { id: "confirm-button", color: this.color, onClick: () => this.confirm(true), disabled: isButtonDisabled }, this.doneText)))))))));
   }
   /**
    * Wheel picker render methods
@@ -1224,13 +1237,14 @@ export class Datetime {
    * Grid Render Methods
    */
   renderCalendarHeader(mode) {
+    const { disabled } = this;
     const expandedIcon = mode === 'ios' ? chevronDown : caretUpSharp;
     const collapsedIcon = mode === 'ios' ? chevronForward : caretDownSharp;
-    const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
-    const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts);
+    const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
+    const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
     // don't use the inheritAttributes util because it removes dir from the host, and we still need that
     const hostDir = this.el.getAttribute('dir') || undefined;
-    return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", onClick: () => {
+    return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("ion-item", { part: "month-year-button", ref: (el) => (this.monthYearToggleItemRef = el), button: true, "aria-label": "Show year picker", detail: false, lines: "none", disabled: disabled, onClick: () => {
         var _a;
         this.toggleMonthAndYearView();
         /**
@@ -1254,20 +1268,23 @@ export class Datetime {
     }))));
   }
   renderMonth(month, year) {
+    const { disabled, readonly } = this;
     const yearAllowed = this.parsedYearValues === undefined || this.parsedYearValues.includes(year);
     const monthAllowed = this.parsedMonthValues === undefined || this.parsedMonthValues.includes(month);
     const isCalMonthDisabled = !yearAllowed || !monthAllowed;
-    const swipeDisabled = isMonthDisabled({
-      month,
-      year,
-      day: null,
-    }, {
-      // The day is not used when checking if a month is disabled.
-      // Users should be able to access the min or max month, even if the
-      // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
-      minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
-      maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
-    });
+    const isDatetimeDisabled = disabled || readonly;
+    const swipeDisabled = disabled ||
+      isMonthDisabled({
+        month,
+        year,
+        day: null,
+      }, {
+        // The day is not used when checking if a month is disabled.
+        // Users should be able to access the min or max month, even if the
+        // min/max date is out of bounds (e.g. min is set to Feb 15, Feb should not be disabled).
+        minParts: Object.assign(Object.assign({}, this.minParts), { day: null }),
+        maxParts: Object.assign(Object.assign({}, this.maxParts), { day: null }),
+      });
     // The working month should never have swipe disabled.
     // Otherwise the CSS scroll snap will not work and the user
     // can free-scroll the calendar.
@@ -1282,9 +1299,9 @@ export class Datetime {
       const { el, highlightedDates, isDateEnabled, multiple } = this;
       const referenceParts = { month, day, year };
       const isCalendarPadding = day === null;
-      const { isActive, isToday, ariaLabel, ariaSelected, disabled, text } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
+      const { isActive, isToday, ariaLabel, ariaSelected, disabled: isDayDisabled, text, } = getCalendarDayState(this.locale, referenceParts, this.activeParts, this.todayParts, this.minParts, this.maxParts, this.parsedDayValues);
       const dateIsoString = convertDataToISO(referenceParts);
-      let isCalDayDisabled = isCalMonthDisabled || disabled;
+      let isCalDayDisabled = isCalMonthDisabled || isDayDisabled;
       if (!isCalDayDisabled && isDateEnabled !== undefined) {
         try {
           /**
@@ -1298,6 +1315,13 @@ export class Datetime {
           printIonError('Exception thrown from provided `isDateEnabled` function. Please check your function and try again.', el, e);
         }
       }
+      /**
+       * Some days are constrained through max & min or allowed dates
+       * and also disabled because the component is readonly or disabled.
+       * These need to be displayed differently.
+       */
+      const isCalDayConstrained = isCalDayDisabled && isDatetimeDisabled;
+      const isButtonDisabled = isCalDayDisabled || isDatetimeDisabled;
       let dateStyle = undefined;
       /**
        * Custom highlight styles should not override the style for selected dates,
@@ -1324,10 +1348,11 @@ export class Datetime {
             el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
             el.style.setProperty('background-color', `${dateStyle ? dateStyle.backgroundColor : ''}`, 'important');
           }
-        }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isCalDayDisabled, class: {
+        }, tabindex: "-1", "data-day": day, "data-month": month, "data-year": year, "data-index": index, "data-day-of-week": dayOfWeek, disabled: isButtonDisabled, class: {
           'calendar-day-padding': isCalendarPadding,
           'calendar-day': true,
           'calendar-day-active': isActive,
+          'calendar-day-constrained': isCalDayConstrained,
           'calendar-day-today': isToday,
         }, part: dateParts, "aria-hidden": isCalendarPadding ? 'true' : null, "aria-selected": ariaSelected, "aria-label": ariaLabel, onClick: () => {
           if (isCalendarPadding) {
@@ -1369,7 +1394,7 @@ export class Datetime {
     return h("slot", { name: "time-label" }, "Time");
   }
   renderTimeOverlay() {
-    const { hourCycle, isTimePopoverOpen, locale } = this;
+    const { disabled, hourCycle, isTimePopoverOpen, locale } = this;
     const computedHourCycle = getHourCycle(locale, hourCycle);
     const activePart = this.getActivePartsWithFallback();
     return [
@@ -1377,7 +1402,7 @@ export class Datetime {
       h("button", { class: {
           'time-body': true,
           'time-body-active': isTimePopoverOpen,
-        }, part: `time-button${isTimePopoverOpen ? ' active' : ''}`, "aria-expanded": "false", "aria-haspopup": "true", onClick: async (ev) => {
+        }, part: `time-button${isTimePopoverOpen ? ' active' : ''}`, "aria-expanded": "false", "aria-haspopup": "true", disabled: disabled, onClick: async (ev) => {
           const { popoverRef } = this;
           if (popoverRef) {
             this.isTimePopoverOpen = true;
@@ -1617,7 +1642,7 @@ export class Datetime {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the datetime appears normal but is not interactive."
+          "text": "If `true`, the datetime appears normal but the selected date cannot be changed."
         },
         "attribute": "readonly",
         "reflect": false,

package/dist/collection/components/datetime/datetime.md.css

@@ -196,7 +196,7 @@ ion-picker-column-internal {
       right: -99999px;
     }
     @supports selector(:dir(rtl)) {
-      :host(.show-month-and-year) .calendar-next-prev:dir(rtl), :host(.show-month-and-year) .calendar-days-of-week:dir(rtl), :host(.show-month-and-year) .calendar-body:dir(rtl), :host(.show-month-and-year) .datetime-time:dir(rtl) {
+      :host(.show-month-and-year:dir(rtl)) .calendar-next-prev, :host(.show-month-and-year:dir(rtl)) .calendar-days-of-week, :host(.show-month-and-year:dir(rtl)) .calendar-body, :host(.show-month-and-year:dir(rtl)) .datetime-time {
         left: unset;
         right: unset;
         right: -99999px;
@@ -224,15 +224,35 @@ ion-picker-column-internal {
   display: none;
 }
 
-:host(.datetime-readonly),
 :host(.datetime-disabled) {
   pointer-events: none;
 }
-
-:host(.datetime-disabled) {
+:host(.datetime-disabled) .calendar-days-of-week,
+:host(.datetime-disabled) .datetime-time {
   opacity: 0.4;
 }
 
+:host(.datetime-readonly) {
+  pointer-events: none;
+  /**
+   * Allow user to navigate months
+   * while in readonly mode
+   */
+  /**
+   * Disabled buttons should have full opacity
+   * in readonly mode
+   */
+}
+:host(.datetime-readonly) .calendar-action-buttons,
+:host(.datetime-readonly) .calendar-body,
+:host(.datetime-readonly) .datetime-year {
+  pointer-events: initial;
+}
+:host(.datetime-readonly) .calendar-day[disabled]:not(.calendar-day-constrained),
+:host(.datetime-readonly) .datetime-action-buttons ion-button[disabled] {
+  opacity: 1;
+}
+
 /**
  * Title should not wrap
  * to the next line and should
@@ -638,8 +658,4 @@ ion-picker-column-internal {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-}
-
-:host .datetime-view-buttons ion-button {
-  color: var(--ion-color-step-800, #333333);
 }

package/dist/collection/components/datetime/test/a11y/datetime.e2e.js

@@ -26,3 +26,69 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: a11y'), () => {
+    test('datetime should be keyboard navigable', async ({ page, browserName }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-22T16:30:00"></ion-datetime>
+    `, config);
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+      const datetime = page.locator('ion-datetime');
+      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
+      const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
+      await page.keyboard.press(tabKey);
+      await expect(monthYearButton).toBeFocused();
+      await page.keyboard.press(tabKey);
+      await expect(prevButton).toBeFocused();
+      await page.keyboard.press(tabKey);
+      await expect(nextButton).toBeFocused();
+      // check value before & after selecting via keyboard
+      const initialValue = await datetime.evaluate((el) => el.value);
+      expect(initialValue).toBe('2022-02-22T16:30:00');
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+      await page.keyboard.press('ArrowLeft');
+      await page.waitForChanges();
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      const newValue = await datetime.evaluate((el) => el.value);
+      expect(newValue).not.toBe('2022-02-22T16:30:00');
+    });
+    test('buttons should be keyboard navigable', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true"></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const clearButton = page.locator('#clear-button button');
+      const selectedDay = page.locator('.calendar-day-active');
+      await expect(selectedDay).toHaveText('22');
+      await clearButton.focus();
+      await page.waitForChanges();
+      await expect(clearButton).toBeFocused();
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+      await expect(selectedDay).toHaveCount(0);
+    });
+    test('should navigate through months via right arrow key', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-datetime value="2022-02-28"></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const calendarBody = page.locator('.calendar-body');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      await calendarBody.focus();
+      await page.waitForChanges();
+      await page.keyboard.press('ArrowRight');
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('March 2022');
+    });
+  });
+});

package/dist/collection/components/datetime/test/disabled/datetime.e2e.js

@@ -0,0 +1,68 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('datetime: disabled'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-05T00:00:00" min="2022-01-01T00:00:00" max="2022-02-20T23:59:59" day-values="5,6,10,11,15,16,20" show-default-buttons disabled></ion-datetime>
+    `, config);
+      const datetime = page.locator('ion-datetime');
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-disabled`));
+    });
+    test('date should be disabled', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
+      await expect(febFirstButton).toBeDisabled();
+    });
+    test('month-year button should be disabled', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      await expect(calendarMonthYear.locator('button')).toBeDisabled();
+    });
+    test('next and prev buttons should be disabled', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `, config);
+      const prevMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:first-of-type button');
+      const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:last-of-type button');
+      await expect(prevMonthButton).toBeDisabled();
+      await expect(nextMonthButton).toBeDisabled();
+    });
+    test('clear button should be disabled', async ({ page }) => {
+      await page.setContent(`
+
+        <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" disabled></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const clearButton = page.locator('#clear-button button');
+      await expect(clearButton).toBeDisabled();
+    });
+    test('should not navigate through months via right arrow key', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime value="2022-02-28" disabled></ion-datetime>
+    `, config);
+      await page.waitForSelector('.datetime-ready');
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+      const calendarBody = page.locator('.calendar-body');
+      await expect(calendarMonthYear).toHaveText('February 2022');
+      await calendarBody.focus();
+      await page.waitForChanges();
+      await page.keyboard.press('ArrowRight');
+      await page.waitForChanges();
+      await expect(calendarMonthYear).toHaveText('February 2022');
+    });
+  });
+});