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

@watermarkinsights/ripple 5.11.0-1 → 5.11.0-11

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-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

@@ -50,7 +50,8 @@ export class Toggletip {
     }
     handleClick(ev) {
         if (this.isOpen) {
-            if (ev.target === this.el || this.el.contains(ev.target)) {
+            const isElOrChild = ev.composedPath().includes(this.el);
+            if (isElOrChild) {
                 // Re-announce if clicking any part of the component while open
                 this.announceToggletip();
             }
@@ -97,9 +98,9 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: 'b8b9f19c7c86b2bd241eb38720dc35d556f12d19', class: `size-${this.targetSize}` }, h("button", { key: 'cc509ec78b94f3a9d1652283a6251d312074e9f7', 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: '0a76a514a36d6191ba5155a1edf612472921f4b1', ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { key: '326b3966acf74bcced38af38c9f74bfa78753b4e', 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", { class: "svg-icon svg-info" })), 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");
+    });
+});