@watermarkinsights/ripple 5.12.0-8 → 5.12.0

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

@@ -6,25 +6,31 @@ export class TagInput {
         this.addNewHelpText = intl.formatMessage({
             id: "tagInput.addNewHelpText",
             defaultMessage: "Press the Enter or Comma key to add a new tag.",
-            description: "Help text appearing in a dropdown. Use imperative",
+            description: "Instructional text, where tag refers to a tag UI element that can be added to a list. Use imperative",
         });
         this.selectionHelpText = intl.formatMessage({
             id: "tagInput.selectionHelpText",
             defaultMessage: "Search and select a tag.",
-            description: "Help text appearing in a dropdown. Use imperative",
+            description: "Instructional text, where tag refers to a tag UI element that can be added to a list. Use imperative",
         });
         this.maxTagsReachedMessage = intl.formatMessage({
             id: "tagInput.maxTagsReached",
             defaultMessage: "No more tags can be added because the limit has been reached.",
+            description: "Tag refers to a tag UI element that can be added to a list.",
         });
         this.tagAreaInstructions = intl.formatMessage({
             id: "tagInput.tagAreaInstructions",
             defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
+            description: "Label for a UI element where a user can select from a list of tags.",
         });
         this.tagsAddedMessage = intl.formatMessage({
             id: "tagInput.tagsAdded",
             defaultMessage: "Tags added",
-            description: "Full message for context: 'Tags added: x/y",
+            description: "Tag refers to a tag UI element that can be added to a list. Full message for context: 'Tags added: x/y",
+        });
+        this.noResultsMessage = intl.formatMessage({
+            id: "tagInput.noResults",
+            defaultMessage: "No results match your search.",
         });
         this.openUp = false;
         this.inModal = false;
@@ -51,6 +57,13 @@ export class TagInput {
         this.focusedTagIndex = undefined;
         this.tagsList = [];
     }
+    addNewTagMessage(newTagName) {
+        return intl.formatMessage({
+            id: "tagInput.addNewTag",
+            defaultMessage: "Add {newTagName}",
+            description: "Button text to add a new tag to a list of tags",
+        }, { newTagName: newTagName });
+    }
     toggleKeyingOn() {
         this.isKeying = true;
     }
@@ -142,13 +155,6 @@ export class TagInput {
     get tagLimitReached() {
         return !!(this.maxTags && this.taggedOptions.length >= this.maxTags);
     }
-    get noResultsMessage() {
-        return intl.formatMessage({
-            id: "tagInput.noResults",
-            defaultMessage: "No results match your search.",
-            description: "Message displayed when a user's search returns empty.",
-        });
-    }
     get inputMinimumWidth() {
         if (this._tagEls) {
             // 150px is the minimum width of the input field, or the length of the placeholder text
@@ -180,28 +186,28 @@ export class TagInput {
         return intl.formatMessage({
             id: "tagInput.tagAdded",
             defaultMessage: "{tagName} added.",
-            description: "A confirmation for adding a tag.",
+            description: "Confirmation for adding a tag UI element to a list of tags.",
         }, { tagName: tag });
     }
     tagRemovedMessage(tag) {
         return intl.formatMessage({
             id: "tagInput.tagRemoved",
             defaultMessage: "{tagName} removed.",
-            description: "A confirmation for removing a tag.",
+            description: "Confirmation for removing a tag UI element from a list of tags.",
         }, { tagName: tag });
     }
     tagAlreadyAddedMessage(tag) {
         return intl.formatMessage({
             id: "tagInput.tagAlreadyAdded",
             defaultMessage: "{tagName} has already been added.",
-            description: "An alert for adding a tag that is already present.",
+            description: "Alert for adding a tag UI element that is already included in the list.",
         }, { tagName: tag });
     }
     tagLockedMessage(tag) {
         return intl.formatMessage({
             id: "tagInput.tagLocked",
             defaultMessage: "{tagName} is locked and cannot be removed.",
-            description: "An alert for when a user tries to remove a tag that is locked.",
+            description: "Alert indicating a tag UI element cannot be removed from its list.",
         }, { tagName: tag });
     }
     isElOrChild(el) {
@@ -779,7 +785,7 @@ export class TagInput {
         const optionAlreadyExists = this.isExistingTag(this.inputEl.value.trim());
         return (this.addNew &&
             hasNonWhiteSpaceCharacters &&
-            !optionAlreadyExists && (h("li", { ref: (el) => (this.addNewButton = el), id: "add-new-btn", class: "add-new-btn", onClick: () => this.addTags(inputValue) }, "Add " + inputValue)));
+            !optionAlreadyExists && (h("li", { ref: (el) => (this.addNewButton = el), id: "add-new-btn", class: "add-new-btn", onClick: () => this.addTags(inputValue) }, this.addNewTagMessage(inputValue))));
     }
     renderTable() {
         return (h("div", { class: "table-wrapper", onScroll: () => this.dismissTooltip() }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
@@ -840,7 +846,7 @@ export class TagInput {
             const classes = {
                 focused: !!this._focusedCell && cellId === this._focusedCell.id,
             };
-            return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", "aria-readonly": o.locked ? "true" : null, onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, o.locked && idx == 0 && h("div", { class: "svg-icon svg-locked" }), val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? "locked" : "")));
+            return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", "aria-readonly": o.locked ? "true" : null, onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, o.locked && idx == 0 && h("div", { class: "svg-icon svg-locked" }), val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? globalMessages.locked : "")));
         });
     }
     renderTableRow(o) {
@@ -858,12 +864,12 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: 'af231128d260623c879ef2089b09027063499160', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '2f59f083c55296c78ed525a58d029bfc9b9529ee', class: "label-wrapper" }, h("label", { key: '635e5dd747f1d4efde1a69263852783233b2a5f0', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: 'd320313704264ea92481fe5949dd7bb6d05c2a0d', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '0b4ba6ae8448bc0163400f6491afd3d9698e229e', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '2a88752b7448ea96bb22f810f4eb836eb8c46396', class: "upper-row" }, h("div", { key: '2a651303dd7ae11a1d4b69ec8d2238858c60db70', class: "svg-icon svg-search" }), h("div", { key: '91bee9d946319fc824b7e8d16044b94b25d69a52', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: '60e54382a3449bbc4cbeef5de986679201e4d019', 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: "svg-icon svg-search" }), 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: 'e967fb3dd1543cc71e689127a3ff4de287e63122', 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: '75b899bc274fd826a49dd70faa502ec2812e7ff7', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '94b40202dce3a7f9e28e2ef7efcfc696c5613ac7', id: "info", class: "info-text" }, this.info)), h("div", { key: '1351786b25c5c28c65a646393c8f93a2a9bdf2c1', id: "error" }, this.errorMessage), h("div", { key: '6704903361bdfd1412df5d95d28b1569d0b303ad', 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

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

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

@@ -65,7 +65,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: 'e2d740d8479a2c7fceafb2cd68d9f97eb876f785', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '2f410dc0729e16d0b18e614f376825f2046df597', class: "label-wrapper" }, h("label", { key: '42478a23be2991709f1225d29fc5b70f1c265e60', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '075b4662280aca2fd60c0d9c1c5c55943432fa40', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '04170738af7aed5c0c1c93e0514a0820ce95f45d', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '8c95a78fc48323b507f698b7a60e23ee695eafd5', class: "inner-wrapper" }, h("div", { key: 'f2d97022f110d272158a4b66b99823855e9446ee', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '53c1dfdeaee25b4ead90e5077df55c5e75860510', 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: 'e6752b037381940fd2c02fc994b018bff40d0160', id: "info", class: "info" }, this.info)), h("div", { key: '207fc1dd5736e9c9a401daab3334e52f2dbdb7b5', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'a310af56a1bf1b1ba045707ee1b5b8fb7a0bd770', 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"; }

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

@@ -0,0 +1,79 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Textarea } from "./wm-textarea";
+// 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(),
+// }));
+describe("textarea", () => {
+    let page;
+    let component;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label"></wm-textarea>`,
+        });
+        component = page.root;
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has right aria roles", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" disabled required-field></wm-textarea>`,
+        });
+        const textarea = await page.root.shadowRoot.querySelector("textarea");
+        expect(textarea).toEqualAttribute("aria-describedby", "info error");
+        expect(textarea).toHaveAttribute("disabled");
+        const error = await page.root.shadowRoot.querySelector("#error");
+        expect(error).toEqualAttribute("aria-live", "assertive");
+        const livePolite = await page.root.shadowRoot.querySelector("#live-polite");
+        expect(livePolite).toEqualAttribute("aria-live", "polite");
+    });
+    it("sets initial value from textcontent", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label">Initial value</wm-textarea>`,
+        });
+        component = page.root;
+        expect(component.value).toBe("Initial value");
+    });
+    it("renders character limit", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" character-limit="20">Hello</wm-textarea>`,
+        });
+        component = page.root;
+        const characterLimitArea = await page.root.shadowRoot.querySelector(".character-count");
+        expect(characterLimitArea.textContent).toBe("5/20");
+    });
+    it("properties override height and width", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" input-width="200px" input-height="300px"></wm-textarea>`,
+        });
+        component = page.root;
+        const textarea = await component.shadowRoot.querySelector("textarea");
+        expect(textarea).toEqualAttribute("style", "height: 300px;");
+        const widthWrapper = await component.shadowRoot.querySelector(".inputfield-wrapper");
+        expect(widthWrapper).toEqualAttribute("style", "width: 200px;");
+    });
+    it("displays info and error-message properties", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" info="example info text" error-message="example error text"></wm-textarea>`,
+        });
+        component = page.root;
+        const info = await component.shadowRoot.querySelector("#info");
+        expect(info.textContent).toBe("example info text");
+        const error = await component.shadowRoot.querySelector("#error");
+        expect(error.textContent).toBe("example error text");
+    });
+});

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

@@ -0,0 +1,163 @@
+import AxePuppeteer from "@axe-core/puppeteer";
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-timepicker", () => {
+    let page, input;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-timepicker label="timepicker" dropdown-time="09:00"></wm-timepicker>
+      </main></body></html>`);
+        input = await page.find("wm-timepicker >>> input");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("emits input blurred event", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-timepicker label="timepicker"></wm-timepicker>
+      <div id="indicator">no event heard</div>
+      </main></body></html>`);
+        input = await page.find("wm-timepicker >>> input");
+        await page.waitForChanges();
+        await page.evaluate(async () => {
+            const indicator = document.querySelector("#indicator");
+            await document.addEventListener("wmTimepickerInputBlurred", () => (indicator.textContent = "event heard"));
+        });
+        await page.waitForChanges;
+        let indicator = await page.find("#indicator");
+        expect(indicator.textContent).toBe("no event heard");
+        await input.type("522");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(indicator.textContent).toBe("event heard");
+    });
+    it("opens to preselected time", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-timepicker label="timepicker" preselected="14:15"></wm-timepicker>
+      </main></body></html>`);
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const nineAm = await page.find("wm-timepicker >>> li#option58");
+        expect(nineAm).toEqualAttribute("tabindex", 0);
+    });
+    it("opens next option with down arrow key", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        const nineFifteenAm = await page.find("wm-timepicker >>> li#option38");
+        expect(nineFifteenAm).toEqualAttribute("tabindex", 0);
+    });
+    it("opens previous option with up arrow key", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        const eightFourtyFiveAm = await page.find("wm-timepicker >>> li#option36");
+        expect(eightFourtyFiveAm).toEqualAttribute("tabindex", 0);
+    });
+    it("navigates through the dropdown with keyboard", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const nineAm = await page.find("wm-timepicker >>> li#option37");
+        const nineFifteenAm = await page.find("wm-timepicker >>> li#option38");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(nineFifteenAm).toEqualAttribute("tabindex", 0);
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        expect(nineAm).toEqualAttribute("tabindex", 0);
+    });
+    it("emits timeSelected event with time", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-timepicker label="timepicker" value="03:15 PM" preselected="15:15"></wm-timepicker>
+      <div id="indicator">no event heard</div>
+      </main></body></html>`);
+        input = await page.find("wm-timepicker >>> input");
+        await page.waitForChanges();
+        await page.evaluate(async () => {
+            const indicator = document.querySelector("#indicator");
+            await document.addEventListener("wmTimepickerTimeSelected", (ev) => (indicator.textContent = `event heard: ${ev.detail.time}`));
+        });
+        await page.waitForChanges;
+        let indicator = await page.find("#indicator");
+        expect(indicator.textContent).toBe("no event heard");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(indicator.textContent).toBe("event heard: 15:15");
+    });
+    it("closes dropdown on Escape and Tab", async () => {
+        const dropdown = await page.find("wm-timepicker >>> ul.options");
+        expect(dropdown).not.toHaveClass("open");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(dropdown).toHaveClass("open");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        expect(dropdown).not.toHaveClass("open");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(dropdown).toHaveClass("open");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(dropdown).not.toHaveClass("open");
+    });
+    it("closes dropdown when clicking outside component", async () => {
+        const dropdown = await page.find("wm-timepicker >>> ul.options");
+        expect(dropdown).not.toHaveClass("open");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(dropdown).toHaveClass("open");
+        await page.mouse.click(-10, -10);
+        await page.waitForChanges();
+        expect(dropdown).not.toHaveClass("open");
+    });
+    it("handles Home and End keys", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const firstOption = await page.find("wm-timepicker >>> li#option1");
+        await page.keyboard.press("Home");
+        await page.waitForChanges();
+        expect(firstOption).toEqualAttribute("tabindex", 0);
+        const lastOption = await page.find("wm-timepicker >>> li#option96");
+        await page.keyboard.press("End");
+        await page.waitForChanges();
+        expect(lastOption).toEqualAttribute("tabindex", 0);
+    });
+});