@watermarkinsights/ripple 5.12.0-8 → 5.12.0

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

@@ -0,0 +1,54 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Menuitem } from "./wm-menuitem";
+describe("wm-menuitem", () => {
+    it("builds", async () => {
+        const comp = await newSpecPage({
+            components: [Menuitem],
+            html: "<wm-menuitem><wm-menuitem>",
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("handles disabled onClick function", async () => {
+        const page = await newSpecPage({
+            components: [Menuitem],
+            html: "<wm-menuitem><wm-menuitem>",
+        });
+        const menuItem = page.root;
+        const onClickFunc = () => console.log("Message");
+        menuItem.onclick = onClickFunc;
+        expect(menuItem.onclick).toEqual(onClickFunc);
+        menuItem.disabled = true;
+        expect(menuItem.onclick).toBe(null);
+        menuItem.disabled = false;
+        expect(menuItem.onclick).toEqual(onClickFunc);
+    });
+    it("renders description if prop is present", async () => {
+        const page = await newSpecPage({
+            components: [Menuitem],
+            html: "<wm-menuitem description='Description here'><wm-menuitem>",
+        });
+        const descriptionEl = page.root.shadowRoot.querySelector(".description");
+        expect(descriptionEl === null || descriptionEl === void 0 ? void 0 : descriptionEl.textContent).toBe("Description here");
+    });
+    describe("error throwing", () => {
+        it("throws error when description is over character limit", async () => {
+            const mockFunc = jest.fn();
+            console.error = mockFunc;
+            const description = "q".repeat(200);
+            await newSpecPage({
+                components: [Menuitem],
+                html: `<wm-menuitem description='${description}'></wm-menuitem>`,
+            });
+            expect(mockFunc).toHaveBeenCalledWith("wm-menuitem description is above the character limit of 100");
+        });
+        it("throws error when description and icon props are used simultaneously", async () => {
+            const mockFunc = jest.fn();
+            console.error = mockFunc;
+            await newSpecPage({
+                components: [Menuitem],
+                html: `<wm-menuitem description='Example description' icon="f3eb"></wm-menuitem>`,
+            });
+            expect(mockFunc).toHaveBeenCalledWith("wm-menuitems with descriptions do not support the use of icons");
+        });
+    });
+});

package/dist/collection/components/wm-modal/wm-modal-footer.css

@@ -828,25 +828,18 @@ wm-modal-footer .wm-wrapper {
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
 }
-@media only screen and (max-width: 650px) {
-  wm-modal-footer .wm-wrapper.footer-text {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-wm-modal-footer .wm-wrapper wm-button + wm-button {
-  margin-left: 1rem;
-}
-wm-modal-footer .wm-wrapper .wm-info {
+wm-modal-footer .wm-info {
   font-size: 0.875rem;
   font-style: italic;
 }
-@media only screen and (max-width: 650px) {
-  wm-modal-footer .wm-wrapper .wm-info {
-    padding-bottom: 0.625rem;
-  }
+wm-modal-footer .wm-button-collection {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
 }
-wm-modal-footer .wm-wrapper .wm-info:focus {
-  outline: none;
+wm-modal-footer wm-button + wm-button {
+  margin-left: 0;
 }

package/dist/collection/components/wm-modal/wm-modal-footer.js

@@ -30,7 +30,7 @@ export class ModalFooter {
         }
     }
     render() {
-        return (h("div", { key: '10a9f1254c1b643ba9f89ac1ee0fae7858de6c9a', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '0952172dfbf984b1bade03bd46961ea87dcbf0fb', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'cadbb6b7d1049d8569622d942a8ef729b7e3a433', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'd200b5ab6bf7345416584317b472644107beb221', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: 'a549abb82c93025ad46f15efd73e0e064819d00c', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
+        return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
     }
     static get is() { return "wm-modal-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal/wm-modal-footer.spec.js

@@ -0,0 +1,11 @@
+import { ModalFooter } from "./wm-modal-footer";
+describe("wm-modal-footer", () => {
+    it("has the right props", () => {
+        const modal = new ModalFooter();
+        expect(modal).toHaveProperty("secondaryText");
+        expect(modal).toHaveProperty("primaryText");
+        expect(modal).toHaveProperty("infoText");
+        expect(modal).toHaveProperty("primaryActionDisabled");
+        expect(modal).toHaveProperty("deleteStyle");
+    });
+});

package/dist/collection/components/wm-modal/wm-modal-header.css

@@ -828,6 +828,7 @@ wm-modal-header .wm-wrapper {
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
+  column-gap: 1rem;
 }
 wm-modal-header .wm-wrapper .title {
   margin: 0;
@@ -840,7 +841,4 @@ wm-modal-header .wm-wrapper .title .subtitle {
   display: block;
   font-size: 0.875rem;
   font-weight: normal;
-}
-wm-modal-header .wm-wrapper .title:focus {
-  outline: none;
 }

package/dist/collection/components/wm-modal/wm-modal-header.js

@@ -21,7 +21,7 @@ export class ModalHeader {
         parentModal.emitCloseEvent();
     }
     render() {
-        return (h(Host, { key: 'b47b9c7312835b262a989a6767e22cb8989e11fa' }, h("div", { key: 'f630fc530287907277206152fd5f136464dfd4c1', class: "wm-wrapper" }, h("div", { key: '1905201146dc1822f4f94a8b6cfa555d8e8b48e4' }, h("h2", { key: '48c5208a4901e205fa75a97090ff94834cea72b2', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'b446719f776cad720d022078d7638f96541f24d1', class: "subtitle" }, this.subheading))), h("wm-button", { key: '7d7e003f445142544a26c80005801cdb7bd44d4f', "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal/wm-modal-header.spec.js

@@ -0,0 +1,8 @@
+import { ModalHeader } from "./wm-modal-header";
+describe("wm-modal-header", () => {
+    it("has the right props", () => {
+        const modal = new ModalHeader();
+        expect(modal).toHaveProperty("heading");
+        expect(modal).toHaveProperty("subheading");
+    });
+});

package/dist/collection/components/wm-modal/wm-modal.css

@@ -842,7 +842,7 @@ wm-modal dialog.wm-modal[open] {
   display: flex;
   flex-direction: column;
 }
-wm-modal dialog.wm-modal [id="content-*"] {
+wm-modal dialog.wm-modal > :not(wm-modal-header, wm-modal-footer) {
   flex: 1;
 }
 wm-modal dialog.wm-modal > wm-modal-header {
@@ -851,9 +851,10 @@ wm-modal dialog.wm-modal > wm-modal-header {
 wm-modal dialog.wm-modal > wm-modal-footer {
   border-top: 1px solid var(--wmcolor-modal-border);
 }
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 48rem) {
   wm-modal dialog.wm-modal {
-    height: 100%;
+    height: 100vh;
+    height: 100dvh;
     max-height: none;
     max-width: none;
     width: 100vw;
@@ -864,7 +865,7 @@ wm-modal dialog.wm-modal > wm-modal-footer {
     width: 100vw;
   }
 }
-wm-modal dialog.wm-dialog [id="content-*"] {
+wm-modal dialog.wm-dialog > :not(wm-modal-header, wm-modal-footer) {
   padding: 0 1.875rem 1.25rem 1.875rem;
   font-size: 0.875rem;
   border: none;

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

@@ -0,0 +1,104 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-modal", () => {
+    let page, modal, 
+    // overlay: any,
+    closeButton;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+        <button onClick="showModal()" id="modal-trigger">Open Modal</button><wm-modal id="modal-test"><wm-modal-header heading="Modal Heading"></wm-modal-header><div>Modal Body</div><wm-modal-footer primary-text="Save" secondary-text="Discard"></wm-modal-footer></wm-modal><button>Filler</button></main></body><script>const dialog = document.getElementById("modal-test");
+
+        dialog.addEventListener("wmModalCloseTriggered", function() {
+          dialog.open = false;
+        });
+
+        dialog.addEventListener("wmModalSecondaryTriggered", function() {
+          dialog.open = false;
+        });
+        
+        dialog.addEventListener("wmModalPrimaryTriggered", function() {
+          dialog.open = false;
+        });
+        function showModal() {
+          dialog.open = true;
+        }
+        </script></html>`);
+        modal = await page.find("wm-modal");
+        closeButton = await page.find("wm-button#wm-modal-close-modal-test >>> button");
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    // RENDER
+    it("renders", async () => {
+        expect(modal).toHaveClass("hydrated");
+    });
+    // DISPLAY AND HIDE
+    it("emits the proper event when the close (X) button is clicked", async () => {
+        const eventSpy = await modal.spyOnEvent("wmModalCloseTriggered");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(modal).toHaveAttribute("open");
+        closeButton.click();
+        await page.waitForChanges();
+        expect(eventSpy).toHaveReceivedEventTimes(1);
+    });
+    //ACCESSIBILITY
+    it("focuses the close button when the modal opens if no elementToFocus property is set", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter"); // open popup
+        await page.waitForChanges();
+        const activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toEqual("wm-modal-close-modal-test");
+    });
+    it("focuses the correct element when the elementToFocus property is set", async () => {
+        page = await newE2EPage();
+        //The elementToFocus prop isn't mutable, so "setProperty" doesn't work. Page content has to be reset.
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+        <button onClick="showModal()">Open Modal</button><wm-modal element-to-focus="modal-input" id="second-modal"><wm-modal-header heading="Modal Heading"></wm-modal-header><div>Modal Body<div><input id="modal-input"></input></div></div><wm-modal-footer></wm-modal-footer></wm-modal></main></body><script>const dialog = document.getElementById("second-modal");
+
+        dialog.addEventListener("wmModalCloseTriggered", function() {
+          dialog.open = false;
+        });
+
+        dialog.addEventListener("wmModalSecondaryTriggered", function() {
+          dialog.open = false;
+        });
+        
+        dialog.addEventListener("wmModalPrimaryTriggered", function() {
+          dialog.open = false;
+        });
+        
+        function showModal() {
+          dialog.open = true;
+        }
+        </script></html>`);
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toEqual("modal-input");
+    });
+    it("returns focus to the triggering element when the modal closes", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toEqual("modal-trigger");
+    });
+    it("closes the modal when escape key is pressed", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(modal).toHaveAttribute("open");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        expect(modal).not.toHaveAttribute("open");
+    });
+});

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

@@ -108,11 +108,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '180b70af975b675f000a254775207ed546b77568', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'e56f1ec368d2b1adf786c3621e25a7d4854dbb59', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && h("div", { key: 'ab6538a71ffbdafb09b8921e69f5cfc6ebec2f43', class: "wm-tooltip" }), h("slot", { key: '4de24a0170c9ad81ec726f2fc899f10dedc81142' }), h("div", { key: 'acfccf69bdc7c9b57f77f5fb4fc47907921030c7', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { class: "wm-tooltip" }), h("slot", null), h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

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

@@ -0,0 +1,30 @@
+import { newSpecPage } from "@stencil/core/testing";
+jest.mock("../../global/functions");
+import { Modal } from "./wm-modal";
+import { ModalHeader } from "./wm-modal-header";
+import { ModalFooter } from "./wm-modal-footer";
+describe("wm-modal", () => {
+    it("builds", async () => {
+        const comp = await newSpecPage({
+            components: [Modal, ModalHeader, ModalFooter],
+            html: "<wm-modal open='false'><wm-modal-header heading='heading'></wm-modal-header><div>content</div><wm-modal-footer primary-text='primary-text'></wm-modal-footer></wm-modal>",
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("watching open-- toggles the modal", () => {
+        //toggleModal
+        const component = new Modal();
+        const mockShowModal = (component.showModal = jest.fn());
+        const mockHideModal = (component.hideModal = jest.fn());
+        component.open = true;
+        component.toggleModal();
+        expect(mockShowModal).toHaveBeenCalledTimes(1);
+        expect(mockHideModal).toHaveBeenCalledTimes(0);
+        jest.resetAllMocks();
+        component.open = false;
+        component.toggleModal();
+        expect(mockShowModal).toHaveBeenCalledTimes(0);
+        expect(mockHideModal).toHaveBeenCalledTimes(1);
+        jest.resetAllMocks();
+    });
+});

package/dist/collection/components/wm-modal-pss/wm-modal-pss-footer.js

@@ -27,7 +27,7 @@ export class ModalPssFooter {
         parentModal.emitSecondaryEvent();
     }
     render() {
-        return (h("div", { key: 'd7053a0ac25d4ac0fd6a8113393610aafb01faf1', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '413ea32764100a255732fdf7a0e1eadfd3d8eabb', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '79c0c4d739c49d38e5eeaa3845432e37ee0959ce', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'cb0b336e44560a517c396e9a8452c9920c89f994', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '22815a7eadac603d768db2453cd1387626ab4b77', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
+        return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
     }
     static get is() { return "wm-modal-pss-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal-pss/wm-modal-pss-header.js

@@ -25,7 +25,7 @@ export class ModalPssHeader {
     //   this.headingElement.focus();
     // }
     render() {
-        return (h(Host, { key: 'ff40133791edec6ccf46344723a61ecca7962381' }, h("div", { key: '348f09f6418d16f01aa89566999ac1a65bb73790', class: "wm-wrapper" }, h("div", { key: '45197f8c1e4b475d3227e0c0aaff01ce5bf20055' }, h("h2", { key: '299a0875fbff68154b8f370b50f9965d5e43a082', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '4ebdd6dc8a29c9615c74c33f4a85d95a26867164', class: "subtitle" }, this.subheading))), h("wm-button", { key: '157e933ac7bbbe451ede2f45e0a9840833ff4df6', "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-pss-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal-pss/wm-modal-pss.js

@@ -112,9 +112,9 @@ export class ModalPss {
         }
     }
     render() {
-        return (h(Host, { key: '4c8851746efcbbe4b172bb27b77a71158dd6dc04', class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
+        return (h(Host, { class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
                 this.focusLastElement.emit();
-            } }, h("div", { key: 'bd96e1abafd5ee50e4c2857a81c36b885eb10423', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'e107d2cac3f3acefddd17db95e14870c503718cf', class: "sr-only", tabIndex: 0, onFocus: () => {
+            } }, h("div", { class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { class: "sr-only", tabIndex: 0, onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js

@@ -34,7 +34,7 @@ export class NavigationHamburger {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (h(Host, { key: '9d77aca16635656920d082498162a927e78680bd', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'd4cf4f5abc0a1065bbf19fceb0b3eab0b51f2e91', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { key: 'd9d3bbb877f541f1809df790776f42c8f8ee4390', class: "svg-icon svg-menu" }))));
+        return (h(Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { class: "svg-icon svg-menu" }))));
     }
     static get is() { return "wm-navigation-hamburger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigation/wm-navigation-item.js

@@ -6,7 +6,7 @@ export class NavigationItem {
         this.active = undefined;
     }
     render() {
-        return (h(Host, { key: '9a55adf58c46f162f8a1c8aa2349585353471235', role: "listitem" }, h("a", { key: '629ff3389f4878307d70a6602237cb0e11851430', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '08c82bbb9a9ee82d3c5a152527beb1a45f3bfe37', class: "icon", "aria-hidden": "true" }, h("slot", { key: '1f84ab5e6da8642f8d2c1bfe1d7b1341c25a3bcf' })), h("div", { key: '6ee1fba226110dee9b4194bb6fae93e19e2efc62', class: "text" }, this.text))));
+        return (h(Host, { role: "listitem" }, h("a", { class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { class: "icon", "aria-hidden": "true" }, h("slot", null)), h("div", { class: "text" }, this.text))));
     }
     static get is() { return "wm-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,102 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-navigation", () => {
+    let page, nav, hamburger, items;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body>
+      <wm-navigation-hamburger nav-id="mynav"></wm-navigation-hamburger>
+      <wm-navigation id="mynav">
+      <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
+      <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
+      </wm-navigation><main><h1>Title</h1><button>something tabbable here</button>
+      </main></body></html>`);
+        nav = await page.find("wm-navigation");
+        hamburger = await page.find("wm-navigation-hamburger");
+        items = await page.find("wm-navigation-item");
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("renders the component", async () => {
+        expect(nav).not.toBeNull();
+        expect(hamburger).not.toBeNull();
+        expect(items).not.toBeNull();
+    });
+    it("traps focus when collapsible", async () => {
+        // small screen, trap focus
+        page.setViewport({ width: 1023, height: 800 });
+        page.waitForChanges();
+        await page.keyboard.press("Tab"); // focus on hamburger
+        await page.keyboard.press("Enter"); // open. focus on close btn
+        await page.waitForTimeout(250); // wait for animation to complete and focus to be called
+        await page.keyboard.press("Tab"); // focus on 1st nav item
+        await page.keyboard.press("Tab"); // focus on 2nd nav item
+        await page.keyboard.press("Tab"); // with trap focus we circle back within the nav (on close btn)
+        let activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).toEqual("WM-NAVIGATION");
+    });
+    it("doesn't trap focus when persistent", async () => {
+        // wide screen, no trap focus
+        page.setViewport({ width: 1024, height: 800 });
+        await page.waitForChanges(); // test fails randomly without this
+        await page.keyboard.press("Tab"); // focus on 1st nav item
+        await page.keyboard.press("Tab"); // focus on 2nd nav item
+        await page.keyboard.press("Tab"); // focus on the button in main
+        let activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).toEqual("BUTTON");
+    });
+    it("handles focus method when collapsible and closed", async () => {
+        page.setViewport({ width: 1023, height: 800 });
+        let activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).toEqual("BODY");
+        nav.focus();
+        activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).toEqual("WM-NAVIGATION-HAMBURGER");
+    });
+    it("handles focus method when collapsible and open", async () => {
+        page.setViewport({ width: 1023, height: 800 });
+        let activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).toEqual("BODY");
+        expect(nav.getAttribute("aria-expanded")).toBe("false");
+        hamburger.click();
+        await page.waitForChanges();
+        expect(nav.getAttribute("aria-expanded")).toBe("true");
+        nav.focus();
+        activeEl = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.tagName);
+        expect(activeEl).toEqual("WM-BUTTON"); // the close button
+    });
+    it("handles focus method when persistent", async () => {
+        page.setViewport({ width: 1024, height: 800 });
+        let activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).toEqual("BODY");
+        expect(nav.getAttribute("aria-expanded")).toBeUndefined;
+        nav.focus();
+        expect(nav.getAttribute("aria-expanded")).toBeUndefined; // should still be undefined
+        activeEl = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.textContent);
+        expect(activeEl).toEqual("Home"); // first item
+    });
+    it("is open on load if open prop is set to true", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body>
+      <wm-navigation-hamburger nav-id="mynav"></wm-navigation-hamburger>
+      <wm-navigation open id="mynav">
+      <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
+      <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
+      </wm-navigation><main><h1>Title</h1><button>something tabbable here</button>
+      </main></body></html>`);
+        await page.waitForTimeout(500);
+        const nav = await page.find("wm-navigation");
+        expect(nav.getAttribute("aria-expanded")).toBe("true");
+    });
+    it("programatically associates hamburger and nav and properly announces to SR", async () => {
+        const hamburgerAriaControls = hamburger.shadowRoot.querySelector("button").getAttribute("aria-controls");
+        const hamburgerAriaLabel = hamburger.shadowRoot.querySelector("button").getAttribute("aria-label");
+        const navAriaLabel = nav.getAttribute("aria-label");
+        expect(hamburgerAriaControls).toBe(nav.id);
+        expect(hamburgerAriaLabel).toBe("Show navigation");
+        expect(navAriaLabel).toBe("Main");
+    });
+    // when closed, focus returns to hamburger
+});

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

@@ -96,9 +96,9 @@ export class Navigation {
             } }));
     }
     render() {
-        return (h(Host, { key: '07715708e3ce55d682922a541a2eb3ebc344e3f8', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'dc1605e10718db381d62277212075d66c449203a', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '5eac009e3b8ca72758876ba2854f08c0b628272e', class: "tray" }, h("div", { key: 'e55a956593076b1256dc2f9b5afff29bbb6ee02a', class: "toggle-wrapper" }, h("wm-button", { key: '87206deed2d58e192644a29f79b7e43c62cd9527', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (h(Host, { role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { class: "tray" }, h("div", { class: "toggle-wrapper" }, h("wm-button", { ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
                 this.open = !this.open;
-            } })), h("ul", { key: 'd556f415a4e448737cdd4330ee3b491bdb92406d', class: "navlist" }, h("slot", { key: '4afb84723d83cff39fba23769f84cfc03ee0b83d' }))), this.isCollapsible && (h("div", { key: '2b28fde2e59ffe93d48173f30682ace5297b9266', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { class: "navlist" }, h("slot", null))), this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get is() { return "wm-navigation"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,91 @@
+import { newSpecPage } from "@stencil/core/testing";
+//jest.mock("../../global/functions");
+import { Navigation } from "./wm-navigation";
+import { NavigationItem } from "./wm-navigation-item";
+describe("Navigation unit tests", () => {
+    it("isCollapsible", async () => {
+        const nav = new Navigation();
+        window.innerWidth = 1023;
+        expect(nav.isCollapsible).toBe(true);
+        window.innerWidth = 1024;
+        expect(nav.isCollapsible).toBe(false);
+    });
+    it("ariaExpanded", async () => {
+        const nav = new Navigation();
+        window.innerWidth = 1024;
+        expect(nav.ariaExpanded).toBeUndefined;
+        window.innerWidth = 1023;
+        expect(nav.ariaExpanded).toBe("false");
+        nav.open = true;
+        expect(nav.ariaExpanded).toBe("true");
+    });
+});
+describe("navigation", () => {
+    let page;
+    let navigation;
+    let items;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Navigation, NavigationItem],
+            html: `<wm-navigation id="mynav">
+          <wm-navigation-item href="/home" text="Home" active>Home</wm-navigation-item>
+          <wm-navigation-item href="/things" text="Things">Things</wm-navigation-item>
+        </wm-navigation>`,
+        });
+        navigation = page.root;
+        items = Array.from(page.root.querySelectorAll("wm-navigation-item"));
+    });
+    // integration tests
+    // this test includes UX functionality, the related a11y (aria-expanded)
+    // as well as the switch between persistent and collapsible modes
+    it("expands and collapses", async () => {
+        // aria-expanded
+        const expanded = navigation.getAttribute("aria-expanded");
+        //  Persistent: no aria-expanded
+        window.innerWidth = 1024;
+        expect(expanded).toBeNull;
+        //  Collapsible
+        window.innerWidth = 1023;
+        //  aria-expanded true when open
+        navigation.open = true;
+        expect(expanded).not.toBeNull;
+        //  aria-expanded false when closed
+        navigation.open = false;
+        expect(expanded).toBeNull;
+    });
+    it("closes when toggle button is activated", async () => {
+        window.innerWidth = 1023;
+        navigation.open = true;
+        let toggleBtn = page.root.shadowRoot.querySelector(".toggle");
+        toggleBtn.click();
+        expect(navigation.open).toBeFalsy();
+    });
+    /*
+     * Close button is present in collapsible mode, not otherwise
+     * can't test with current implementation because button is
+     * simply hidden via CSS
+    it("hides the button in persistent mode", async () => {
+      // in persistent mode, there's no button at all
+      window.innerWidth = 1024;
+      navigation.open = true;
+  
+      let toggleBtn = page.root!.shadowRoot!.querySelector(".toggle-wrapper");
+      expect(toggleBtn.width).toBeNull();
+    });
+    */
+    // a11y
+    it("Has a role of navigation and has a label", async () => {
+        // navigation role requires a label only when there are several on the page. Since we don't know if there will be others, we can set a label in all cases.
+        let role = navigation.getAttribute("role");
+        let label = navigation.getAttribute("aria-label");
+        expect(role).toBe("navigation");
+        expect(label).toBe("Main");
+    });
+    it("items have proper role and attrs", async () => {
+        const firstItem = items[0];
+        const role = firstItem.getAttribute("role");
+        expect(role).toBe("listitem");
+        const href = firstItem.shadowRoot.querySelector("a").getAttribute("href");
+        expect(href).toBe("/home");
+    });
+});