npm - @watermarkinsights/ripple - Versions diffs - 5.11.0-1 → 5.11.0-10 - Mend

@watermarkinsights/ripple 5.11.0-1 → 5.11.0-10

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

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

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

@@ -1,4 +1,4 @@
-import { h, Host, forceUpdate, } from "@stencil/core";
+import { h, Host, forceUpdate } from "@stencil/core";
 import { intl, throttle } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Navigation {
@@ -96,9 +96,9 @@ export class Navigation {
             } }));
     }
     render() {
-        return (h(Host, { key: '4ad0cbfdffb5171218e1b09a3a83af4f90912839', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: '4bf650ddd5be7354c3be9eed4a04138a6cbd076b', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '21a63a121a517601452be1bce149f5d488c23b61', class: "tray" }, h("div", { key: 'c29ea888eb2c3dc72924805da887fd781435006a', class: "toggle-wrapper" }, h("wm-button", { key: '8bb53efa1b73127a54b1e8305e237c0f301b7c48', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "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: '43efec2247f9f31b28255d4722521bb8d4427c55', class: "navlist" }, h("slot", { key: '577800ecc50dacf91802566bfe3a0cae9ce01a5b' }))), this.isCollapsible && (h("div", { key: '97b1005fe4795c309cd18a255e575b2218fdfffe', 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 ADDED Viewed

@@ -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");
+    });
+});