@duetds/components 8.0.6 → 8.1.0

package/lib/collection/components/duet-date-picker/duet-date-picker.e2e.js

@@ -4,73 +4,73 @@
 import { createPage } from "../../utils/test-utils";
 import i18n from "./date-i18n";
 async function getFocusedElement(page) {
-  return page.evaluateHandle(() => document.activeElement);
+    return page.evaluateHandle(() => document.activeElement);
 }
 async function getChooseDateButton(page) {
-  return page.find(".duet-date-button");
+    return page.find(".duet-date-button");
 }
 async function getInput(page) {
-  return page.find("duet-input");
+    return page.find("duet-input");
 }
 async function getDialog(page) {
-  return page.find(`[role="dialog"]`);
+    return page.find(`[role="dialog"]`);
 }
 async function getGrid(page) {
-  const dialog = await getDialog(page);
-  return dialog.find("table");
+    const dialog = await getDialog(page);
+    return dialog.find("table");
 }
 async function getPicker(page) {
-  return page.find("duet-date-picker");
+    return page.find("duet-date-picker");
 }
 async function setMonthDropdown(page, month) {
-  await page.select(".duet-date-month-select", month);
-  await page.waitForChanges();
+    await page.select(".duet-date-month-select", month);
+    await page.waitForChanges();
 }
 async function setYearDropdown(page, year) {
-  await page.select(".duet-date-year-select", year);
-  await page.waitForChanges();
+    await page.select(".duet-date-year-select", year);
+    await page.waitForChanges();
 }
 async function getPrevMonthButton(page) {
-  const dialog = await getDialog(page);
-  return dialog.find(`.duet-date-dialog-prev >>> button`);
+    const dialog = await getDialog(page);
+    return dialog.find(`.duet-date-dialog-prev >>> button`);
 }
 async function getNextMonthButton(page) {
-  const dialog = await getDialog(page);
-  return dialog.find(`.duet-date-dialog-next >>> button`);
+    const dialog = await getDialog(page);
+    return dialog.find(`.duet-date-dialog-next >>> button`);
 }
 async function findByText(context, selector, text) {
-  const elements = await context.findAll(selector);
-  return elements.find(element => element.innerText.includes(text));
+    const elements = await context.findAll(selector);
+    return elements.find(element => element.innerText.includes(text));
 }
 async function clickDay(page, date) {
-  const grid = await getGrid(page);
-  const button = await findByText(grid, "button", date);
-  await button.click();
-  await page.waitForChanges();
+    const grid = await getGrid(page);
+    const button = await findByText(grid, "button", date);
+    await button.click();
+    await page.waitForChanges();
 }
 async function openCalendar(page) {
-  const button = await getChooseDateButton(page);
-  await button.click();
-  await page.waitForChanges();
-  const dialog = await getDialog(page);
-  await dialog.waitForVisible();
+    const button = await getChooseDateButton(page);
+    await button.click();
+    await page.waitForChanges();
+    const dialog = await getDialog(page);
+    await dialog.waitForVisible();
 }
 async function clickOutside(page) {
-  const input = await getInput(page);
-  await input.click();
-  await page.waitForChanges();
-  const dialog = await getDialog(page);
-  await dialog.waitForNotVisible();
+    const input = await getInput(page);
+    await input.click();
+    await page.waitForChanges();
+    const dialog = await getDialog(page);
+    await dialog.waitForNotVisible();
 }
 async function isCalendarOpen(page) {
-  const dialog = await getDialog(page);
-  return dialog.isVisible();
+    const dialog = await getDialog(page);
+    return dialog.isVisible();
 }
 const generatePage = (props) => {
-  const attrs = Object.entries(Object.assign({ label: "Valitse paiva", expand: true }, props))
-    .map(([attr, value]) => `${attr}="${value}"`)
-    .join(" ");
-  return createPage(`
+    const attrs = Object.entries(Object.assign({ label: "Valitse paiva", expand: true }, props))
+        .map(([attr, value]) => `${attr}="${value}"`)
+        .join(" ");
+    return createPage(`
     <body style="min-height: 400px">
       <duet-date-picker ${attrs}></duet-date-picker>
     </body>
@@ -78,572 +78,572 @@ const generatePage = (props) => {
 };
 const ANIMATION_DELAY = 600;
 describe("duet-date-picker", () => {
-  it("should render a date picker", async () => {
-    const page = await createPage(`<duet-date-picker value="2020-06-16"></duet-date-picker>`);
-    const component = await getPicker(page);
-    expect(component).not.toBeNull();
-  });
-  describe("user input", () => {
-    it("does not reformat input if date doesn't have leading zeroes", async () => {
-      const page = await generatePage();
-      const picker = await getPicker(page);
-      const input = await page.find("duet-input input");
-      const spy = await picker.spyOnEvent("duetChange");
-      await input.type("1.2.2021", { delay: 50 });
-      await page.waitForChanges();
-      // the input's value should not get formatted with leading zeroes
-      expect(await input.getProperty("value")).toBe("1.2.2021");
-      // but we should still emit correctly formatted ISO dates
-      expect(await picker.getProperty("value")).toBe("2021-02-01");
-      expect(spy).toHaveReceivedEventTimes(1);
-      expect(spy.lastEvent.detail.value).toBe("2021-02-01");
-    });
-    it("allows input to be cleared by setting value to empty string", async () => {
-      const page = await generatePage();
-      const picker = await getPicker(page);
-      const input = await page.find("duet-input input");
-      await input.type("1.2.2021", { delay: 50 });
-      await page.waitForChanges();
-      picker.setProperty("value", "");
-      await page.waitForChanges();
-      expect(await input.getProperty("value")).toBe("");
-    });
-    it("supports dashes and slashes as separators", async () => {
-      const page = await generatePage();
-      const picker = await getPicker(page);
-      const input = await page.find("duet-input input");
-      const spy = await picker.spyOnEvent("duetChange");
-      // slashes
-      await input.type("1/1/2021", { delay: 50 });
-      await page.waitForChanges();
-      expect(await picker.getProperty("value")).toBe("2021-01-01");
-      expect(spy.lastEvent.detail.value).toBe("2021-01-01");
-      // clear input
-      picker.setProperty("value", "");
-      await page.waitForChanges();
-      // dashes
-      await input.type("2-1-2021", { delay: 50 });
-      await page.waitForChanges();
-      expect(await picker.getProperty("value")).toBe("2021-01-02");
-      expect(spy.lastEvent.detail.value).toBe("2021-01-02");
-    });
-  });
-  describe("mouse interaction", () => {
-    it("should open on button click", async () => {
-      const page = await generatePage();
-      expect(await isCalendarOpen(page)).toBe(false);
-      await openCalendar(page);
-      expect(await isCalendarOpen(page)).toBe(true);
-    });
-    it("should close on click outside", async () => {
-      const page = await generatePage();
-      await openCalendar(page);
-      expect(await isCalendarOpen(page)).toBe(true);
-      await clickOutside(page);
-      expect(await isCalendarOpen(page)).toBe(false);
-    });
-    it("supports selecting a date in the future", async () => {
-      const page = await generatePage({ value: "2020-01-01" });
-      await openCalendar(page);
-      const picker = await getPicker(page);
-      const nextMonth = await getNextMonthButton(page);
-      const spy = await picker.spyOnEvent("duetChange");
-      await nextMonth.click();
-      await nextMonth.click();
-      await nextMonth.click();
-      await clickDay(page, "19. huhtikuuta");
-      expect(spy).toHaveReceivedEventTimes(1);
-      expect(spy.lastEvent.detail).toEqual({
-        component: "duet-date-picker",
-        value: "2020-04-19",
-        valueAsDate: new Date(2020, 3, 19).toISOString(),
-      });
-    });
-    it("supports selecting a date in the past", async () => {
-      const page = await generatePage({ value: "2020-01-01" });
-      await openCalendar(page);
-      const picker = await getPicker(page);
-      const spy = await picker.spyOnEvent("duetChange");
-      await setMonthDropdown(page, "3");
-      await setYearDropdown(page, "2019");
-      await page.waitForTimeout(ANIMATION_DELAY);
-      await clickDay(page, "19. huhtikuuta");
-      expect(spy).toHaveReceivedEventTimes(1);
-      expect(spy.lastEvent.detail).toEqual({
-        component: "duet-date-picker",
-        value: "2019-04-19",
-        valueAsDate: new Date(2019, 3, 19).toISOString(),
-      });
-    });
-  });
-  // see: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html
-  describe("a11y/ARIA requirements", () => {
-    describe("input", () => {
-      it("has accessible label", async () => {
-        const page = await generatePage({ label: "pick date" });
-        const input = await page.find("input");
-        const id = input.getAttribute("id");
-        expect(id).toBeDefined();
-        const label = await page.find(`label[for="${id}"]`);
-        expect(label).toEqualText("pick date");
-      });
-    });
-    describe("button", () => {
-      it("has an accessible label", async () => {
-        const page = await generatePage();
-        const button = await getChooseDateButton(page);
-        const element = await button.find("duet-visually-hidden");
-        expect(element).toEqualText(i18n.fi.buttonLabel);
-      });
-    });
-    describe("dialog", () => {
-      it("meets a11y requirements", async () => {
-        const page = await generatePage();
-        const dialog = await getDialog(page);
-        // has aria-modal attr
-        expect(dialog).toBeDefined();
-        expect(dialog).toEqualAttribute("aria-modal", "true");
-        // has accessible label
-        const labelledById = dialog.getAttribute("aria-labelledby");
-        const title = await page.find(`#${labelledById}`);
-        expect(title).toBeDefined();
-        // announces keyboard support
-        const instructionText = await dialog.find("duet-visually-hidden[aria-live]");
-        expect(instructionText).toEqualText(i18n.fi.keyboardInstruction);
-      });
-    });
-    describe("grid", () => {
-      it("meets a11y requirements", async () => {
-        const page = await generatePage({ value: "2020-01-01" });
-        const grid = await getGrid(page);
-        // has accessible label
-        const labelledById = await grid.getAttribute("aria-labelledby");
-        const title = await page.find(`#${labelledById}`);
-        expect(title).toBeDefined();
-        await openCalendar(page);
-        // should be single selected element, and it should have role="gridcell"
-        const selected = await grid.findAll(`[aria-pressed="true"]`);
-        expect(selected.length).toBe(1);
-        // only one button is in focus order, has accessible label, and correct text content
-        expect(selected[0]).toEqualAttribute("tabindex", "0");
-        expect(selected[0].innerText).toContain("1. tammikuuta");
-      });
-      it.todo("correctly abbreviates the shortened day names");
-    });
-  });
-  describe("keyboard a11y", () => {
-    it("closes on ESC press", async () => {
-      const page = await generatePage();
-      await openCalendar(page);
-      await page.waitForTimeout(ANIMATION_DELAY);
-      expect(await isCalendarOpen(page)).toBe(true);
-      await page.keyboard.press("Escape");
-      await page.waitForChanges();
-      await page.waitForTimeout(ANIMATION_DELAY);
-      expect(await isCalendarOpen(page)).toBe(false);
-    });
-    it("supports selecting a date in the future", async () => {
-      const page = await generatePage({ value: "2020-01-01" });
-      const picker = await getPicker(page);
-      const spy = await picker.spyOnEvent("duetChange");
-      // open calendar
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      // wait for calendar to open
-      await page.waitForTimeout(ANIMATION_DELAY);
-      // set month to april
-      await setMonthDropdown(page, "3");
-      // tab to grid
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      // select 19th of month
-      await page.keyboard.press("ArrowDown");
-      await page.waitForChanges();
-      await page.keyboard.press("ArrowDown");
-      await page.waitForChanges();
-      await page.keyboard.press("ArrowRight");
-      await page.waitForChanges();
-      await page.keyboard.press("ArrowRight");
-      await page.waitForChanges();
-      await page.keyboard.press("ArrowRight");
-      await page.waitForChanges();
-      await page.keyboard.press("ArrowRight");
-      await page.waitForChanges();
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      expect(spy).toHaveReceivedEventTimes(1);
-      expect(spy.lastEvent.detail).toEqual({
-        component: "duet-date-picker",
-        value: "2020-04-19",
-        valueAsDate: new Date(2020, 3, 19).toISOString(),
-      });
-    });
-    it("supports selecting a date in the past", async () => {
-      const page = await generatePage({ value: "2020-01-01" });
-      const picker = await getPicker(page);
-      const spy = await picker.spyOnEvent("duetChange");
-      // open calendar
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      // wait for calendar to open
-      await page.waitForTimeout(ANIMATION_DELAY);
-      // select april from month dropdown
-      await setMonthDropdown(page, "3");
-      // tab to year dropdown, select 2019
-      await setYearDropdown(page, "2019");
-      // tab to grid
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      await page.keyboard.press("Tab");
-      await page.waitForChanges();
-      // select date 19th of month
-      await page.keyboard.press("ArrowDown");
-      await page.waitForChanges();
-      await page.keyboard.press("ArrowDown");
-      await page.waitForChanges();
-      await page.keyboard.press("ArrowRight");
-      await page.waitForChanges();
-      await page.keyboard.press("ArrowRight");
-      await page.waitForChanges();
-      await page.keyboard.press("ArrowRight");
-      await page.waitForChanges();
-      await page.keyboard.press("ArrowRight");
-      await page.waitForChanges();
-      await page.keyboard.press("Enter");
-      await page.waitForChanges();
-      expect(spy).toHaveReceivedEventTimes(1);
-      expect(spy.lastEvent.detail).toEqual({
-        component: "duet-date-picker",
-        value: "2019-04-19",
-        valueAsDate: new Date(2019, 3, 19).toISOString(),
-      });
-    });
-    it.todo("moves focus to start of week on home press");
-    it.todo("moves focus to end of week end press");
-    it.todo("moves focus to previous month on page up press");
-    it.todo("moves focus to next month on page down press");
-    it.todo("moves focus to previous year on shift + page down press");
-    it.todo("moves focus to next year on shift + page down press");
-  });
-  describe("events", () => {
-    it("raises a duetBlur event when the input is blurred", async () => {
-      const page = await generatePage();
-      const picker = await page.find("duet-date-picker");
-      const spy = await picker.spyOnEvent("duetBlur");
-      await page.keyboard.press("Tab");
-      await page.keyboard.press("Tab");
-      expect(spy).toHaveReceivedEventTimes(1);
-    });
-    it("raises a duetFocus event when the input is focused", async () => {
-      const page = await generatePage();
-      const picker = await page.find("duet-date-picker");
-      const spy = await picker.spyOnEvent("duetFocus");
-      await page.keyboard.press("Tab");
-      expect(spy).toHaveReceivedEventTimes(1);
-    });
-  });
-  describe("focus management", () => {
-    async function assertDayButtonFocused(page) {
-      const focused = await getFocusedElement(page);
-      const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
-      const tabIndex = await page.evaluate((element) => element.tabIndex, focused);
-      expect(tabIndex).toBe(0);
-      expect(tag).toEqual("button");
-    }
-    async function assertCloseButtonFocused(page) {
-      const focused = await getFocusedElement(page);
-      const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
-      const text = await page.evaluate((element) => element.innerText, focused);
-      expect(text).toBe(i18n.fi.closeLabel);
-      expect(tag).toEqual("button");
-    }
-    async function assertMonthDropdownFocused(page) {
-      const focused = await getFocusedElement(page);
-      const tag = await page.evaluate(element => element.tagName.toLowerCase(), focused);
-      const id = await page.evaluate(element => element.id, focused);
-      const label = await page.find(`label[for="${id}"]`);
-      expect(label).toEqualText(i18n.fi.monthSelectLabel);
-      expect(tag).toEqual("select");
-    }
-    async function assertYearDropdownFocused(page) {
-      const focused = await getFocusedElement(page);
-      const tag = await page.evaluate(element => element.tagName.toLowerCase(), focused);
-      const id = await page.evaluate(element => element.id, focused);
-      const label = await page.find(`label[for="${id}"]`);
-      expect(label).toEqualText(i18n.fi.yearSelectLabel);
-      expect(tag).toEqual("select");
-    }
-    async function assertPrevMonthFocused(page) {
-      const focused = await getFocusedElement(page);
-      const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
-      const text = await page.evaluate((element) => element.innerText, focused);
-      expect(text).toBe(i18n.fi.prevMonthLabel);
-      expect(tag).toEqual("duet-action-button");
-    }
-    async function assertNextMonthFocused(page) {
-      const focused = await getFocusedElement(page);
-      const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
-      const text = await page.evaluate((element) => element.innerText, focused);
-      expect(text).toBe(i18n.fi.nextMonthLabel);
-      expect(tag).toEqual("duet-action-button");
-    }
-    async function assertToggleButtonFocused(page, negate = false) {
-      const focused = await getFocusedElement(page);
-      const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
-      const text = await page.evaluate((element) => element.innerText, focused);
-      if (negate) {
-        expect(tag).not.toEqual("button");
-        expect(text).not.toContain(`${i18n.fi.buttonLabel}, ${i18n.fi.selected}`);
-      }
-      else {
-        expect(tag).toEqual("button");
-        expect(text).toContain(`${i18n.fi.buttonLabel}, ${i18n.fi.selected}`);
-      }
-    }
-    it("traps focus in calendar", async () => {
-      const page = await generatePage();
-      await openCalendar(page);
-      await page.waitForTimeout(ANIMATION_DELAY);
-      const focusOrder = [
-        assertMonthDropdownFocused,
-        assertYearDropdownFocused,
-        assertPrevMonthFocused,
-        assertNextMonthFocused,
-        assertDayButtonFocused,
-        assertCloseButtonFocused,
-      ];
-      for (const assertion of focusOrder) {
-        await assertion(page);
-        await page.keyboard.press("Tab");
-      }
-      // should arrive back at the start
-      const assertion = focusOrder[0];
-      await assertion(page);
-    });
-    it.todo("doesn't shift focus when interacting with calendar navigation controls");
-    it("shifts focus back to button on date select", async () => {
-      const page = await generatePage({ value: "2020-01-01" });
-      await openCalendar(page);
-      await page.waitForTimeout(ANIMATION_DELAY);
-      await clickDay(page, "10. tammikuuta");
-      await page.waitForChanges();
-      await assertToggleButtonFocused(page);
-    });
-    it("shifts focus back to button on ESC press", async () => {
-      const page = await generatePage({ value: "2020-01-01" });
-      await openCalendar(page);
-      await page.waitForTimeout(ANIMATION_DELAY);
-      await page.keyboard.press("Escape");
-      await page.waitForChanges();
-      await assertToggleButtonFocused(page);
-    });
-    it("doesn't shift focus to button on click outside", async () => {
-      const page = await generatePage({ value: "2020-01-01" });
-      await openCalendar(page);
-      await page.waitForTimeout(ANIMATION_DELAY);
-      await clickOutside(page);
-      await assertToggleButtonFocused(page, true);
-    });
-  });
-  describe("min/max support", () => {
-    it("supports a min date", async () => {
-      const page = await generatePage({ value: "2020-01-15", min: "2020-01-02" });
-      const picker = await getPicker(page);
-      const spy = await picker.spyOnEvent("duetChange");
-      await openCalendar(page);
-      // wait for calendar to open
-      await page.waitForTimeout(ANIMATION_DELAY);
-      // try clicking a day outside the range
-      await clickDay(page, "1. tammikuuta");
-      expect(spy).toHaveReceivedEventTimes(0);
-      // click a day inside the range
-      await clickDay(page, "2. tammikuuta");
-      expect(spy).toHaveReceivedEventTimes(1);
-      expect(spy.lastEvent.detail).toEqual({
-        component: "duet-date-picker",
-        value: "2020-01-02",
-        valueAsDate: new Date(2020, 0, 2).toISOString(),
-      });
-    });
-    it("supports a max date", async () => {
-      const page = await generatePage({ value: "2020-01-15", max: "2020-01-30" });
-      const picker = await getPicker(page);
-      const spy = await picker.spyOnEvent("duetChange");
-      await openCalendar(page);
-      // wait for calendar to open
-      await page.waitForTimeout(ANIMATION_DELAY);
-      // try clicking a day outside the range
-      await clickDay(page, "31. tammikuuta");
-      expect(spy).toHaveReceivedEventTimes(0);
-      // click a day inside the range
-      await clickDay(page, "30. tammikuuta");
-      expect(spy).toHaveReceivedEventTimes(1);
-      expect(spy.lastEvent.detail).toEqual({
-        component: "duet-date-picker",
-        value: "2020-01-30",
-        valueAsDate: new Date(2020, 0, 30).toISOString(),
-      });
-    });
-    it("supports min and max dates", async () => {
-      const page = await generatePage({ value: "2020-01-15", min: "2020-01-02", max: "2020-01-30" });
-      const picker = await getPicker(page);
-      const spy = await picker.spyOnEvent("duetChange");
-      await openCalendar(page);
-      // wait for calendar to open
-      await page.waitForTimeout(ANIMATION_DELAY);
-      // try clicking a day less than min
-      await clickDay(page, "1. tammikuuta");
-      expect(spy).toHaveReceivedEventTimes(0);
-      // try clicking a day greater than max
-      await clickDay(page, "31. tammikuuta");
-      expect(spy).toHaveReceivedEventTimes(0);
-      // click a day inside the range
-      await clickDay(page, "30. tammikuuta");
-      expect(spy).toHaveReceivedEventTimes(1);
-      expect(spy.lastEvent.detail).toEqual({
-        component: "duet-date-picker",
-        value: "2020-01-30",
-        valueAsDate: new Date(2020, 0, 30).toISOString(),
-      });
-    });
-    it("disables prev month button if same month and year as min", async () => {
-      const page = await generatePage({ value: "2020-04-19", min: "2020-04-01" });
-      await openCalendar(page);
-      const prevMonthButton = await getPrevMonthButton(page);
-      expect(prevMonthButton).toHaveAttribute("disabled");
-    });
-    it("disables next month button if same month and year as max", async () => {
-      const page = await generatePage({ value: "2020-04-19", max: "2020-04-30" });
-      await openCalendar(page);
-      const nextMonthButton = await getNextMonthButton(page);
-      expect(nextMonthButton).toHaveAttribute("disabled");
+    it("should render a date picker", async () => {
+        const page = await createPage(`<duet-date-picker value="2020-06-16"></duet-date-picker>`);
+        const component = await getPicker(page);
+        expect(component).not.toBeNull();
+    });
+    describe("user input", () => {
+        it("does not reformat input if date doesn't have leading zeroes", async () => {
+            const page = await generatePage();
+            const picker = await getPicker(page);
+            const input = await page.find("duet-input input");
+            const spy = await picker.spyOnEvent("duetChange");
+            await input.type("1.2.2021", { delay: 50 });
+            await page.waitForChanges();
+            // the input's value should not get formatted with leading zeroes
+            expect(await input.getProperty("value")).toBe("1.2.2021");
+            // but we should still emit correctly formatted ISO dates
+            expect(await picker.getProperty("value")).toBe("2021-02-01");
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy.lastEvent.detail.value).toBe("2021-02-01");
+        });
+        it("allows input to be cleared by setting value to empty string", async () => {
+            const page = await generatePage();
+            const picker = await getPicker(page);
+            const input = await page.find("duet-input input");
+            await input.type("1.2.2021", { delay: 50 });
+            await page.waitForChanges();
+            picker.setProperty("value", "");
+            await page.waitForChanges();
+            expect(await input.getProperty("value")).toBe("");
+        });
+        it("supports dashes and slashes as separators", async () => {
+            const page = await generatePage();
+            const picker = await getPicker(page);
+            const input = await page.find("duet-input input");
+            const spy = await picker.spyOnEvent("duetChange");
+            // slashes
+            await input.type("1/1/2021", { delay: 50 });
+            await page.waitForChanges();
+            expect(await picker.getProperty("value")).toBe("2021-01-01");
+            expect(spy.lastEvent.detail.value).toBe("2021-01-01");
+            // clear input
+            picker.setProperty("value", "");
+            await page.waitForChanges();
+            // dashes
+            await input.type("2-1-2021", { delay: 50 });
+            await page.waitForChanges();
+            expect(await picker.getProperty("value")).toBe("2021-01-02");
+            expect(spy.lastEvent.detail.value).toBe("2021-01-02");
+        });
     });
-    it("does not disable prev/next buttons when only month value (but not year) is same as min and max", async () => {
-      // there was a bug whereby both buttons would be disabled if the min/max/selected date
-      // had the same month (here: 4), but different years. this tests ensures no regression
-      const page = await generatePage({ value: "2020-04-19", min: "2019-04-19", max: "2021-04-19" });
-      await openCalendar(page);
-      const prevMonthButton = await getPrevMonthButton(page);
-      const nextMonthButton = await getNextMonthButton(page);
-      expect(prevMonthButton).not.toHaveAttribute("disabled");
-      expect(nextMonthButton).not.toHaveAttribute("disabled");
+    describe("mouse interaction", () => {
+        it("should open on button click", async () => {
+            const page = await generatePage();
+            expect(await isCalendarOpen(page)).toBe(false);
+            await openCalendar(page);
+            expect(await isCalendarOpen(page)).toBe(true);
+        });
+        it("should close on click outside", async () => {
+            const page = await generatePage();
+            await openCalendar(page);
+            expect(await isCalendarOpen(page)).toBe(true);
+            await clickOutside(page);
+            expect(await isCalendarOpen(page)).toBe(false);
+        });
+        it("supports selecting a date in the future", async () => {
+            const page = await generatePage({ value: "2020-01-01" });
+            await openCalendar(page);
+            const picker = await getPicker(page);
+            const nextMonth = await getNextMonthButton(page);
+            const spy = await picker.spyOnEvent("duetChange");
+            await nextMonth.click();
+            await nextMonth.click();
+            await nextMonth.click();
+            await clickDay(page, "19. huhtikuuta");
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy.lastEvent.detail).toEqual({
+                component: "duet-date-picker",
+                value: "2020-04-19",
+                valueAsDate: new Date(2020, 3, 19).toISOString(),
+            });
+        });
+        it("supports selecting a date in the past", async () => {
+            const page = await generatePage({ value: "2020-01-01" });
+            await openCalendar(page);
+            const picker = await getPicker(page);
+            const spy = await picker.spyOnEvent("duetChange");
+            await setMonthDropdown(page, "3");
+            await setYearDropdown(page, "2019");
+            await page.waitForTimeout(ANIMATION_DELAY);
+            await clickDay(page, "19. huhtikuuta");
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy.lastEvent.detail).toEqual({
+                component: "duet-date-picker",
+                value: "2019-04-19",
+                valueAsDate: new Date(2019, 3, 19).toISOString(),
+            });
+        });
     });
-    it("respects min/max dates when generating year dropdown", async () => {
-      const page = await generatePage({ value: "2020-04-19", min: "2019-04-19", max: "2021-04-19" });
-      const allowedYears = await page.$eval(".duet-date-year-select", (select) => {
-        return Array.from(select.options).map(option => option.value);
-      });
-      expect(allowedYears).toEqual(["2019", "2020", "2021"]);
+    // see: https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html
+    describe("a11y/ARIA requirements", () => {
+        describe("input", () => {
+            it("has accessible label", async () => {
+                const page = await generatePage({ label: "pick date" });
+                const input = await page.find("input");
+                const id = input.getAttribute("id");
+                expect(id).toBeDefined();
+                const label = await page.find(`label[for="${id}"]`);
+                expect(label).toEqualText("pick date");
+            });
+        });
+        describe("button", () => {
+            it("has an accessible label", async () => {
+                const page = await generatePage();
+                const button = await getChooseDateButton(page);
+                const element = await button.find("duet-visually-hidden");
+                expect(element).toEqualText(i18n.fi.buttonLabel);
+            });
+        });
+        describe("dialog", () => {
+            it("meets a11y requirements", async () => {
+                const page = await generatePage();
+                const dialog = await getDialog(page);
+                // has aria-modal attr
+                expect(dialog).toBeDefined();
+                expect(dialog).toEqualAttribute("aria-modal", "true");
+                // has accessible label
+                const labelledById = dialog.getAttribute("aria-labelledby");
+                const title = await page.find(`#${labelledById}`);
+                expect(title).toBeDefined();
+                // announces keyboard support
+                const instructionText = await dialog.find("duet-visually-hidden[aria-live]");
+                expect(instructionText).toEqualText(i18n.fi.keyboardInstruction);
+            });
+        });
+        describe("grid", () => {
+            it("meets a11y requirements", async () => {
+                const page = await generatePage({ value: "2020-01-01" });
+                const grid = await getGrid(page);
+                // has accessible label
+                const labelledById = await grid.getAttribute("aria-labelledby");
+                const title = await page.find(`#${labelledById}`);
+                expect(title).toBeDefined();
+                await openCalendar(page);
+                // should be single selected element, and it should have role="gridcell"
+                const selected = await grid.findAll(`[aria-pressed="true"]`);
+                expect(selected.length).toBe(1);
+                // only one button is in focus order, has accessible label, and correct text content
+                expect(selected[0]).toEqualAttribute("tabindex", "0");
+                expect(selected[0].innerText).toContain("1. tammikuuta");
+            });
+            it.todo("correctly abbreviates the shortened day names");
+        });
     });
-    it("respects min/max dates when generating month dropdown", async () => {
-      const page = await generatePage({ value: "2020-04-19", min: "2019-04-01", max: "2020-05-31" });
-      await openCalendar(page);
-      function getAllowedMonths() {
-        return page.$eval(".duet-date-month-select", (select) => {
-          return Array.from(select.options)
-            .filter(option => !option.disabled)
-            .map(option => option.value);
-        });
-      }
-      // in 2020, January - May is allowed
-      let allowedMonths = await getAllowedMonths();
-      expect(allowedMonths).toEqual(["0", "1", "2", "3", "4"]);
-      await setYearDropdown(page, "2019");
-      // in 2019, April - December is allowed
-      allowedMonths = await getAllowedMonths();
-      expect(allowedMonths).toEqual(["3", "4", "5", "6", "7", "8", "9", "10", "11"]);
+    describe("keyboard a11y", () => {
+        it("closes on ESC press", async () => {
+            const page = await generatePage();
+            await openCalendar(page);
+            await page.waitForTimeout(ANIMATION_DELAY);
+            expect(await isCalendarOpen(page)).toBe(true);
+            await page.keyboard.press("Escape");
+            await page.waitForChanges();
+            await page.waitForTimeout(ANIMATION_DELAY);
+            expect(await isCalendarOpen(page)).toBe(false);
+        });
+        it("supports selecting a date in the future", async () => {
+            const page = await generatePage({ value: "2020-01-01" });
+            const picker = await getPicker(page);
+            const spy = await picker.spyOnEvent("duetChange");
+            // open calendar
+            await page.keyboard.press("Tab");
+            await page.waitForChanges();
+            await page.keyboard.press("Tab");
+            await page.waitForChanges();
+            await page.keyboard.press("Enter");
+            await page.waitForChanges();
+            // wait for calendar to open
+            await page.waitForTimeout(ANIMATION_DELAY);
+            // set month to april
+            await setMonthDropdown(page, "3");
+            // tab to grid
+            await page.keyboard.press("Tab");
+            await page.waitForChanges();
+            await page.keyboard.press("Tab");
+            await page.waitForChanges();
+            await page.keyboard.press("Tab");
+            await page.waitForChanges();
+            await page.keyboard.press("Tab");
+            await page.waitForChanges();
+            // select 19th of month
+            await page.keyboard.press("ArrowDown");
+            await page.waitForChanges();
+            await page.keyboard.press("ArrowDown");
+            await page.waitForChanges();
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            await page.keyboard.press("Enter");
+            await page.waitForChanges();
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy.lastEvent.detail).toEqual({
+                component: "duet-date-picker",
+                value: "2020-04-19",
+                valueAsDate: new Date(2020, 3, 19).toISOString(),
+            });
+        });
+        it("supports selecting a date in the past", async () => {
+            const page = await generatePage({ value: "2020-01-01" });
+            const picker = await getPicker(page);
+            const spy = await picker.spyOnEvent("duetChange");
+            // open calendar
+            await page.keyboard.press("Tab");
+            await page.waitForChanges();
+            await page.keyboard.press("Tab");
+            await page.waitForChanges();
+            await page.keyboard.press("Enter");
+            await page.waitForChanges();
+            // wait for calendar to open
+            await page.waitForTimeout(ANIMATION_DELAY);
+            // select april from month dropdown
+            await setMonthDropdown(page, "3");
+            // tab to year dropdown, select 2019
+            await setYearDropdown(page, "2019");
+            // tab to grid
+            await page.keyboard.press("Tab");
+            await page.waitForChanges();
+            await page.keyboard.press("Tab");
+            await page.waitForChanges();
+            await page.keyboard.press("Tab");
+            await page.waitForChanges();
+            await page.keyboard.press("Tab");
+            await page.waitForChanges();
+            // select date 19th of month
+            await page.keyboard.press("ArrowDown");
+            await page.waitForChanges();
+            await page.keyboard.press("ArrowDown");
+            await page.waitForChanges();
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            await page.keyboard.press("ArrowRight");
+            await page.waitForChanges();
+            await page.keyboard.press("Enter");
+            await page.waitForChanges();
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy.lastEvent.detail).toEqual({
+                component: "duet-date-picker",
+                value: "2019-04-19",
+                valueAsDate: new Date(2019, 3, 19).toISOString(),
+            });
+        });
+        it.todo("moves focus to start of week on home press");
+        it.todo("moves focus to end of week end press");
+        it.todo("moves focus to previous month on page up press");
+        it.todo("moves focus to next month on page down press");
+        it.todo("moves focus to previous year on shift + page down press");
+        it.todo("moves focus to next year on shift + page down press");
+    });
+    describe("events", () => {
+        it("raises a duetBlur event when the input is blurred", async () => {
+            const page = await generatePage();
+            const picker = await page.find("duet-date-picker");
+            const spy = await picker.spyOnEvent("duetBlur");
+            await page.keyboard.press("Tab");
+            await page.keyboard.press("Tab");
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+        it("raises a duetFocus event when the input is focused", async () => {
+            const page = await generatePage();
+            const picker = await page.find("duet-date-picker");
+            const spy = await picker.spyOnEvent("duetFocus");
+            await page.keyboard.press("Tab");
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
     });
-  });
-  describe("methods", () => {
-    it("should open calendar on show()", async () => {
-      const page = await generatePage();
-      const picker = await page.find("duet-date-picker");
-      expect(await isCalendarOpen(page)).toBe(false);
-      await picker.callMethod("show");
-      await page.waitForChanges();
-      expect(await isCalendarOpen(page)).toBe(true);
+    describe("focus management", () => {
+        async function assertDayButtonFocused(page) {
+            const focused = await getFocusedElement(page);
+            const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
+            const tabIndex = await page.evaluate((element) => element.tabIndex, focused);
+            expect(tabIndex).toBe(0);
+            expect(tag).toEqual("button");
+        }
+        async function assertCloseButtonFocused(page) {
+            const focused = await getFocusedElement(page);
+            const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
+            const text = await page.evaluate((element) => element.innerText, focused);
+            expect(text).toBe(i18n.fi.closeLabel);
+            expect(tag).toEqual("button");
+        }
+        async function assertMonthDropdownFocused(page) {
+            const focused = await getFocusedElement(page);
+            const tag = await page.evaluate(element => element.tagName.toLowerCase(), focused);
+            const id = await page.evaluate(element => element.id, focused);
+            const label = await page.find(`label[for="${id}"]`);
+            expect(label).toEqualText(i18n.fi.monthSelectLabel);
+            expect(tag).toEqual("select");
+        }
+        async function assertYearDropdownFocused(page) {
+            const focused = await getFocusedElement(page);
+            const tag = await page.evaluate(element => element.tagName.toLowerCase(), focused);
+            const id = await page.evaluate(element => element.id, focused);
+            const label = await page.find(`label[for="${id}"]`);
+            expect(label).toEqualText(i18n.fi.yearSelectLabel);
+            expect(tag).toEqual("select");
+        }
+        async function assertPrevMonthFocused(page) {
+            const focused = await getFocusedElement(page);
+            const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
+            const text = await page.evaluate((element) => element.innerText, focused);
+            expect(text).toBe(i18n.fi.prevMonthLabel);
+            expect(tag).toEqual("duet-action-button");
+        }
+        async function assertNextMonthFocused(page) {
+            const focused = await getFocusedElement(page);
+            const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
+            const text = await page.evaluate((element) => element.innerText, focused);
+            expect(text).toBe(i18n.fi.nextMonthLabel);
+            expect(tag).toEqual("duet-action-button");
+        }
+        async function assertToggleButtonFocused(page, negate = false) {
+            const focused = await getFocusedElement(page);
+            const tag = await page.evaluate((element) => element.tagName.toLowerCase(), focused);
+            const text = await page.evaluate((element) => element.innerText, focused);
+            if (negate) {
+                expect(tag).not.toEqual("button");
+                expect(text).not.toContain(`${i18n.fi.buttonLabel}, ${i18n.fi.selected}`);
+            }
+            else {
+                expect(tag).toEqual("button");
+                expect(text).toContain(`${i18n.fi.buttonLabel}, ${i18n.fi.selected}`);
+            }
+        }
+        it("traps focus in calendar", async () => {
+            const page = await generatePage();
+            await openCalendar(page);
+            await page.waitForTimeout(ANIMATION_DELAY);
+            const focusOrder = [
+                assertMonthDropdownFocused,
+                assertYearDropdownFocused,
+                assertPrevMonthFocused,
+                assertNextMonthFocused,
+                assertDayButtonFocused,
+                assertCloseButtonFocused,
+            ];
+            for (const assertion of focusOrder) {
+                await assertion(page);
+                await page.keyboard.press("Tab");
+            }
+            // should arrive back at the start
+            const assertion = focusOrder[0];
+            await assertion(page);
+        });
+        it.todo("doesn't shift focus when interacting with calendar navigation controls");
+        it("shifts focus back to button on date select", async () => {
+            const page = await generatePage({ value: "2020-01-01" });
+            await openCalendar(page);
+            await page.waitForTimeout(ANIMATION_DELAY);
+            await clickDay(page, "10. tammikuuta");
+            await page.waitForChanges();
+            await assertToggleButtonFocused(page);
+        });
+        it("shifts focus back to button on ESC press", async () => {
+            const page = await generatePage({ value: "2020-01-01" });
+            await openCalendar(page);
+            await page.waitForTimeout(ANIMATION_DELAY);
+            await page.keyboard.press("Escape");
+            await page.waitForChanges();
+            await assertToggleButtonFocused(page);
+        });
+        it("doesn't shift focus to button on click outside", async () => {
+            const page = await generatePage({ value: "2020-01-01" });
+            await openCalendar(page);
+            await page.waitForTimeout(ANIMATION_DELAY);
+            await clickOutside(page);
+            await assertToggleButtonFocused(page, true);
+        });
     });
-    it("should close calendar on hide()", async () => {
-      const page = await generatePage();
-      const picker = await page.find("duet-date-picker");
-      await picker.callMethod("show");
-      await page.waitForChanges();
-      expect(await isCalendarOpen(page)).toBe(true);
-      await picker.callMethod("hide");
-      await page.waitForChanges();
-      const dialog = await getDialog(page);
-      await dialog.waitForNotVisible();
-      expect(await isCalendarOpen(page)).toBe(false);
+    describe("min/max support", () => {
+        it("supports a min date", async () => {
+            const page = await generatePage({ value: "2020-01-15", min: "2020-01-02" });
+            const picker = await getPicker(page);
+            const spy = await picker.spyOnEvent("duetChange");
+            await openCalendar(page);
+            // wait for calendar to open
+            await page.waitForTimeout(ANIMATION_DELAY);
+            // try clicking a day outside the range
+            await clickDay(page, "1. tammikuuta");
+            expect(spy).toHaveReceivedEventTimes(0);
+            // click a day inside the range
+            await clickDay(page, "2. tammikuuta");
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy.lastEvent.detail).toEqual({
+                component: "duet-date-picker",
+                value: "2020-01-02",
+                valueAsDate: new Date(2020, 0, 2).toISOString(),
+            });
+        });
+        it("supports a max date", async () => {
+            const page = await generatePage({ value: "2020-01-15", max: "2020-01-30" });
+            const picker = await getPicker(page);
+            const spy = await picker.spyOnEvent("duetChange");
+            await openCalendar(page);
+            // wait for calendar to open
+            await page.waitForTimeout(ANIMATION_DELAY);
+            // try clicking a day outside the range
+            await clickDay(page, "31. tammikuuta");
+            expect(spy).toHaveReceivedEventTimes(0);
+            // click a day inside the range
+            await clickDay(page, "30. tammikuuta");
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy.lastEvent.detail).toEqual({
+                component: "duet-date-picker",
+                value: "2020-01-30",
+                valueAsDate: new Date(2020, 0, 30).toISOString(),
+            });
+        });
+        it("supports min and max dates", async () => {
+            const page = await generatePage({ value: "2020-01-15", min: "2020-01-02", max: "2020-01-30" });
+            const picker = await getPicker(page);
+            const spy = await picker.spyOnEvent("duetChange");
+            await openCalendar(page);
+            // wait for calendar to open
+            await page.waitForTimeout(ANIMATION_DELAY);
+            // try clicking a day less than min
+            await clickDay(page, "1. tammikuuta");
+            expect(spy).toHaveReceivedEventTimes(0);
+            // try clicking a day greater than max
+            await clickDay(page, "31. tammikuuta");
+            expect(spy).toHaveReceivedEventTimes(0);
+            // click a day inside the range
+            await clickDay(page, "30. tammikuuta");
+            expect(spy).toHaveReceivedEventTimes(1);
+            expect(spy.lastEvent.detail).toEqual({
+                component: "duet-date-picker",
+                value: "2020-01-30",
+                valueAsDate: new Date(2020, 0, 30).toISOString(),
+            });
+        });
+        it("disables prev month button if same month and year as min", async () => {
+            const page = await generatePage({ value: "2020-04-19", min: "2020-04-01" });
+            await openCalendar(page);
+            const prevMonthButton = await getPrevMonthButton(page);
+            expect(prevMonthButton).toHaveAttribute("disabled");
+        });
+        it("disables next month button if same month and year as max", async () => {
+            const page = await generatePage({ value: "2020-04-19", max: "2020-04-30" });
+            await openCalendar(page);
+            const nextMonthButton = await getNextMonthButton(page);
+            expect(nextMonthButton).toHaveAttribute("disabled");
+        });
+        it("does not disable prev/next buttons when only month value (but not year) is same as min and max", async () => {
+            // there was a bug whereby both buttons would be disabled if the min/max/selected date
+            // had the same month (here: 4), but different years. this tests ensures no regression
+            const page = await generatePage({ value: "2020-04-19", min: "2019-04-19", max: "2021-04-19" });
+            await openCalendar(page);
+            const prevMonthButton = await getPrevMonthButton(page);
+            const nextMonthButton = await getNextMonthButton(page);
+            expect(prevMonthButton).not.toHaveAttribute("disabled");
+            expect(nextMonthButton).not.toHaveAttribute("disabled");
+        });
+        it("respects min/max dates when generating year dropdown", async () => {
+            const page = await generatePage({ value: "2020-04-19", min: "2019-04-19", max: "2021-04-19" });
+            const allowedYears = await page.$eval(".duet-date-year-select", (select) => {
+                return Array.from(select.options).map(option => option.value);
+            });
+            expect(allowedYears).toEqual(["2019", "2020", "2021"]);
+        });
+        it("respects min/max dates when generating month dropdown", async () => {
+            const page = await generatePage({ value: "2020-04-19", min: "2019-04-01", max: "2020-05-31" });
+            await openCalendar(page);
+            function getAllowedMonths() {
+                return page.$eval(".duet-date-month-select", (select) => {
+                    return Array.from(select.options)
+                        .filter(option => !option.disabled)
+                        .map(option => option.value);
+                });
+            }
+            // in 2020, January - May is allowed
+            let allowedMonths = await getAllowedMonths();
+            expect(allowedMonths).toEqual(["0", "1", "2", "3", "4"]);
+            await setYearDropdown(page, "2019");
+            // in 2019, April - December is allowed
+            allowedMonths = await getAllowedMonths();
+            expect(allowedMonths).toEqual(["3", "4", "5", "6", "7", "8", "9", "10", "11"]);
+        });
     });
-    it("should focus input on setFocus()", async () => {
-      const page = await generatePage({ label: "test label" });
-      const picker = await page.find("duet-date-picker");
-      await picker.callMethod("setFocus");
-      await page.waitForChanges();
-      const focused = await getFocusedElement(page);
-      const id = await page.evaluate(element => element.id, focused);
-      const label = await page.find(`label[for="${id}"]`);
-      expect(label).toEqualText("test label");
+    describe("methods", () => {
+        it("should open calendar on show()", async () => {
+            const page = await generatePage();
+            const picker = await page.find("duet-date-picker");
+            expect(await isCalendarOpen(page)).toBe(false);
+            await picker.callMethod("show");
+            await page.waitForChanges();
+            expect(await isCalendarOpen(page)).toBe(true);
+        });
+        it("should close calendar on hide()", async () => {
+            const page = await generatePage();
+            const picker = await page.find("duet-date-picker");
+            await picker.callMethod("show");
+            await page.waitForChanges();
+            expect(await isCalendarOpen(page)).toBe(true);
+            await picker.callMethod("hide");
+            await page.waitForChanges();
+            const dialog = await getDialog(page);
+            await dialog.waitForNotVisible();
+            expect(await isCalendarOpen(page)).toBe(false);
+        });
+        it("should focus input on setFocus()", async () => {
+            const page = await generatePage({ label: "test label" });
+            const picker = await page.find("duet-date-picker");
+            await picker.callMethod("setFocus");
+            await page.waitForChanges();
+            const focused = await getFocusedElement(page);
+            const id = await page.evaluate(element => element.id, focused);
+            const label = await page.find(`label[for="${id}"]`);
+            expect(label).toEqualText("test label");
+        });
     });
-  });
-  describe("form interaction", () => {
-    it("supports required attribute", async () => {
-      const page = await createPage(`
+    describe("form interaction", () => {
+        it("supports required attribute", async () => {
+            const page = await createPage(`
         <form>
           <duet-date-picker required></duet-date-picker>
           <button type="submit">submit</button>
         </form>
       `);
-      const picker = await getPicker(page);
-      const button = await page.find("button[type='submit']");
-      const form = await page.find("form");
-      const spy = await form.spyOnEvent("submit");
-      await button.click();
-      await page.waitForChanges();
-      expect(spy).toHaveReceivedEventTimes(0);
-      picker.setProperty("value", "2020-01-01");
-      await page.waitForChanges();
-      await button.click();
-      expect(spy).toHaveReceivedEventTimes(1);
-    });
-    it("always submits value as ISO date", async () => {
-      const page = await createPage(`
+            const picker = await getPicker(page);
+            const button = await page.find("button[type='submit']");
+            const form = await page.find("form");
+            const spy = await form.spyOnEvent("submit");
+            await button.click();
+            await page.waitForChanges();
+            expect(spy).toHaveReceivedEventTimes(0);
+            picker.setProperty("value", "2020-01-01");
+            await page.waitForChanges();
+            await button.click();
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+        it("always submits value as ISO date", async () => {
+            const page = await createPage(`
         <form>
           <duet-date-picker name="test"></duet-date-picker>
           <button type="submit">submit</button>
         </form>
       `);
-      const picker = await getPicker(page);
-      const input = await getInput(page);
-      picker.setProperty("value", "2020-01-01");
-      await page.waitForChanges();
-      // submitted value should be ISO format
-      const submittedValue = await page.$eval("form", (form) => new FormData(form).get("test"));
-      expect(submittedValue).toEqual("2020-01-01");
-      // whilst the displayed value should be Finnish format
-      expect(await input.getProperty("value")).toEqual("01.01.2020");
+            const picker = await getPicker(page);
+            const input = await getInput(page);
+            picker.setProperty("value", "2020-01-01");
+            await page.waitForChanges();
+            // submitted value should be ISO format
+            const submittedValue = await page.$eval("form", (form) => new FormData(form).get("test"));
+            expect(submittedValue).toEqual("2020-01-01");
+            // whilst the displayed value should be Finnish format
+            expect(await input.getProperty("value")).toEqual("01.01.2020");
+        });
     });
-  });
-  describe("constraint validation", () => {
-    test.each `
+    describe("constraint validation", () => {
+        test.each `
       input           | required | min             | max             | valueMissing | badInput | rangeUnderflow | rangeOverflow
       ${""}           | ${false} | ${""}           | ${""}           | ${false}     | ${false} | ${false}       | ${false}
       ${""}           | ${true}  | ${""}           | ${""}           | ${true}      | ${false} | ${false}       | ${false}
@@ -653,41 +653,41 @@ describe("duet-date-picker", () => {
       ${"01.01.2023"} | ${true}  | ${"2021-01-01"} | ${"2022-01-01"} | ${false}     | ${false} | ${false}       | ${true}
       ${"01.01.2021"} | ${true}  | ${"2021-01-01"} | ${"2022-01-01"} | ${false}     | ${false} | ${false}       | ${false}
     `("when '$input' is entered, required is '$required', min is '$min', max is '$max', then valueMissing is $valueMissing, badInput is $badInput, rangerOverflow is $rangeOverflow, rangeUnderflow is $rangeUnderflow", async ({ input, required, min, max, valueMissing, badInput, rangeUnderflow, rangeOverflow }) => {
-      const attrs = Object.entries({ min, max, required })
-        .filter(([, value]) => value)
-        .map(([attr, value]) => `${attr}="${value}"`)
-        .join(" ");
-      const page = await createPage(`
+            const attrs = Object.entries({ min, max, required })
+                .filter(([, value]) => value)
+                .map(([attr, value]) => `${attr}="${value}"`)
+                .join(" ");
+            const page = await createPage(`
           <duet-date-picker ${attrs}></duet-date-picker>
           <input type="date" ${attrs} />
         `);
-      await page.type(`duet-date-picker input[type="text"]`, input, { delay: 20 });
-      const duetValidity = await page.$eval(`duet-date-picker`, ({ validity }) => validity);
-      await page.type(`input[type="date"]`, input.replace(".", ""), { delay: 20 });
-      // have to manually copy properties into new object,
-      // since native ValidityState doesn't support JSON serialization
-      const nativeValidity = await page.$eval(`input[type="date"]`, ({ validity }) => {
-        const result = {};
-        for (const prop in validity) {
-          result[prop] = validity[prop];
-        }
-        return result;
-      });
-      const expected = {
-        patternMismatch: false,
-        customError: false,
-        stepMismatch: false,
-        tooLong: false,
-        tooShort: false,
-        typeMismatch: false,
-        valueMissing,
-        badInput,
-        rangeUnderflow,
-        rangeOverflow,
-        valid: !valueMissing && !badInput && !rangeUnderflow && !rangeOverflow,
-      };
-      expect(duetValidity).toEqual(expected);
-      expect(nativeValidity).toEqual(expected);
+            await page.type(`duet-date-picker input[type="text"]`, input, { delay: 20 });
+            const duetValidity = await page.$eval(`duet-date-picker`, ({ validity }) => validity);
+            await page.type(`input[type="date"]`, input.replace(".", ""), { delay: 20 });
+            // have to manually copy properties into new object,
+            // since native ValidityState doesn't support JSON serialization
+            const nativeValidity = await page.$eval(`input[type="date"]`, ({ validity }) => {
+                const result = {};
+                for (const prop in validity) {
+                    result[prop] = validity[prop];
+                }
+                return result;
+            });
+            const expected = {
+                patternMismatch: false,
+                customError: false,
+                stepMismatch: false,
+                tooLong: false,
+                tooShort: false,
+                typeMismatch: false,
+                valueMissing,
+                badInput,
+                rangeUnderflow,
+                rangeOverflow,
+                valid: !valueMissing && !badInput && !rangeUnderflow && !rangeOverflow,
+            };
+            expect(duetValidity).toEqual(expected);
+            expect(nativeValidity).toEqual(expected);
+        });
     });
-  });
 });