npm - @watermarkinsights/ripple - Versions diffs - 5.7.0-6 → 5.7.0-7 - Mend

@watermarkinsights/ripple 5.7.0-6 → 5.7.0-7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (377) hide show

package/dist/collection/components/datepickers/wm-datepicker.e2e.js ADDED Viewed

@@ -0,0 +1,382 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-datepicker", () => {
+    let page, component, input, btn, popup, popupTitleDay;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-datepicker id="dp" label="label"></wm-datepicker>
+      </main></body></html>`);
+        component = await page.find("wm-datepicker");
+        input = await page.find("wm-datepicker >>> input");
+        btn = await page.find("wm-datepicker >>> #toggle");
+        popup = await page.find("wm-datepicker >>> #popup");
+        popupTitleDay = await page.find("wm-datepicker >>> #popup-title-month");
+        // await page.keyboard.press("Tab");
+        // await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    // TODO
+    // see https://dequeuniversity.com/checklists/web/form-validation-feedback
+    // for Dynamic Error Detection / Error messages
+    // see also role="alert"
+    /* INPUT */
+    // See datepicker-input.e2e.ts
+    /* BUTTON */
+    // Opening and closing the date picker
+    it("opens at today's date by default", async () => {
+        const popup = await page.find("wm-datepicker >>> .popup");
+        const today = new Date();
+        const year = today.getUTCFullYear();
+        const month = (today.getUTCMonth() + 1).toString().padStart(2, "0");
+        const day = today.getUTCDate().toString();
+        const dateTable = await popup.find("[role='grid']");
+        // await page.waitForChanges();
+        const selDate = await dateTable.find("[aria-selected='true']");
+        expect(selDate).toEqualAttribute("data-year", year);
+        expect(selDate).toEqualAttribute("data-month", month);
+        expect(selDate.textContent).toBe(day);
+    });
+    it("opens at the date in the input if there is one", async () => {
+        const input = await page.find("wm-datepicker >>> input");
+        const popup = await page.find("wm-datepicker >>> .popup");
+        await input.type("02/01/2030");
+        await component.setProperty("calendarDate", "2030-02-01");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const dateTable = await popup.find("[role='grid']");
+        const selDate = await dateTable.find("[aria-selected='true']");
+        expect(selDate).toEqualAttribute("data-year", "2030");
+        expect(selDate).toEqualAttribute("data-month", "02");
+        expect(selDate.textContent).toBe("1");
+    });
+    it("Closes the popup when user triggers the calendar button", async () => {
+        const popup = await page.find("wm-datepicker >>> .popup");
+        await page.keyboard.press("Tab"); // in input
+        await page.keyboard.press("Tab"); // on btn
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(popup).toHaveClass("open");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        expect(popup).not.toHaveClass("open");
+    });
+    /* POPUP */
+    it("closes the calendar popup when the user presses ESCAPE", async () => {
+        await input.type("02/03/2019");
+        await component.setProperty("calendarDate", "2019-02-03");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        expect(popup).not.toHaveClass("open");
+    });
+    it("shows the next month on PAGE DOWN and shows the previous month on PAGE UP", async () => {
+        await input.type("02/03/2019");
+        await component.setProperty("calendarDate", "2019-02-03");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("PageDown");
+        await page.waitForChanges();
+        expect(popupTitleDay.textContent).toBe("March 2019");
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("cell-20190303");
+        await page.keyboard.press("PageUp");
+        await page.waitForChanges();
+        await page.keyboard.press("PageUp");
+        await page.waitForChanges();
+        await page.keyboard.press("PageUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toEqual("cell-20181203");
+    });
+    it("handles HOME and END keys", async () => {
+        await input.type("02/15/2020");
+        await component.setProperty("calendarDate", "2020-02-15");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("Home");
+        await page.waitForChanges();
+        const firstDayOfMonth = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(firstDayOfMonth).toEqual("cell-20200201");
+        await page.keyboard.press("End");
+        await page.waitForChanges();
+        const lastDayOfMonth = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(lastDayOfMonth).toEqual("cell-20200229"); // 2020 is a leap year
+    });
+    it("navigates the calendar with keyboard (day view)", async () => {
+        // left/right: -1 / +1 in the row
+        // up/down
+        await input.type("08/15/2024");
+        await component.setProperty("calendarDate", "2024-08-15");
+        await page.keyboard.press("Tab"); // on the toggle popup btn
+        await page.waitForChanges();
+        await page.keyboard.press("Enter"); // open popup
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        let focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+        await page.waitForChanges();
+        expect(focusedCell).toEqualAttribute("id", "cell-20240814");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+        expect(focusedCell).toEqualAttribute("id", "cell-20240807");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+        expect(focusedCell).toEqualAttribute("id", "cell-20240808");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+        expect(focusedCell).toEqualAttribute("id", "cell-20240815");
+    });
+    it("navigates the calendar with keyboard (month view)", async () => {
+        await input.type("08/15/2024");
+        await component.setProperty("calendarDate", "2024-08-15");
+        await page.keyboard.press("Tab"); // on the toggle popup btn
+        await page.waitForChanges();
+        await page.keyboard.press("Enter"); // open popup
+        await page.keyboard.down("Shift");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab"); // next btn
+        await page.waitForChanges();
+        await page.keyboard.press("Tab"); // popup-title (month + year)
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.up("Shift");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        let focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+        await page.waitForChanges();
+        expect(focusedCell).toEqualAttribute("id", "month-6"); // month is july (7), 0-indexed
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+        expect(focusedCell).toEqualAttribute("id", "month-3");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+        expect(focusedCell).toEqualAttribute("id", "month-4");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+        expect(focusedCell).toEqualAttribute("id", "month-7");
+    });
+    // it("goes to the year view when the month name is clicked", async () => {
+    //  // (i.e. allows selection of a month)
+    // });
+    it("goes to the previous/next month when the arrow button is triggered in day view", async () => {
+        await input.type("11/29/1999");
+        await component.setProperty("calendarDate", "1999-11-29");
+        await page.keyboard.press("Tab"); // on the toggle popup btn
+        await page.waitForChanges();
+        await page.keyboard.press("Enter"); // open popup
+        await page.waitForChanges();
+        await page.keyboard.down("Shift");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab"); // next btn
+        await page.waitForChanges();
+        await page.keyboard.press("Tab"); // popup-title (month + year)
+        await page.waitForChanges();
+        await page.keyboard.press("Tab"); // prev btn
+        await page.waitForChanges();
+        await page.keyboard.up("Shift");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter"); // press prev btn
+        await page.waitForChanges();
+        expect(popup).toHaveClasses(["open", "day-view"]);
+        expect(popupTitleDay.textContent).toBe("October 1999");
+        await page.keyboard.press("Tab"); // popup title btn
+        await page.keyboard.press("Tab"); // next btn
+        await page.keyboard.press("Enter"); // press next btn
+        await page.waitForChanges();
+        await page.keyboard.press("Enter"); // press next btn
+        await page.waitForChanges();
+        expect(popupTitleDay.textContent).toBe("December 1999");
+    });
+    it("goes to the previous/next year when the arrow button is clicked in month view", async () => {
+        await input.type("11/29/1999");
+        await component.setProperty("calendarDate", "1999-11-29");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab"); // on the toggle popup btn
+        await page.waitForChanges();
+        await page.keyboard.press("Enter"); // open popup
+        await page.waitForChanges();
+        await page.keyboard.down("Shift");
+        await page.keyboard.press("Tab"); // next btn
+        await page.waitForChanges();
+        await page.keyboard.press("Tab"); // month view btn
+        await page.waitForChanges();
+        await page.keyboard.up("Shift");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter"); // press month view btn
+        await page.waitForChanges();
+        expect(popup).toHaveClasses(["open", "month-view"]);
+        const title = await popup.find("#popup-title-year");
+        expect(title.textContent).toBe("1999");
+        await page.keyboard.down("Shift");
+        await page.keyboard.press("Tab"); // next btn
+        await page.keyboard.up("Shift");
+        await page.keyboard.press("Enter"); // press next btn
+        await page.waitForChanges();
+        expect(title.textContent).toBe("2000");
+        await page.keyboard.down("Shift");
+        await page.keyboard.press("Tab"); // year btn
+        await page.keyboard.down("Shift");
+        await page.keyboard.press("Tab"); // prev btn
+        await page.keyboard.up("Shift");
+        await page.keyboard.press("Enter"); // press prev btn
+        await page.waitForChanges();
+        expect(title.textContent).toBe("1999");
+        await page.keyboard.press("Enter"); // press prev btn
+        await page.waitForChanges();
+        await page.keyboard.press("Enter"); // press prev btn
+        await page.waitForChanges();
+        expect(title.textContent).toBe("1997");
+    });
+    it("has the aria attributes related to the popup", async () => {
+        // NB "If the element with the aria-expanded attribute controls the expansion of another grouping container
+        // that is not 'owned by' the element, the author SHOULD reference the container by using the aria-controls attribute."
+        // src: https://www.w3.org/TR/wai-aria-1.1/#aria-expanded
+        expect(btn).toHaveAttribute("aria-expanded");
+        // Not sure is aria-haspopup is necessary. If it is present the popup should have a role
+        // if that role is grid (the only role that seems to correspond) then the cells must have
+        // a role of gridcell
+        // https://www.w3.org/TR/wai-aria/#aria-haspopup
+        // expect(btn).toHaveAttribute("aria-haspopup");
+        //Removed aria-controls since the popup comes immediately after the aria-expanded controller:
+        //https://www.heydonworks.com/article/aria-controls-is-poop
+    });
+    it("toggles aria-expanded attribute", async () => {
+        expect(btn).toEqualAttribute("aria-expanded", "false");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(btn).toEqualAttribute("aria-expanded", "true");
+    });
+    it("properly fills the-label on table cells", async () => {
+        // screen reader should read "Thursday, May 10 2018" on focus
+        // screen reader should read "Thursday, May 10 2018, selected" on select
+        await input.type("05/10/2018");
+        await component.setProperty("calendarDate", "2018-05-10");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
+        await page.waitForChanges();
+        // day of the week is read by sr bcse it's the table column
+        expect(focusedCell).toEqualAttribute("aria-label", "Thursday, May 10, 2018");
+        // screen reader should read "Thursday, May 10 2018, selected" on select
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const selCell = await popup.find("[aria-selected='true']");
+        // day of the week is read by sr bcse it's the table column
+        expect(selCell).toEqualAttribute("aria-label", "Thursday, May 10, 2018");
+    });
+    it("aligns dates properly", async () => {
+        // -> check that both 01/01/1999 and 12/31/2100 are in the Friday column
+        // couldn't figure this one out...
+    });
+    it("emits event on input blur", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-datepicker id="dp" label="label"></wm-datepicker>
+      <div id="indicator">no event heard</div>
+      </main></body></html>`);
+        component = await page.find("wm-datepicker");
+        input = await page.find("wm-datepicker >>> input");
+        await page.waitForChanges();
+        await page.evaluate(async () => {
+            const indicator = document.querySelector("#indicator");
+            await document.addEventListener("wmDatepickerInputBlurred", () => (indicator.textContent = "event heard"));
+        });
+        await page.waitForChanges;
+        const indicator = await page.find("#indicator");
+        expect(indicator.textContent).toBe("no event heard");
+        await input.type("05/10/2018");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(indicator.textContent).toBe("event heard");
+    });
+    it("emits event on change", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-datepicker id="dp" label="label"></wm-datepicker>
+      <div id="indicator">events heard: 0</div>
+      </main></body></html>`);
+        component = await page.find("wm-datepicker");
+        input = await page.find("wm-datepicker >>> input");
+        await page.waitForChanges();
+        await page.evaluate(async () => {
+            const indicator = document.querySelector("#indicator");
+            await document
+                .querySelector("wm-datepicker")
+                .addEventListener("change", () => (indicator.textContent =
+                indicator.textContent.slice(0, -1) + (parseInt(indicator.textContent.slice(-1)) + 1)));
+        });
+        await page.waitForChanges;
+        const indicator = await page.find("#indicator");
+        expect(indicator.textContent).toBe("events heard: 0");
+        // user types date
+        await input.type("05/10/2018");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(indicator.textContent).toBe("events heard: 1");
+        // user selects date from calendar
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowRight");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(indicator.textContent).toBe("events heard: 2");
+    });
+    it("emits event with date on cell selection", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-datepicker id="dp" value="12/30/1999" label="label"></wm-datepicker>
+      <div id="indicator"></div>
+      </main></body></html>`);
+        component = await page.find("wm-datepicker");
+        input = await page.find("wm-datepicker >>> input");
+        await page.waitForChanges();
+        await page.evaluate(async () => {
+            const indicator = document.querySelector("#indicator");
+            await document.querySelector("wm-datepicker").addEventListener("wmDatepickerDateSelected", (ev) => (indicator.textContent =
+                //@ts-ignore
+                `date received: ${ev.detail.date}`));
+        });
+        await page.waitForChanges;
+        const indicator = await page.find("#indicator");
+        // user types date
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(indicator.textContent).toBe("date received: 1999-12-30");
+    });
+});
+// Sources:
+// https://watermarkinsights.atlassian.net/browse/DNP-3411
+// https://watermarkinsights.atlassian.net/browse/DNP-4318
+// https://axesslab.com/accessible-datepickers/
+// https://www.w3.org/WAI/PF/HTML/wiki/Datepickers

package/dist/collection/components/datepickers/wm-datepicker.js CHANGED Viewed

@@ -212,23 +212,23 @@ export class DatePicker {
         this.liveRegionEl.textContent = message;
     }
     render() {
-        return (h(Host, { key: 'daac54e642a4c00b37dff5167cf0fd3322b98874', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '0633196770bcd3965a8fe60ecd1972653ed3e25c', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'ba80e128d0345635d90c4641c508d05eb4d3794e', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { key: '4905e937c7e6249537c5ed43f77331883d006794', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { key: '637e35c7f255629aa75cf177822154a1e6e6e7b3', "aria-hidden": "true", class: "required" }, "*"))))), h("div", { key: '8676b6e03022cd8787d0a77a0b3e6c4dd8419b59' }, h("div", { key: 'e9f24478e3beb32f38ef65aff197d7872e1f3d67', class: "single-wrapper input" }, h("input", { key: '4661fedeafd62c45e1aec2aad699faede4d750b6', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: '0a2afc12a5e44bcb8a9deb92c7171945c67289f4', class: "container", id: "wm-container" }, h("button", { key: 'b6b63ef23dee93ff470de4d5a5d2769086bcb808', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
+        return (h(Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))), h("div", null, h("div", { class: "single-wrapper input" }, h("input", { disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "container", id: "wm-container" }, h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
                 id: "date.selectDate",
                 defaultMessage: "Select date",
                 description: "Button text for screen readers.",
-            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: 'debb3ae89f32960a7a269b9f6c951f5bb7bfd874', class: "calendar", title: intl.formatMessage({
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })), h("div", { key: '87ff9723a2960d5725f5f731dcc0d30719a8bb09', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { key: '989a9bc4bd537394bfb2fe1ecd83311bb57187d4', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '3253b7e256dc7137aae2c4c2a79099e0093ecc65', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: '9cacded01a3163bebd249d6ed4601ca9a6c3dfd0', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: 'fe890d55779f0619bc6c144d1fd47cc2cb26fe04', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '71e28a0c1aaa2c1ddce511bfbf0d9cf6794382ab', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })), h("div", { class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '2df13fae273fd2186e35d50ab58d888b45bf0b40', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), h("div", { key: '71ca47b61c3ffd7e19c273ae3e4c68a7f3ef1afd', id: "error", class: "error" }, this.errorMessage), h("div", { key: '5adc31a91d03cd34d01e48a88617481051905341', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        })))), h("div", { id: "error", class: "error" }, this.errorMessage), h("div", { ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
     }
     static get is() { return "wm-datepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -433,17 +433,14 @@ export class DatePicker {
                 "complexType": {
                     "signature": "(inputFormat: string, outputFormat: string, date?: string) => Promise<string>",
                     "parameters": [{
-                            "name": "inputFormat",
-                            "type": "string",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }, {
-                            "name": "outputFormat",
-                            "type": "string",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }, {
-                            "name": "date",
-                            "type": "string | undefined",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {
@@ -462,9 +459,8 @@ export class DatePicker {
                 "complexType": {
                     "signature": "(input?: string) => Promise<boolean>",
                     "parameters": [{
-                            "name": "input",
-                            "type": "string | undefined",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/datepickers/wm-datepicker.spec.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { newSpecPage } from "@stencil/core/testing";
+import * as globalFunctions from "../../global/functions";
+jest.spyOn(globalFunctions, "generateId").mockReturnValue("random-id");
+import { DatePicker } from "./wm-datepicker";
+describe("wm-datepicker", () => {
+    it("builds", async () => {
+        const comp = await newSpecPage({
+            components: [DatePicker],
+            html: '<wm-datepicker label="mock label"></wm-datepicker>',
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("sets input to required", async () => {
+        const page = await newSpecPage({
+            components: [DatePicker],
+            html: `<wm-datepicker label='datepicker' required-field='true'></wm-datepicker>`,
+        });
+        const input = await page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("aria-required", "true");
+    });
+});

package/dist/collection/components/selects/priv-option-list/priv-option-list.js CHANGED Viewed

@@ -391,7 +391,7 @@ export class PrivOptionList {
         });
     }
     render() {
-        return (h("div", { key: '7597806482ea7bf73439a41c22b2dc2d0e3047ff', class: "list-wrapper" }, this.isInNestedSelect && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { key: '5a74fb5303a7631bf76dc5be9ef637d03f9bc132', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: 'bcb6e4c35ebd1ee5a9a4295f5eff61072e2dd8a1' })), h("div", { key: 'c1c11fb35beca1207598239727a61939fe996697', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { class: "list-wrapper" }, this.isInNestedSelect && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null)), h("div", { id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "priv-option-list"; }
     static get originalStyleUrls() {
@@ -675,9 +675,8 @@ export class PrivOptionList {
                 "complexType": {
                     "signature": "(option: HTMLElement) => Promise<void>",
                     "parameters": [{
-                            "name": "option",
-                            "type": "HTMLElement",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {
@@ -700,9 +699,8 @@ export class PrivOptionList {
                 "complexType": {
                     "signature": "(optionToSelect?: \"next\" | \"previous\") => Promise<void>",
                     "parameters": [{
-                            "name": "optionToSelect",
-                            "type": "\"next\" | \"previous\" | undefined",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.css CHANGED Viewed

@@ -353,7 +353,7 @@
   padding-right: 0.5rem;
   font-size: 1.12rem;
 }
-.menu :focus {
+.menu :focus-visible {
   outline: none;
   background: var(--wmcolor-interactive-background-focus);
 }

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.js CHANGED Viewed

@@ -123,6 +123,28 @@ export class NestedSelect {
     closePopupOnEscape() {
         this.close();
     }
+    handleKeyDown(ev) {
+        // when shift tabbing but component is still in focus, close dropdown
+        switch (ev.key) {
+            case "Tab":
+                if (ev.shiftKey) {
+                    this.close();
+                }
+                break;
+            case "ArrowDown":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open();
+                }
+                break;
+            case "ArrowUp":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open(true);
+                }
+                break;
+        }
+    }
     close(returnFocus = true) {
         if (this.isExpanded) {
             this.isExpanded = false;
@@ -135,7 +157,7 @@ export class NestedSelect {
             }, 150);
         }
     }
-    open() {
+    open(focusLast = false) {
         if (!this.isDisabled) {
             this.showClearSelectionButton = this.childOptions.some((o) => o.selected);
             this.isExpanded = true;
@@ -155,14 +177,16 @@ export class NestedSelect {
                     ? spaceAbove
                     : null;
             });
-            window.requestAnimationFrame(() => {
-                this.focusFirstMenuitem();
-            });
-        }
-    }
-    focusFirstMenuitem() {
-        if (this.menuitemEls.length > 0) {
-            this.menuitemEls[0].focus();
+            // scrollIntoView does not work when the container of the element it's called on is not rendered to the page (in our case the dropdown is still closed and has transform: scaleY(0))
+            // when opening the dropdown, scrollIntoView must be delayed to a point where the browser recognizes content within it as able to be scrolled to
+            // in Safari in particular, the soonest this seems to happen is 20ms. The longest we can wait before any jumping in the open dropdown is noticeable is 60ms
+            window.setTimeout(() => {
+                if (this.menuitemEls.length > 0) {
+                    const menuitemToFocus = this.menuitemEls[focusLast ? this.menuitemEls.length - 1 : 0];
+                    menuitemToFocus.scrollIntoView({ block: "nearest" });
+                    menuitemToFocus.focus();
+                }
+            }, 60);
         }
     }
     moveDown(menuitemEl) {
@@ -292,16 +316,16 @@ export class NestedSelect {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { key: 'ed7b96e7d65c756fbbade7dfb2a8ae03da9d3277', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'a2783684ed70b347fd5081b9679cad00c4c73af9', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'dc6f0249ebbcd84df9108fdd2af2e3a7778c2a5a', class: "label-wrapper" }, h("label", { key: '6139f82a9c0a4c9ea569b0d6c74e694ca4924932', class: "label", id: "label", htmlFor: "selectbtn" }, this.label,
+        return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label,
         // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '3198a4409abb6d880330ffadd64022835ee94ba6', class: "button-wrapper" }, h("button", Object.assign({ key: '112c79d84e039c8a9044fc86c2d360a3c88acfec' }, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { key: 'ab91af492aac319d84cb48dccdb127e5649b658b', class: "overflowcontrol" }, h("span", { key: 'fb0370d92612ee4ae365634e8e7f845ef0d6194a', class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), h("div", { key: 'e61b2f40ed449bbb679bd4792197eeb34f23d5f9', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '1490530463cfcdb5d010f722b7f3078e0e036ce0', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: '072c737865ad17a47ff9b70f9ee681542b766674', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight } }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { class: "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight } }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
             return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
                     if (!optgroupEl.disabled) {
                         optgroupEl.isExpanded = !optgroupEl.isExpanded;
                         forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled")));
-        })), h("div", { key: '8e57555b287fb08eb92eac959ddd7259d560e33a', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: 'c22278aca4bd47298fdffeeb148896180e12da1e' }))), h("div", { key: '3180921d3e8e6a9dc7c7c34b5077e17f3da9ef88', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
+        })), h("div", { ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
     }
     static get is() { return "wm-nested-select"; }
     static get encapsulation() { return "shadow"; }
@@ -534,7 +558,7 @@ export class NestedSelect {
             },
             "constrainedMaxHeight": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -596,6 +620,12 @@ export class NestedSelect {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "click",
                 "method": "handleClick",