@watermarkinsights/ripple 5.3.0-0 → 5.3.0-2

package/dist/collection/components/wm-tag-input/wm-tag-input.spec.js

@@ -0,0 +1,195 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TagInput } from "./wm-tag-input";
+import { TagOption } from "./wm-tag-option/wm-tag-option";
+import * as globalFuncs from "../../global/functions";
+jest.spyOn(globalFuncs, "generateId");
+// @ts-ignore
+globalFuncs.generateId.mockImplementation(() => "random-id");
+// mock observers
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+global.MutationObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+// mockComputedStyle, component measures the placeholder on render to properly position the input
+global.getComputedStyle = jest
+    .fn()
+    .mockImplementation(() => ({
+    paddingLeft: "0px",
+    paddingRight: "0px",
+    marginLeft: "0px",
+    marginRight: "0px",
+}));
+describe("taginput", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [TagInput, TagOption],
+            html: `<wm-tag-input id="input" label="label">
+        <wm-tag-option>one</wm-tag-option>
+        <wm-tag-option>two</wm-tag-option>
+        <wm-tag-option>three</wm-tag-option>
+        <wm-tag-option>four</wm-tag-option>
+      </wm-tag-input>`,
+        });
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has right aria roles", async () => {
+        page = await newSpecPage({
+            components: [TagInput, TagOption],
+            html: `<wm-tag-input label="label" info="info text">
+        <wm-tag-option selected>one</wm-tag-option>
+        <wm-tag-option>two</wm-tag-option>
+        <wm-tag-option selected>three</wm-tag-option>
+        <wm-tag-option>four</wm-tag-option>
+      </wm-tag-input>`,
+        });
+        const label = await page.root.shadowRoot.querySelector("label");
+        expect(label.textContent).toBe("label");
+        const input = await page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("role", "combobox");
+        expect(input).toEqualAttribute("aria-label", "label 50 characters allowed.");
+        const helpText = await page.root.shadowRoot.querySelector(".help-text");
+        expect(input).toEqualAttribute("aria-describedby", helpText.id);
+        const dropdown = await page.root.shadowRoot.querySelector(".dropdown");
+        expect(dropdown).toEqualAttribute("role", "listbox");
+        expect(dropdown).toHaveAttribute("aria-multiselectable");
+        const options = await page.root.shadowRoot.querySelectorAll(".option");
+        options.forEach((option) => {
+            expect(option).toEqualAttribute("role", "option");
+        });
+        const tagArea = await page.root.shadowRoot.querySelector(".tag-area");
+        expect(tagArea).toEqualAttribute("role", "listbox");
+        expect(tagArea).toEqualAttribute("aria-label", "label tag selection. Press Backspace or Delete to remove a tag.");
+        expect(tagArea).toEqualAttribute("aria-describedby", "info max-tags");
+        expect(tagArea).toEqualAttribute("aria-orientation", "horizontal");
+        const tags = await page.root.shadowRoot.querySelectorAll(".tag");
+        tags.forEach((tag) => {
+            expect(tag).toEqualAttribute("role", "option");
+        });
+    });
+    it("changes help text when options are not provided", async () => {
+        // not editable with options
+        page = await newSpecPage({
+            components: [TagInput, TagOption],
+            html: `<wm-tag-input label="label" add-new="false">
+        <wm-tag-option>One</wm-tag-option>
+        <wm-tag-option>Two</wm-tag-option>
+        <wm-tag-option>Three</wm-tag-option>
+      </wm-tag-input>`,
+        });
+        const el = page.root;
+        let helpText = await el.shadowRoot.querySelector(".help-text");
+        expect(helpText.textContent).toBe("Search and select a tag.");
+        // editable with options
+        page = await newSpecPage({
+            components: [TagInput, TagOption],
+            html: `<wm-tag-input label="label">
+        <wm-tag-option>One</wm-tag-option>
+        <wm-tag-option>Two</wm-tag-option>
+        <wm-tag-option>Three</wm-tag-option>
+      </wm-tag-input>`,
+        });
+        helpText = await page.root.shadowRoot.querySelector(".help-text");
+        expect(helpText.textContent).toBe("Search and select a tag. Press the Enter or Comma key to add a new tag.");
+        // editable without options
+        page = await newSpecPage({
+            components: [TagInput, TagOption],
+            html: `<wm-tag-input label="label"></wm-tag-input>`,
+        });
+        helpText = await page.root.shadowRoot.querySelector(".help-text");
+        expect(helpText.textContent).toBe(" Press the Enter or Comma key to add a new tag.");
+    });
+    it("shows the appropriate default placeholder text", async () => {
+        // editable with options
+        await page.setContent(`<wm-tag-input label="label">
+        <wm-tag-option>One</wm-tag-option>
+        <wm-tag-option>Two</wm-tag-option>
+    </wm-tag-input>`);
+        let input = await page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("placeholder", "Add or search for a tag");
+        // editable without options
+        page = await newSpecPage({
+            components: [TagInput, TagOption],
+            html: `<wm-tag-input label="label"></wm-tag-input>`,
+        });
+        input = await page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("placeholder", "Add a new tag");
+        // not editable
+        page = await newSpecPage({
+            components: [TagInput, TagOption],
+            html: `<wm-tag-input label="label" add-new="false">
+        <wm-tag-option>One</wm-tag-option>
+        <wm-tag-option>Two</wm-tag-option>
+        <wm-tag-option>Three</wm-tag-option>
+      </wm-tag-input>`,
+        });
+        input = await page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("placeholder", "Search and select a tag");
+    });
+    it("throws error if no label prop is passed", async () => {
+        const mockConsoleError = (console.error = jest.fn());
+        await page.setContent(`<wm-tag-input></wm-tag-input>`);
+        expect(mockConsoleError).toHaveBeenCalledWith("wm-tag-input must have a label property");
+        jest.restoreAllMocks();
+    });
+    describe("handles announcements", () => {
+        it("announces live region notifications", async () => {
+            // announce
+            const component = new TagInput();
+            const div = document.createElement("div");
+            div.textContent = "";
+            //@ts-ignore
+            component.liveRegionEl = div;
+            component.announce("Message");
+            expect(component.liveRegionMessage).toBe("Message");
+        });
+        it("announces existing options", async () => {
+            // announceExistingOptions
+            const component = new TagInput();
+            const element1 = {};
+            const element2 = {};
+            const mockAnnounce = (component.announce = jest.fn());
+            jest.spyOn(component, "optionEls", "get").mockReturnValue([element1, element2]);
+            const spyRequestAnimationFrame = jest
+                .spyOn(window, "requestAnimationFrame")
+                //@ts-ignore
+                .mockImplementation((cb) => cb());
+            component.announceExistingOptions();
+            expect(spyRequestAnimationFrame).toHaveBeenCalledTimes(1);
+            expect(mockAnnounce).toHaveBeenCalledTimes(1);
+            expect(mockAnnounce).toHaveBeenLastCalledWith("2 existing options.");
+            jest.clearAllMocks();
+            jest.spyOn(component, "optionEls", "get").mockReturnValue([element1]);
+            component.announceExistingOptions();
+            expect(spyRequestAnimationFrame).toHaveBeenCalledTimes(1);
+            expect(mockAnnounce).toHaveBeenCalledTimes(1);
+            expect(mockAnnounce).toHaveBeenLastCalledWith("1 existing option.");
+            jest.clearAllMocks();
+            jest.spyOn(component, "optionEls", "get").mockReturnValue([]);
+            component.announceExistingOptions();
+            expect(spyRequestAnimationFrame).toHaveBeenCalledTimes(1);
+            expect(mockAnnounce).toHaveBeenCalledTimes(1);
+            expect(mockAnnounce).toHaveBeenLastCalledWith("0 existing options.");
+            jest.restoreAllMocks();
+        });
+        it("announces character limits warnings", async () => {
+            const component = new TagInput();
+            let message = component.generateCharacterLimitWarning(0, 50);
+            expect(message).toBe("0 of 50 characters entered.");
+            message = component.generateCharacterLimitWarning(30, 50);
+            expect(message).toBe("30 of 50 characters entered.");
+            message = component.generateCharacterLimitWarning(50, 50);
+            expect(message).toBe("50 of 50 characters entered. No additional characters will be entered.");
+            message = component.generateCharacterLimitWarning(75, 50);
+            expect(message).toBe("75 of 50 characters entered. No additional characters will be entered.");
+        });
+    });
+});

package/dist/collection/components/wm-textarea/wm-textarea.e2e.js

@@ -0,0 +1,41 @@
+import AxePuppeteer from "@axe-core/puppeteer";
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-textarea", () => {
+    // ts throws erroneous warning about vars being unused...
+    // @ts-ignore
+    let page, el, textarea;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-textarea label='label' character-limit="20"></wm-textarea>
+      </main></body></html>`);
+        el = await page.find("wm-textarea");
+        textarea = await page.find("wm-textarea >>> textarea");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("updates character count on text entry", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.type("1234");
+        await page.waitForChanges();
+        const characterCount = await page.find("wm-textarea >>> .character-count");
+        expect(characterCount.textContent).toBe("4/20");
+    });
+    it("emits event on value change", async () => {
+        const eventSpy = await el.spyOnEvent("wmTextareaValueChanged");
+        await el.focus();
+        await page.keyboard.type("1234");
+        await page.waitForChanges();
+        expect(eventSpy).toHaveReceivedEventTimes(0);
+        await page.keyboard.press("Tab");
+        expect(eventSpy).toHaveReceivedEventTimes(1);
+        await el.focus();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        // expect event to still have fired only once, because value has not changed
+        expect(eventSpy).toHaveReceivedEventTimes(1);
+    });
+});

package/dist/collection/components/wm-textarea/wm-textarea.js

@@ -65,7 +65,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: 'a5997b0d5dce20f77941690731ed6ba5cd1d9858', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'aad504a8a1d66943b608d7b3bd835bca3c14cad1', class: "label-wrapper" }, h("label", { key: '4e731d38bc61ff74c8fa8c02a4919c1086fc94d8', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '4e57dca225b03c470452c4136e294a2ba2615cf9', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: 'f17ef4ee28a329a3655f4a29f736518465a7594d', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '695981592b51ff1b27d80018024fa9605dbce6a4', class: "inner-wrapper" }, h("div", { key: '0b0d2659db296f2f83902a7ea0c84b09496be4e3', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '7a7eb761ee1da371a506741fb2a8808c8ad37018', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '501a8e2e33bc0ce87b02d6c094f20767247fb080', id: "info", class: "info" }, this.info)), h("div", { key: '5d6a559dc433c567fdcf0a2b21fa4d69bfbd2d25', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'ee6a8851e53375394b185bf14a77f2c6cca79d2a', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: "inner-wrapper" }, h("div", { class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { id: "info", class: "info" }, this.info)), h("div", { id: "error", class: "error-message" }, this.errorMessage), h("div", { id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-textarea/wm-textarea.spec.js

@@ -0,0 +1,79 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Textarea } from "./wm-textarea";
+// mock observers
+// global.ResizeObserver = jest.fn().mockImplementation(() => ({
+//   observe: jest.fn(),
+//   unobserve: jest.fn(),
+//   disconnect: jest.fn(),
+// }));
+// global.MutationObserver = jest.fn().mockImplementation(() => ({
+//   observe: jest.fn(),
+//   unobserve: jest.fn(),
+//   disconnect: jest.fn(),
+// }));
+describe("textarea", () => {
+    let page;
+    let component;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label"></wm-textarea>`,
+        });
+        component = page.root;
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has right aria roles", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" disabled required-field></wm-textarea>`,
+        });
+        const textarea = await page.root.shadowRoot.querySelector("textarea");
+        expect(textarea).toEqualAttribute("aria-describedby", "info error");
+        expect(textarea).toHaveAttribute("disabled");
+        const error = await page.root.shadowRoot.querySelector("#error");
+        expect(error).toEqualAttribute("aria-live", "assertive");
+        const livePolite = await page.root.shadowRoot.querySelector("#live-polite");
+        expect(livePolite).toEqualAttribute("aria-live", "polite");
+    });
+    it("sets initial value from textcontent", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label">Initial value</wm-textarea>`,
+        });
+        component = page.root;
+        expect(component.value).toBe("Initial value");
+    });
+    it("renders character limit", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" character-limit="20">Hello</wm-textarea>`,
+        });
+        component = page.root;
+        const characterLimitArea = await page.root.shadowRoot.querySelector(".character-count");
+        expect(characterLimitArea.textContent).toBe("5/20");
+    });
+    it("properties override height and width", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" input-width="200px" input-height="300px"></wm-textarea>`,
+        });
+        component = page.root;
+        const textarea = await component.shadowRoot.querySelector("textarea");
+        expect(textarea).toEqualAttribute("style", "height: 300px;");
+        const widthWrapper = await component.shadowRoot.querySelector(".inputfield-wrapper");
+        expect(widthWrapper).toEqualAttribute("style", "width: 200px;");
+    });
+    it("displays info and error-message properties", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" info="example info text" error-message="example error text"></wm-textarea>`,
+        });
+        component = page.root;
+        const info = await component.shadowRoot.querySelector("#info");
+        expect(info.textContent).toBe("example info text");
+        const error = await component.shadowRoot.querySelector("#error");
+        expect(error.textContent).toBe("example error text");
+    });
+});

package/dist/collection/components/wm-timepicker/wm-timepicker.e2e.js

@@ -0,0 +1,163 @@
+import AxePuppeteer from "@axe-core/puppeteer";
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-timepicker", () => {
+    let page, input;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-timepicker label="timepicker" dropdown-time="09:00"></wm-timepicker>
+      </main></body></html>`);
+        input = await page.find("wm-timepicker >>> input");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("emits input blurred event", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-timepicker label="timepicker"></wm-timepicker>
+      <div id="indicator">no event heard</div>
+      </main></body></html>`);
+        input = await page.find("wm-timepicker >>> input");
+        await page.waitForChanges();
+        await page.evaluate(async () => {
+            const indicator = document.querySelector("#indicator");
+            await document.addEventListener("wmTimepickerInputBlurred", () => (indicator.textContent = "event heard"));
+        });
+        await page.waitForChanges;
+        let indicator = await page.find("#indicator");
+        expect(indicator.textContent).toBe("no event heard");
+        await input.type("522");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(indicator.textContent).toBe("event heard");
+    });
+    it("opens to preselected time", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-timepicker label="timepicker" preselected="14:15"></wm-timepicker>
+      </main></body></html>`);
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const nineAm = await page.find("wm-timepicker >>> li#option58");
+        expect(nineAm).toEqualAttribute("tabindex", 0);
+    });
+    it("opens next option with down arrow key", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        const nineFifteenAm = await page.find("wm-timepicker >>> li#option38");
+        expect(nineFifteenAm).toEqualAttribute("tabindex", 0);
+    });
+    it("opens previous option with up arrow key", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        const eightFourtyFiveAm = await page.find("wm-timepicker >>> li#option36");
+        expect(eightFourtyFiveAm).toEqualAttribute("tabindex", 0);
+    });
+    it("navigates through the dropdown with keyboard", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const nineAm = await page.find("wm-timepicker >>> li#option37");
+        const nineFifteenAm = await page.find("wm-timepicker >>> li#option38");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(nineFifteenAm).toEqualAttribute("tabindex", 0);
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        expect(nineAm).toEqualAttribute("tabindex", 0);
+    });
+    it("emits timeSelected event with time", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-timepicker label="timepicker" value="03:15 PM" preselected="15:15"></wm-timepicker>
+      <div id="indicator">no event heard</div>
+      </main></body></html>`);
+        input = await page.find("wm-timepicker >>> input");
+        await page.waitForChanges();
+        await page.evaluate(async () => {
+            const indicator = document.querySelector("#indicator");
+            await document.addEventListener("wmTimepickerTimeSelected", (ev) => (indicator.textContent = `event heard: ${ev.detail.time}`));
+        });
+        await page.waitForChanges;
+        let indicator = await page.find("#indicator");
+        expect(indicator.textContent).toBe("no event heard");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(indicator.textContent).toBe("event heard: 15:15");
+    });
+    it("closes dropdown on Escape and Tab", async () => {
+        const dropdown = await page.find("wm-timepicker >>> ul.options");
+        expect(dropdown).not.toHaveClass("open");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(dropdown).toHaveClass("open");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        expect(dropdown).not.toHaveClass("open");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(dropdown).toHaveClass("open");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(dropdown).not.toHaveClass("open");
+    });
+    it("closes dropdown when clicking outside component", async () => {
+        const dropdown = await page.find("wm-timepicker >>> ul.options");
+        expect(dropdown).not.toHaveClass("open");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(dropdown).toHaveClass("open");
+        await page.mouse.click(-10, -10);
+        await page.waitForChanges();
+        expect(dropdown).not.toHaveClass("open");
+    });
+    it("handles Home and End keys", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const firstOption = await page.find("wm-timepicker >>> li#option1");
+        await page.keyboard.press("Home");
+        await page.waitForChanges();
+        expect(firstOption).toEqualAttribute("tabindex", 0);
+        const lastOption = await page.find("wm-timepicker >>> li#option96");
+        await page.keyboard.press("End");
+        await page.waitForChanges();
+        expect(lastOption).toEqualAttribute("tabindex", 0);
+    });
+});

package/dist/collection/components/wm-timepicker/wm-timepicker.js

@@ -275,13 +275,13 @@ export class Timepicker {
         return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (h(Host, { key: '58694542ea396f6874a0889ac5fdd608477e01f4', onBlur: () => this.close(false) }, h("div", { key: '182422d05a01af98eb1fcf95817cec6ee95a81b9', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: 'ac2f32d2e2e35fb5014a5e8c44bdecc3e3963c0e', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '6cd54b3142c4ca0a88bf8e22a2074f67f72e1423', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '41f2f167ccbfbd81c7d37396f25c22a5db4a5baf', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: '9c9f880595e1de671d24b327a47e17e03a056ab6' }, h("div", { key: '7a58504c80378f052e7da86692f53630c15b6837', class: "inner-wrapper" }, h("input", { key: 'df44714cfb58a6ef9e49d548b732f1daa70dddfa', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: '40e964286b360d9c86c54065c2acf6f761ad6a03', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
+        return (h(Host, { onBlur: () => this.close(false) }, h("div", { class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))), h("div", null, h("div", { class: "inner-wrapper" }, h("input", { id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
             // This addresses an issue in Safari, where clicking buttons does not focus them
             // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
             onMouseDown: (ev) => {
                 ev.preventDefault();
                 this.buttonEl.focus();
-            } }, h("span", { key: 'd6912b075f5ad8396b82b6d8f562e41698cfe62f', class: "clock" })), h("ul", { key: '458b1c42f853567c26a32f6538ed6c6ba629c38f', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '2c561ba815cf53ecb94e21864be52c72fc7b8c13', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '6f216c9a6539cf1800dfe944d762e31dc9c3422e', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { class: "clock" })), h("ul", { class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { id: "error", class: "error" }, this.errorMessage)), h("div", { id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get is() { return "wm-timepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -468,9 +468,8 @@ export class Timepicker {
                 "complexType": {
                     "signature": "(input: string) => Promise<boolean>",
                     "parameters": [{
-                            "name": "input",
-                            "type": "string",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {
@@ -489,13 +488,11 @@ export class Timepicker {
                 "complexType": {
                     "signature": "(format: \"12\" | \"24\", time: TimeFormat12 | TimeFormat24) => Promise<string>",
                     "parameters": [{
-                            "name": "format",
-                            "type": "\"12\" | \"24\"",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }, {
-                            "name": "time",
-                            "type": "string",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {