@ionic/core 7.5.6-dev.11700169088.140f3e6a → 7.5.6-dev.11700492285.1581ed02

package/dist/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "components/accordion/accordion.js",
     "components/accordion-group/accordion-group.js",
+    "components/item/item.js",
     "components/action-sheet/action-sheet.js",
     "components/alert/alert.js",
     "components/app/app.js",
@@ -34,14 +35,15 @@
     "components/infinite-scroll/infinite-scroll.js",
     "components/infinite-scroll-content/infinite-scroll-content.js",
     "components/input/input.js",
-    "components/item/item.js",
+    "components/list/list.js",
+    "components/radio-group/radio-group.js",
+    "components/radio/radio.js",
     "components/item-divider/item-divider.js",
     "components/item-group/item-group.js",
     "components/item-option/item-option.js",
     "components/item-options/item-options.js",
     "components/item-sliding/item-sliding.js",
     "components/label/label.js",
-    "components/list/list.js",
     "components/list-header/list-header.js",
     "components/loading/loading.js",
     "components/menu/menu.js",
@@ -57,8 +59,6 @@
     "components/picker-internal/picker-internal.js",
     "components/popover/popover.js",
     "components/progress-bar/progress-bar.js",
-    "components/radio/radio.js",
-    "components/radio-group/radio-group.js",
     "components/range/range.js",
     "components/refresher/refresher.js",
     "components/refresher-content/refresher-content.js",

package/dist/collection/components/accordion/test/accordion.spec.js

@@ -0,0 +1,195 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { AccordionGroup } from "../../accordion-group/accordion-group";
+import { Item } from "../../item/item";
+import { Accordion } from "../accordion";
+it('should open correct accordions when accordion group value is set', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group animated="false">
+        <ion-accordion value="first">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordions = accordionGroup.querySelectorAll('ion-accordion');
+  accordions.forEach((accordion) => {
+    expect(accordion.classList.contains('accordion-collapsed')).toEqual(true);
+  });
+  accordionGroup.value = 'second';
+  await page.waitForChanges();
+  expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(true);
+  expect(accordions[1].classList.contains('accordion-collapsed')).toEqual(false);
+  expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
+});
+it('should open correct accordions when accordion value is set', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group animated="false" value="first">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordions = accordionGroup.querySelectorAll('ion-accordion');
+  accordions.forEach((accordion) => {
+    expect(accordion.classList.contains('accordion-collapsed')).toEqual(true);
+  });
+  accordions[0].value = 'first';
+  await page.waitForChanges();
+  expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
+  expect(accordions[1].classList.contains('accordion-collapsed')).toEqual(true);
+  expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
+});
+it('should open more than one accordion when multiple="true"', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group multiple="true" animated="false">
+        <ion-accordion value="first">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordions = accordionGroup.querySelectorAll('ion-accordion');
+  accordions.forEach((accordion) => {
+    expect(accordion.classList.contains('accordion-collapsed')).toEqual(true);
+  });
+  accordionGroup.value = ['first', 'second'];
+  await page.waitForChanges();
+  expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
+  expect(accordions[1].classList.contains('accordion-collapsed')).toEqual(false);
+  expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
+});
+it('should render with accordion open', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group value="first" animated="false">
+        <ion-accordion value="first">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordions = accordionGroup.querySelectorAll('ion-accordion');
+  expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
+  expect(accordions[1].classList.contains('accordion-collapsed')).toEqual(true);
+  expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
+});
+it('should accept a string when multiple="true"', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group multiple="true" value="first" animated="false">
+        <ion-accordion value="first">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordions = accordionGroup.querySelectorAll('ion-accordion');
+  expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
+  expect(accordions[1].classList.contains('accordion-collapsed')).toEqual(true);
+  expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
+});
+it('should set default values if not provided', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordion = accordionGroup.querySelector('ion-accordion');
+  /**
+   * ID is determined via an auto incrementing counter
+   * so do not hard code ion-accordion-0 as it might
+   * change depending on how many accordions
+   * are used in these tests.
+   */
+  expect(accordion.value).toContain('ion-accordion-');
+  accordionGroup.value = accordion.value;
+  await page.waitForChanges();
+  expect(accordion.classList.contains('accordion-collapsed')).toEqual(false);
+});
+// Verifies fix for https://github.com/ionic-team/ionic-framework/issues/27047
+it('should not have animated class when animated="false"', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordion = accordionGroup.querySelector('ion-accordion');
+  expect(accordionGroup.animated).toEqual(false);
+  expect(accordion.classList.contains('accordion-animated')).toEqual(false);
+});

package/dist/collection/components/action-sheet/test/action-sheet-id.spec.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { ActionSheet } from "../action-sheet";
+it('action sheet should be assigned an incrementing id', async () => {
+  const page = await newSpecPage({
+    components: [ActionSheet],
+    html: `<ion-action-sheet is-open="true"></ion-action-sheet>`,
+  });
+  let actionSheet;
+  actionSheet = page.body.querySelector('ion-action-sheet');
+  expect(actionSheet).not.toBe(null);
+  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-1');
+  // Remove the action sheet from the DOM
+  actionSheet.remove();
+  await page.waitForChanges();
+  // Create a new action sheet to verify the id is incremented
+  actionSheet = document.createElement('ion-action-sheet');
+  actionSheet.isOpen = true;
+  page.body.appendChild(actionSheet);
+  await page.waitForChanges();
+  actionSheet = page.body.querySelector('ion-action-sheet');
+  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+  // Presenting the same action sheet again should reuse the existing id
+  actionSheet.isOpen = false;
+  await page.waitForChanges();
+  actionSheet.isOpen = true;
+  await page.waitForChanges();
+  actionSheet = page.body.querySelector('ion-action-sheet');
+  expect(actionSheet.getAttribute('id')).toBe('ion-overlay-2');
+});

package/dist/collection/components/action-sheet/test/basic/action-sheet.spec.js

@@ -0,0 +1,18 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { ActionSheet } from "../../action-sheet";
+describe('action sheet: htmlAttributes inheritance', () => {
+  it('should correctly inherit attributes on host', async () => {
+    const page = await newSpecPage({
+      components: [ActionSheet],
+      template: () => (h("ion-action-sheet", { htmlAttributes: {
+          'data-testid': 'basic-action-sheet',
+        }, overlayIndex: 1 })),
+    });
+    const actionSheet = page.body.querySelector('ion-action-sheet');
+    await expect(actionSheet.getAttribute('data-testid')).toBe('basic-action-sheet');
+  });
+});

package/dist/collection/components/alert/test/alert-id.spec.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Alert } from "../alert";
+it('alert should be assigned an incrementing id', async () => {
+  const page = await newSpecPage({
+    components: [Alert],
+    html: `<ion-alert is-open="true"></ion-alert>`,
+  });
+  let alert;
+  alert = page.body.querySelector('ion-alert');
+  expect(alert).not.toBe(null);
+  expect(alert.getAttribute('id')).toBe('ion-overlay-1');
+  // Remove the alert from the DOM
+  alert.remove();
+  await page.waitForChanges();
+  // Create a new alert to verify the id is incremented
+  alert = document.createElement('ion-alert');
+  alert.isOpen = true;
+  page.body.appendChild(alert);
+  await page.waitForChanges();
+  alert = page.body.querySelector('ion-alert');
+  expect(alert.getAttribute('id')).toBe('ion-overlay-2');
+  // Presenting the same alert again should reuse the existing id
+  alert.isOpen = false;
+  await page.waitForChanges();
+  alert.isOpen = true;
+  await page.waitForChanges();
+  alert = page.body.querySelector('ion-alert');
+  expect(alert.getAttribute('id')).toBe('ion-overlay-2');
+});

package/dist/collection/components/alert/test/alert.spec.js

@@ -0,0 +1,37 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { config } from "../../../global/config";
+import { Alert } from "../alert";
+describe('alert: custom html', () => {
+  it('should not allow for custom html by default', async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
+    });
+    const content = page.body.querySelector('.alert-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).toBe(null);
+  });
+  it('should allow for custom html', async () => {
+    config.reset({ innerHTMLTemplatesEnabled: true });
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
+    });
+    const content = page.body.querySelector('.alert-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+  it('should not allow for custom html', async () => {
+    config.reset({ innerHTMLTemplatesEnabled: false });
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
+    });
+    const content = page.body.querySelector('.alert-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).toBe(null);
+  });
+});

package/dist/collection/components/back-button/test/back-button.spec.js

@@ -0,0 +1,86 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { setMode } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { arrowBackSharp, chevronBack } from "ionicons/icons";
+import { config } from "../../../global/config";
+import { BackButton } from "../back-button";
+describe('back button', () => {
+  beforeEach(() => {
+    config.reset({});
+  });
+  const newBackButton = async (mode = 'md') => {
+    setMode(() => mode);
+    const { rootInstance } = await newSpecPage({
+      components: [BackButton],
+      html: `<ion-back-button></ion-back-button>`,
+    });
+    return rootInstance;
+  };
+  describe('backButtonIcon', () => {
+    it('set custom icon on the instance, override config', async () => {
+      const bb = await newBackButton();
+      bb.icon = 'custom-icon-instance';
+      config.reset({
+        backButtonIcon: 'custom-icon-config',
+      });
+      expect(bb.backButtonIcon).toBe('custom-icon-instance');
+    });
+    it('set custom icon in the config', async () => {
+      const bb = await newBackButton();
+      config.reset({
+        backButtonIcon: 'custom-icon-config',
+      });
+      expect(bb.backButtonIcon).toBe('custom-icon-config');
+    });
+    it('set custom icon on the instance', async () => {
+      const bb = await newBackButton();
+      bb.icon = 'custom-icon-instance';
+      expect(bb.backButtonIcon).toBe('custom-icon-instance');
+    });
+    it('default icon for ios mode', async () => {
+      const bb = await newBackButton('ios');
+      expect(bb.backButtonIcon).toBe(chevronBack);
+    });
+    it('default icon', async () => {
+      const bb = await newBackButton();
+      expect(bb.backButtonIcon).toBe(arrowBackSharp);
+    });
+  });
+  describe('backButtonText', () => {
+    it('default text for ios mode', async () => {
+      const bb = await newBackButton('ios');
+      expect(bb.backButtonText).toBe('Back');
+    });
+    it('default text', async () => {
+      const bb = await newBackButton();
+      expect(bb.backButtonText).toBe(null);
+    });
+  });
+  describe('backButtonDefaultHref', () => {
+    it('set custom defaultHref in the config', async () => {
+      config.reset({
+        backButtonDefaultHref: 'custom-default-href-config',
+      });
+      const bb = await newBackButton();
+      expect(bb.defaultHref).toBe('custom-default-href-config');
+    });
+    it('set custom defaultHref on the instance', async () => {
+      const bb = await newBackButton();
+      bb.defaultHref = 'custom-default-href';
+      expect(bb.defaultHref).toBe('custom-default-href');
+    });
+    it('set custom defaultHref on the instance, override config', async () => {
+      const bb = await newBackButton();
+      bb.defaultHref = 'custom-default-href';
+      config.reset({
+        backButtonDefaultHref: 'custom-default-href-config',
+      });
+      expect(bb.defaultHref).toBe('custom-default-href');
+      const bb2 = await newBackButton();
+      bb2.defaultHref = 'custom-default-href-second';
+      expect(bb2.defaultHref).toBe('custom-default-href-second');
+    });
+  });
+});

package/dist/collection/components/breadcrumb/test/aria.spec.js

@@ -0,0 +1,22 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Breadcrumb } from "../breadcrumb";
+describe('breadcrumb: collapsed indicator', () => {
+  it('should have an aria-label', async () => {
+    const page = await newSpecPage({
+      components: [Breadcrumb],
+      /**
+       * `showCollapsedIndicator` is an internal API used by `ion-breadcrumbs`.
+       * This test makes use of it to render the collapsed indicator.
+       */
+      html: `<ion-breadcrumb show-collapsed-indicator="true">Text</ion-breadcrumb>`,
+    });
+    const collapsedIndicator = page.body
+      .querySelector('ion-breadcrumb')
+      .shadowRoot.querySelector('.breadcrumbs-collapsed-indicator');
+    const ariaLabel = collapsedIndicator.getAttribute('aria-label');
+    expect(ariaLabel).toEqual('Show more breadcrumbs');
+  });
+});

package/dist/collection/components/breadcrumbs/test/breadcrumbs.spec.js

@@ -0,0 +1,58 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Breadcrumb } from "../../breadcrumb/breadcrumb";
+import { Breadcrumbs } from "../breadcrumbs";
+it('should correctly provide the collapsed breadcrumbs in the event payload', async () => {
+  const page = await newSpecPage({
+    components: [Breadcrumbs, Breadcrumb],
+    html: `
+      <ion-breadcrumbs max-items="2" items-before-collapse="1" items-after-collapse="1">
+        <ion-breadcrumb>First</ion-breadcrumb>
+        <ion-breadcrumb>Second</ion-breadcrumb>
+        <ion-breadcrumb>Third</ion-breadcrumb>
+        <ion-breadcrumb>Fourth</ion-breadcrumb>
+        <ion-breadcrumb>Fifth</ion-breadcrumb>
+      </ion-breadcrumbs>
+    `,
+  });
+  const onCollapsedClick = jest.fn((ev) => ev);
+  const breadcrumbs = page.body.querySelector('ion-breadcrumbs');
+  const breadcrumb = page.body.querySelectorAll('ion-breadcrumb');
+  breadcrumbs.addEventListener('ionCollapsedClick', onCollapsedClick);
+  const event = new CustomEvent('collapsedClick');
+  breadcrumbs.dispatchEvent(event);
+  expect(onCollapsedClick).toHaveBeenCalledTimes(1);
+  const collapsedBreadcrumbs = onCollapsedClick.mock.calls[0][0].detail.collapsedBreadcrumbs;
+  expect(collapsedBreadcrumbs.length).toEqual(3);
+  expect(collapsedBreadcrumbs[0]).toBe(breadcrumb[1]);
+  expect(collapsedBreadcrumbs[1]).toBe(breadcrumb[2]);
+  expect(collapsedBreadcrumbs[2]).toBe(breadcrumb[3]);
+});
+it('should exclude the separator from narrators', async () => {
+  const page = await newSpecPage({
+    components: [Breadcrumbs, Breadcrumb],
+    html: `
+      <ion-breadcrumbs>
+        <ion-breadcrumb>First</ion-breadcrumb>
+        <ion-breadcrumb>Second</ion-breadcrumb>
+      </ion-breadcrumbs>
+    `,
+  });
+  const firstBreadcrumb = page.body.querySelector('ion-breadcrumb:first-of-type');
+  const separator = firstBreadcrumb.shadowRoot.querySelector('[part="separator"]');
+  expect(separator.getAttribute('aria-hidden')).toBe('true');
+});
+it('should have color attribute', async () => {
+  const page = await newSpecPage({
+    components: [Breadcrumb, Breadcrumbs],
+    html: `
+      <ion-breadcrumbs color="danger">
+        <ion-breadcrumb>First</ion-breadcrumb>
+      </ion-breadcrumbs>
+    `,
+  });
+  const breadcrumbs = page.body.querySelector('ion-breadcrumbs');
+  expect(breadcrumbs.hasAttribute('color')).toBe(true);
+});

package/dist/collection/components/button/test/form-reference/button.spec.js

@@ -0,0 +1,26 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Button } from "../../button";
+describe('Button: Hidden Form Button', () => {
+  it('should not add multiple buttons to the form', async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `
+        <form id="my-form"></form>
+        <ion-button form="my-form" type="submit">Submit</ion-button>
+      `,
+    });
+    const getButtons = () => {
+      return page.body.querySelectorAll('form button');
+    };
+    const button = page.body.querySelector('ion-button');
+    await page.waitForChanges();
+    expect(getButtons().length).toEqual(1);
+    // Re-render the component
+    button.color = 'danger';
+    await page.waitForChanges();
+    expect(getButtons().length).toEqual(1);
+  });
+});

package/dist/collection/components/card/test/aria.spec.js

@@ -0,0 +1,16 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Card } from "../card";
+describe('card: button', () => {
+  it('should reflect aria-label to button', async () => {
+    const page = await newSpecPage({
+      components: [Card],
+      html: `<ion-card button="true" aria-label="Test"></ion-card>`,
+    });
+    const button = page.body.querySelector('ion-card').shadowRoot.querySelector('button');
+    const ariaLabel = button.getAttribute('aria-label');
+    expect(ariaLabel).toEqual('Test');
+  });
+});

package/dist/collection/components/checkbox/test/checkbox.spec.js

@@ -0,0 +1,20 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Checkbox } from "../checkbox";
+describe('ion-checkbox: disabled', () => {
+  it('clicking disabled checkbox should not toggle checked state', async () => {
+    const page = await newSpecPage({
+      components: [Checkbox],
+      html: `
+        <ion-checkbox disabled="true">Checkbox</ion-checkbox>
+      `,
+    });
+    const checkbox = page.body.querySelector('ion-checkbox');
+    expect(checkbox.checked).toBe(false);
+    checkbox.click();
+    await page.waitForChanges();
+    expect(checkbox.checked).toBe(false);
+  });
+});

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

@@ -0,0 +1,43 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Item } from "../../../item/item";
+import { Datetime } from "../../datetime";
+describe('datetime', () => {
+  beforeEach(() => {
+    const mockIntersectionObserver = jest.fn();
+    mockIntersectionObserver.mockReturnValue({
+      observe: () => null,
+      unobserve: () => null,
+      disconnect: () => null,
+    });
+    global.IntersectionObserver = mockIntersectionObserver;
+  });
+  describe('month/year toggle', () => {
+    let page;
+    beforeEach(async () => {
+      page = await newSpecPage({
+        components: [Datetime, Item],
+        html: `<ion-datetime></ion-datetime>`,
+      });
+    });
+    it('should have aria-label "Show year picker" when collapsed', async () => {
+      const datetime = page.body.querySelector('ion-datetime');
+      const item = datetime.shadowRoot.querySelector('.calendar-month-year ion-item');
+      const monthYearToggleBtn = item.shadowRoot.querySelector('button');
+      const ariaLabel = monthYearToggleBtn.getAttribute('aria-label');
+      expect(ariaLabel).toContain('Show year picker');
+    });
+    it('should have aria-label "Hide year picker" when expanded', async () => {
+      const datetime = page.body.querySelector('ion-datetime');
+      const item = datetime.shadowRoot.querySelector('.calendar-month-year ion-item');
+      item.click();
+      await page.waitForChanges();
+      const itemAfter = datetime.shadowRoot.querySelector('.calendar-month-year ion-item');
+      const monthYearToggleBtn = itemAfter.shadowRoot.querySelector('button');
+      const ariaLabel = monthYearToggleBtn.getAttribute('aria-label');
+      expect(ariaLabel).toContain('Hide year picker');
+    });
+  });
+});