npm - @watermarkinsights/ripple - Versions diffs - 5.7.0-8 → 5.7.0 - Mend

@watermarkinsights/ripple 5.7.0-8 → 5.7.0

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

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js CHANGED Viewed

@@ -155,7 +155,7 @@ export class TabList {
             } }, t.textContent)));
     }
     render() {
-        return h(Host, { key: '9b1573d576177c3eeb42fd811118567743ee0c23', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
+        return h(Host, { class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
     }
     static get is() { return "wm-tab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js CHANGED Viewed

@@ -12,7 +12,7 @@ export class TabPanel {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return h(Host, { key: 'dac02ce55774d3d4520999a92766d4488f36cf39', role: "tabpanel", class: { "tab-hidden": !this.active } });
+        return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
     }
     static get is() { return "wm-tab-panel"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,91 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-tab-item", () => {
+    let page; //, mock: any;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en' dir="ltr">
+      <head><title>Page</title></head>
+        <body>
+          <main style="height: 3000px">
+          <h1>Title</h1>
+            <div id="tab-container">
+              <wm-tab-list id="test-tab" selected-tab="first">
+                <wm-tab-item tab-id="first" id="first-tab">First</wm-tab-item>
+                <wm-tab-item tab-id="second" id="second-tab">Second</wm-tab-item>
+              </wm-tab-list>
+              <wm-tab-panel tab-id="first" id="dynamic-panel">Tab Content First</wm-tab-panel>
+            </div>
+            <div id="test-div"></div>
+          </main>
+        </body>
+      </html>`);
+        await page.evaluate(async () => {
+            const container = document.querySelector("#tab-container");
+            container.addEventListener("wmTabSelected", (ev) => {
+                const tabList = document.querySelector("#test-tab");
+                tabList.selectedTab = ev.detail.tabId;
+            });
+        });
+        await page.waitForChanges();
+    });
+    it("renders a list item with a role of presentation and with a link that has a role of tab", async () => {
+        const tabItem = await page.find("wm-tab-item");
+        const listItem = await tabItem.shadowRoot.querySelector("li");
+        expect(listItem).not.toBeNull();
+        expect(listItem.getAttribute("role")).toEqual("presentation");
+        const link = await tabItem.shadowRoot.querySelector("a");
+        expect(link).not.toBeNull();
+        expect(link.getAttribute("role")).toEqual("tab");
+    });
+    it("emits an event when clicked or enter is pressed", async () => {
+        const wmTabSelectedSpy = await page.spyOnEvent("wmTabSelected");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("ArrowRight");
+        await page.keyboard.press("Enter");
+        expect(wmTabSelectedSpy).toHaveReceivedEventDetail({ tabId: "second" });
+        jest.restoreAllMocks();
+    });
+    it("has an aria-selected attribute set to true when it is selected", async () => {
+        await page.keyboard.press("Tab"); // To next tab component
+        await page.keyboard.press("ArrowRight");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        let secondTabItemUncontrolled = await page.find("#second-tab");
+        const linkUncontrolled = await secondTabItemUncontrolled.shadowRoot.querySelector("#tab-link-second");
+        const selectedStatusUncontrolled = await linkUncontrolled.getAttribute("aria-selected");
+        expect(selectedStatusUncontrolled).toBe("true");
+    });
+    it("renders an unordered list with a role of tablist", async () => {
+        const ulElement = await page.find("wm-tab-list >>> ul");
+        expect(ulElement).not.toBeNull();
+        expect(ulElement.getAttribute("role")).toEqual("tablist");
+    });
+    it("has a role of tabpanel", async () => {
+        const tabPanel = await page.find("wm-tab-panel");
+        expect(tabPanel.getAttribute("role")).toEqual("tabpanel");
+    });
+    it("displays if the tab item with the same tabId is selected", async () => {
+        const dynamicPanel = await page.find("#dynamic-panel");
+        expect(dynamicPanel).not.toHaveClass("tab-hidden");
+    });
+    it("does not display if the tab item with the same tabId is not selected", async () => { });
+    it("has an aria-labelledby attribute that corresponds to the correct tab", async () => {
+        //uncontrolled -- tab panel attribute is dynamic
+        let changingTabPanel = await page.find("#dynamic-panel");
+        const label = await changingTabPanel.getAttribute("aria-labelledby");
+        expect(label).toEqual("tab-link-first");
+        let secondTabItemUncontrolled = await page.find("#second-tab");
+        await secondTabItemUncontrolled.click();
+        await page.waitForChanges();
+        changingTabPanel = await page.find("#dynamic-panel");
+        const newLabel = await changingTabPanel.getAttribute("aria-labelledby");
+        expect(newLabel).toEqual("tab-link-second");
+    });
+    it("switches to a dropdown at the appropriate breakpoint", async () => {
+        const comp = await page.find("wm-tab-list");
+        expect(comp).toMatchSnapshot();
+        page.setViewport({ width: 300, height: 900 });
+        await page.waitForChanges();
+        expect(comp).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,12 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TabList } from "./wm-tab-list/wm-tab-list";
+import { TabItem } from "./wm-tab-item/wm-tab-item";
+describe("wm-tabs", () => {
+    it("builds", async () => {
+        const page = await newSpecPage({
+            components: [TabList, TabItem],
+            html: '<wm-tab-list><wm-tab-item id="tab1"></wm-tab-item></wm-tab-list>',
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,204 @@
+import AxePuppeteer from "@axe-core/puppeteer";
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-tag-input", () => {
+    // ts throws erroneous warning about vars being unused...
+    // @ts-ignore
+    let page, el, input;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <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>
+      </main></body></html>`);
+        el = await page.find("wm-tag-input");
+        input = await page.find("wm-tag-input >>> input");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it.skip("uses Enter and Comma to add a new tag", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-tag-input label='label'></wm-tag-input>
+      </main></body></html>`);
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.type("Hello");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        let tags = await page.findAll("wm-tag-input >>> .tag");
+        expect(tags[0].textContent).toBe("Hello");
+        await page.keyboard.type("Apple");
+        await page.waitForChanges();
+        await page.keyboard.type(",");
+        await page.waitForChanges();
+        tags = await page.findAll("wm-tag-input >>> .tag");
+        expect(tags[1].textContent).toBe("Apple");
+        // it clears the input when adding a tag
+        const input = await page.find("wm-tag-input >>> input");
+        const inputValue = await input.getProperty("value");
+        expect(inputValue).toBe("");
+        // it includes user-added options in the dropdown
+        const listItems = await page.findAll("wm-tag-input >>> .option");
+        expect(listItems[0].textContent).toBe("Apple");
+        expect(listItems[1].textContent).toBe("Hello");
+        // it shows tags in the order they are added
+        await page.keyboard.type("Third");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        tags = await page.findAll("wm-tag-input >>> .tag");
+        expect(tags[0].textContent).toBe("Hello");
+        expect(tags[1].textContent).toBe("Apple");
+        expect(tags[2].textContent).toBe("Third");
+    });
+    it("displays column1 text instead of id for table variant", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-tag-input
+        tag-input-type="table"
+        label="Share Access"
+        col-headers="Name,Email,Role"
+        col-widths=",40%,20%"
+        col-wrap="wrap,trunc,wrap"
+      >
+        <wm-tag-option selected id="johnprice1" col1="John Price" col2="john.price1@university.edu" col3="Admin" locked></wm-tag-option>
+        <wm-tag-option id="johnprice2" col1="John Price" col2="john.price2@university.edu" col3="Faculty"></wm-tag-option>
+        <wm-tag-option id="samsandwich" col1="Sam Sandwich" col2="sam.sandwich@university.edu" col3="Faculty"></wm-tag-option>
+      </wm-tag-input>
+      </main></body></html>`);
+        await page.waitForChanges();
+        let tagTextList = await page.findAll("wm-tag-input >>> .tag-text");
+        expect(tagTextList[0].textContent).toBe("John Price");
+    });
+    it("does not allow adding tags if add-new prop is false", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-tag-input label='label' add-new="false"></wm-tag-input>
+      </main></body></html>`);
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.type("New Tag");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const tags = await page.findAll("wm-tag-input >>> .tag");
+        expect(tags.length).toBe(0);
+    });
+    it("does not allow duplicate tags to be added", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-tag-input label='label'>
+        <wm-tag-option selected>one</wm-tag-option>
+      </wm-tag-input>
+      </main></body></html>`);
+        let tags = await page.findAll("wm-tag-input >>> .tag");
+        expect(tags.length).toBe(1);
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.type("one");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("Delete");
+        await page.keyboard.press("Delete");
+        await page.keyboard.press("Delete");
+        await page.waitForChanges();
+        // it is case insensitive
+        await page.keyboard.type("OnE");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(tags.length).toBe(1);
+    });
+    it("opens dropdown when input field is focused", async () => {
+        const dropdown = await page.find("wm-tag-input >>> .dropdown-wrapper");
+        expect(dropdown).not.toHaveClass("open");
+        await input.focus();
+        expect(dropdown).toHaveClass("open");
+    });
+    it("closes dropdown", async () => {
+        //
+        // when pressing escape twice
+        // when clicking outside of component
+        // when tabbing out of component
+        // not while tabbing inside of component
+    });
+    it("renders the add new button when typing in the input", async () => { });
+    it("removes only user-added tags from the dropdown", async () => {
+        // Removing a pre-existing tag will have it still in the dropdown
+        // removing a user-added tag will remove it from the dropdown
+    });
+    it("navigates the dropdown with arrow keys", async () => {
+        let options = await page.findAll("wm-tag-input >>> .option");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(options[0]).toHaveClass("focused");
+        expect(options[1]).not.toHaveClass("focused");
+        expect(options[2]).not.toHaveClass("focused");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(options[0]).not.toHaveClass("focused");
+        expect(options[1]).toHaveClass("focused");
+        expect(options[2]).not.toHaveClass("focused");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(options[0]).not.toHaveClass("focused");
+        expect(options[1]).not.toHaveClass("focused");
+        expect(options[2]).toHaveClass("focused");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(options[0]).toHaveClass("focused");
+        expect(options[1]).not.toHaveClass("focused");
+        expect(options[2]).not.toHaveClass("focused");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        expect(options[0]).not.toHaveClass("focused");
+        expect(options[1]).not.toHaveClass("focused");
+        expect(options[2]).toHaveClass("focused");
+    });
+    it("navigates tags with left and right keys", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-tag-input label='label'>
+        <wm-tag-option selected>One</wm-tag-option>
+        <wm-tag-option selected>Two</wm-tag-option>
+        <wm-tag-option selected>Three</wm-tag-option>
+      </wm-tag-input>
+      </main></body></html>`);
+        let tags = await page.findAll("wm-tag-input >>> .tag");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(tags[0]).toHaveClass("focused");
+        expect(tags[1]).not.toHaveClass("focused");
+        expect(tags[2]).not.toHaveClass("focused");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        expect(tags[0]).not.toHaveClass("focused");
+        expect(tags[1]).toHaveClass("focused");
+        expect(tags[2]).not.toHaveClass("focused");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        expect(tags[0]).toHaveClass("focused");
+        expect(tags[1]).not.toHaveClass("focused");
+        expect(tags[2]).not.toHaveClass("focused");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        expect(tags[0]).not.toHaveClass("focused");
+        expect(tags[1]).not.toHaveClass("focused");
+        expect(tags[2]).toHaveClass("focused");
+    });
+});

package/dist/collection/components/wm-tag-input/wm-tag-input.js CHANGED Viewed

@@ -858,12 +858,12 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '2aeb57973cca66667e40249f1853b0532e039972', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'dca159804772027ce49a3f6d6c68e841a9b320c2', class: "label-wrapper" }, h("label", { key: '897e559fbb81a0ede815f45a226d8d8f67990b1b', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: 'cdf63bc1dd5cf072f91d94746056675a5aed04d6', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '9370a03b002e7ccb4ff6ebfe47b9bfeaf9f262f6', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '81d03e7ea3116818dc234ec49f21a7ac24aca7b7', class: "upper-row" }, h("div", { key: 'c156c15343943a3be5e2267dfe956049da564c5e', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: '3a66fab9e68db26b13f9500771c875315665afdb', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: 'dc8c31e93a6cb229320eeeaa68cf38f11c568498', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
                 this.handleBlur(ev);
-            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: '3984d2faaeff36f5f2a3a6bd09be94ff4122e373', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'ddf352301e9d9c90f7766d2f9ad3d6368d03c179', id: "info", class: "info-text" }, this.info)), h("div", { key: 'f24b06ad36ee1577dbac2b5e6ccfa488533bcdf3', id: "error" }, this.errorMessage), h("div", { key: 'ff7aafe467e6ba49e3ce4b066619d8c577b3a304', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { id: "info", class: "info-text" }, this.info)), h("div", { id: "error" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get is() { return "wm-tag-input"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -65,7 +65,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: 'f2771c26fe46e837b4ff57ea9f922c1ded455901', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '97219e918f72ba4b439fe97b1ffe1ad4b05344b0', class: "label-wrapper" }, h("label", { key: '3682c7ec2bcf6060b230f69f6815a7fbcb1631bb', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: 'ac07a0a0946a53f8947a388c44757109c70ea77e', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: 'beb4e904098a3691983a2ad4d1f539611ce8688d', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'f9d914ad58aca33fa3626fc8f19e0854762a1e9a', class: "inner-wrapper" }, h("div", { key: '241c56641abb90c00ec7d220f732835f107ff9ce', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: 'affce2792cec06d20290995d0cf9631ef6943358', 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: 'ecb77aa2f1ec8bf0adc46ee68bf04d517a673bb6', id: "info", class: "info" }, this.info)), h("div", { key: 'a3e9ef2cc8d20a29411887b72aa3e1a6c9538bc9', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '86cef4053bdc750a5cd3e272bbfe50ace94aca03', 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"; }