npm - @watermarkinsights/ripple - Versions diffs - 5.3.0 → 5.3.1-1 - Mend

@watermarkinsights/ripple 5.3.0 → 5.3.1-1

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 (357) hide show

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

@@ -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 CHANGED Viewed

@@ -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": {

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

@@ -0,0 +1,147 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Timepicker } from "./wm-timepicker";
+describe("timepicker", () => {
+    let page;
+    // let timepicker: any;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Timepicker],
+            html: "<wm-timepicker label='timepicker'></wm-timepicker>",
+        });
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("prevents user actions when disabled", async () => {
+        await page.setContent(`<wm-timepicker label='timepicker' disabled></wm-timepicker>`);
+        const input = await page.root.shadowRoot.querySelector("input");
+        const button = await page.root.shadowRoot.querySelector("button");
+        expect(input).toHaveAttribute("disabled");
+        expect(button).toHaveAttribute("disabled");
+    });
+    it("validates input", async () => {
+        const timepicker = new Timepicker();
+        // user passes hour
+        expect(await timepicker.isValidTime("0")).toBe(true);
+        expect(await timepicker.isValidTime("24")).toBe(true);
+        expect(await timepicker.isValidTime("8p")).toBe(true);
+        expect(await timepicker.isValidTime("12 a")).toBe(true);
+        expect(await timepicker.isValidTime("02am")).toBe(true);
+        expect(await timepicker.isValidTime("8:")).toBe(true);
+        // user passes hour and minutes
+        expect(await timepicker.isValidTime("1223")).toBe(true);
+        expect(await timepicker.isValidTime("927a")).toBe(true);
+        expect(await timepicker.isValidTime("12:12pm")).toBe(true);
+        expect(await timepicker.isValidTime("3:45 am")).toBe(true);
+        // rejected
+        expect(await timepicker.isValidTime("6f")).toBe(false);
+        expect(await timepicker.isValidTime("12m")).toBe(false);
+        expect(await timepicker.isValidTime("a")).toBe(false);
+        expect(await timepicker.isValidTime("92")).toBe(false);
+        expect(await timepicker.isValidTime("88:88")).toBe(false);
+        expect(await timepicker.isValidTime("999pm")).toBe(false);
+        expect(await timepicker.isValidTime("o1236")).toBe(false);
+        expect(await timepicker.isValidTime("12:45fm")).toBe(false);
+        expect(await timepicker.isValidTime("12342")).toBe(false);
+        expect(await timepicker.isValidTime("123:")).toBe(false);
+        expect(await timepicker.isValidTime("3:123")).toBe(false);
+        expect(await timepicker.isValidTime("4:60 pm")).toBe(false);
+        // weird edge cases
+        expect(await timepicker.isValidTime("17am")).toBe(false);
+        expect(await timepicker.isValidTime("17pm")).toBe(false);
+        // this is not caught by the regex, so we handle it later
+        expect(await timepicker.isValidTime("0pm")).toBe(true);
+    });
+    it("reformats", async () => {
+        const timepicker = new Timepicker();
+        expect(await timepicker.reformatTime("12", "00:00")).toBe("12:00 AM");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("12", "12:00am")).toBe("12:00 AM");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("12", "12:00pm")).toBe("12:00 PM");
+        expect(await timepicker.reformatTime("12", "24:00")).toBe("12:00 AM");
+        expect(await timepicker.reformatTime("12", "17:00")).toBe("05:00 PM");
+        expect(await timepicker.reformatTime("12", "7:00 am")).toBe("07:00 AM");
+        expect(await timepicker.reformatTime("12", "7 : 35")).toBe("07:35 AM");
+        expect(await timepicker.reformatTime("24", "0:00")).toBe("00:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "12:00am")).toBe("00:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "12:00pm")).toBe("12:00");
+        expect(await timepicker.reformatTime("24", "24:00")).toBe("00:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "1700")).toBe("17:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "700a")).toBe("07:00");
+        expect(await timepicker.reformatTime("24", "7 :00 pm")).toBe("19:00");
+        expect(await timepicker.reformatTime("24", "17: 35")).toBe("17:35");
+    });
+    it("finds nearest time interval", async () => {
+        const timepicker = new Timepicker();
+        expect(await timepicker.findNearestTimeInterval("00:07")).toBe("00:00");
+        expect(await timepicker.findNearestTimeInterval("01:08")).toBe("01:15");
+        expect(await timepicker.findNearestTimeInterval("01:15")).toBe("01:15");
+        expect(await timepicker.findNearestTimeInterval("02:22")).toBe("02:15");
+        expect(await timepicker.findNearestTimeInterval("03:23")).toBe("03:30");
+        expect(await timepicker.findNearestTimeInterval("03:30")).toBe("03:30");
+        expect(await timepicker.findNearestTimeInterval("04:37")).toBe("04:30");
+        expect(await timepicker.findNearestTimeInterval("15:38")).toBe("15:45");
+        expect(await timepicker.findNearestTimeInterval("15:45")).toBe("15:45");
+        expect(await timepicker.findNearestTimeInterval("16:52")).toBe("16:45");
+        expect(await timepicker.findNearestTimeInterval("17:53")).toBe("18:00");
+        expect(await timepicker.findNearestTimeInterval("18:00")).toBe("18:00");
+        expect(await timepicker.findNearestTimeInterval("23:59")).toBe("00:00");
+        // edge case regarding leading zeroes
+        expect(await timepicker.findNearestTimeInterval("09:59")).toBe("10:00");
+    });
+    it("splits time", () => {
+        const timepicker = new Timepicker();
+        expect(timepicker.splitTime("5:37")).toStrictEqual([5, "37", undefined]);
+        expect(timepicker.splitTime("5:37 am")).toStrictEqual([5, "37", "am"]);
+        expect(timepicker.splitTime("09:00")).toStrictEqual([9, "00", undefined]);
+        expect(timepicker.splitTime("13:52")).toStrictEqual([13, "52", undefined]);
+        // edge case
+        //@ts-ignore
+        expect(timepicker.splitTime("0pm")).toStrictEqual([0, "00", "AM"]);
+    });
+    it("generates times", () => {
+        const timepicker = new Timepicker();
+        //prettier-ignore
+        expect(timepicker.generateTimeIntervals()).toStrictEqual([
+            "00:00", "00:15", "00:30", "00:45",
+            "01:00", "01:15", "01:30", "01:45",
+            "02:00", "02:15", "02:30", "02:45",
+            "03:00", "03:15", "03:30", "03:45",
+            "04:00", "04:15", "04:30", "04:45",
+            "05:00", "05:15", "05:30", "05:45",
+            "06:00", "06:15", "06:30", "06:45",
+            "07:00", "07:15", "07:30", "07:45",
+            "08:00", "08:15", "08:30", "08:45",
+            "09:00", "09:15", "09:30", "09:45",
+            "10:00", "10:15", "10:30", "10:45",
+            "11:00", "11:15", "11:30", "11:45",
+            "12:00", "12:15", "12:30", "12:45",
+            "13:00", "13:15", "13:30", "13:45",
+            "14:00", "14:15", "14:30", "14:45",
+            "15:00", "15:15", "15:30", "15:45",
+            "16:00", "16:15", "16:30", "16:45",
+            "17:00", "17:15", "17:30", "17:45",
+            "18:00", "18:15", "18:30", "18:45",
+            "19:00", "19:15", "19:30", "19:45",
+            "20:00", "20:15", "20:30", "20:45",
+            "21:00", "21:15", "21:30", "21:45",
+            "22:00", "22:15", "22:30", "22:45",
+            "23:00", "23:15", "23:30", "23:45",
+        ]);
+    });
+    it("renders error", async () => {
+        await page.setContent(`<wm-timepicker label='timepicker' error-message="There is an error."></wm-timepicker>`);
+        const errorEl = page.root.shadowRoot.querySelector(".error");
+        expect(errorEl.textContent).toBe("There is an error.");
+    });
+    it("sets input to required", async () => {
+        await page.setContent(`<wm-timepicker label='timepicker' required-field='true'></wm-timepicker>`);
+        const input = await page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("aria-required", "true");
+    });
+});

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

@@ -0,0 +1,69 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-toggletip", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+    });
+    it("passes Axe checks", async () => {
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+        <wm-toggletip label='More information' tooltip='Further explanation'>Click me</wm-toggletip>
+        </main></body></html>`);
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("delegates focus", async () => {
+        await page.setContent("<wm-toggletip label='label' tooltip='Text'></wm-toggletip>");
+        const component = await page.find("wm-toggletip");
+        component.focus();
+        await page.waitForChanges();
+        let activeElNodeName = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.nodeName);
+        expect(activeElNodeName).toBe("BUTTON");
+    });
+    // Enter or click opens tooltip, no change in focus
+    // Tab, escape close tooltip
+    it("opens and closes properly", async () => {
+        await page.setContent(`<wm-toggletip label='More information' tooltip='Further explanation'></wm-toggletip>`);
+        const toggletip = await page.find("wm-toggletip >>> .toggletip");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(toggletip).not.toHaveClass("hidden");
+        // check focus remains on button
+        const activeElNodeName = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.nodeName);
+        expect(activeElNodeName).toEqual("BUTTON");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        expect(toggletip).toHaveClass("hidden");
+        await page.click("wm-toggletip");
+        await page.waitForChanges();
+        expect(toggletip).not.toHaveClass("hidden");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(toggletip).toHaveClass("hidden");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.mouse.click(-10, -10);
+        await page.waitForChanges();
+        expect(toggletip).toHaveClass("hidden");
+    });
+    // test to make sure liveregion is updated properly
+    it("updates liveregion", async () => {
+        await page.setContent(`<wm-toggletip label='More information' tooltip='Further explanation'></wm-toggletip>`);
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const liveRegion = await page.find("wm-toggletip >>> .live-region");
+        expect(liveRegion.textContent).toBe("Further explanation");
+    });
+    it("renders a tooltip", async () => {
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><div id="tooltip-container"><div id="wm-tooltip" popover="manual" class="wm-tooltip" aria-hidden="true"></div></div><main><h1>Title</h1>
+        <wm-toggletip label='More information' tooltip='Further explanation'>Click me</wm-toggletip>
+        </main></body></html>`);
+        await page.click("wm-toggletip");
+        const tooltip = await page.find("#wm-tooltip");
+        expect(tooltip.textContent).toEqual("More information");
+    });
+});

package/dist/collection/components/wm-toggletip/wm-toggletip.js CHANGED Viewed

@@ -97,9 +97,9 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: '8f5da43befa9de791cb44afba532182f6df0a81d', class: `size-${this.targetSize}` }, h("button", { key: '81c79d18ff76953fbf9dce6192011085ccb296ba', class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
+        return (h(Host, { class: `size-${this.targetSize}` }, h("button", { class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
-            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { key: '3b183d1c1624cbadb6b774c55c0debcb99785c6d', ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { key: '45e77332889bdfc552906127f24452ee0c97fe27', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,21 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Toggletip } from "./wm-toggletip";
+describe("toggletip", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Toggletip],
+            html: `<wm-toggletip label="More information" tooltip="Further explanation"></wm-toggletip>`,
+        });
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has proper aria roles & attributes", async () => {
+        const liveRegion = page.root.shadowRoot.querySelector(".live-region");
+        const button = page.root.shadowRoot.querySelector("button");
+        expect(liveRegion).toEqualAttribute("role", "status");
+        expect(button).toEqualAttribute("type", "button");
+        expect(button).toEqualAttribute("aria-label", "More information");
+    });
+});

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

@@ -0,0 +1,70 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-uploader", () => {
+    let page, input, label;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-uploader button-text="Upload new document">
+        <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="2020-01-28T22:29:10.397Z"></wm-file>
+        <wm-file id="file2" name="Second file" type="jpeg" last-updated="2019-02-14T12:21:05.397Z"></wm-file>
+      </wm-uploader>
+      </main></body></html>`);
+        input = await page.find("wm-uploader >>> input[type='file']");
+        label = await page.find("wm-uploader >>> label");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("renders the component", async () => {
+        expect(input).not.toBeNull();
+        expect(label).not.toBeNull();
+    });
+    it("focuses previous file when deleting with the keyboard", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-uploader button-text="Upload new document">
+        <wm-file id="file1" name="First file" type="pdf" file-actions="preview delete"></wm-file>
+        <wm-file id="file2" name="Second file" type="pdf" file-actions="delete"></wm-file>
+      </wm-uploader>
+      </main></body></html>`);
+        await page.waitForChanges();
+        let fileEls = await page.findAll("wm-file");
+        let secondFileEl = fileEls[1];
+        // inital check of file count
+        expect(fileEls.length).toBe(2);
+        // user must be tabbing for these changes to occur
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        // check focused element is last file, delete button
+        let activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toBe("file2");
+        let activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
+        expect(activeElButtonType).toBe("delete-button");
+        let mockFileDeleteEvent = new CustomEvent("wmFileDelete");
+        //@ts-ignore
+        mockFileDeleteEvent.target = secondFileEl;
+        secondFileEl.dispatchEvent(mockFileDeleteEvent);
+        await page.evaluate(() => { var _a; return (_a = document.getElementById("file2")) === null || _a === void 0 ? void 0 : _a.remove(); });
+        await page.waitForChanges();
+        // confirm file has been removed
+        fileEls = await page.findAll("wm-file");
+        expect(fileEls.length).toBe(1);
+        // check focused element is last file, delete button
+        activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toBe("file1");
+        activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
+        expect(activeElButtonType).toBe("delete-button");
+    });
+    //  it("disables the button dynamically", async () => {
+    // disabled when maxed out
+    // disabled while a file is uploading
+    // not disabled after upload
+    // });
+});

package/dist/collection/components/wm-uploader/wm-uploader.js CHANGED Viewed

@@ -195,9 +195,9 @@ export class Uploader {
         return (h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, h("div", { id: "label", class: `label` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))));
     }
     render() {
-        return (h(Host, { key: '4f9a5f1221aa84bad9e734bfba6a87f89fcdfd84' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: '59f21688992efe6da96d837efee78d65db18f8d4', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (h(Host, null, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), h("div", { key: '1e68b8375c3d41706c5b84af7485d75f99e35dd9', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }