@watermarkinsights/ripple 5.3.0-0 → 5.3.0-2

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { generateId, hideTooltip, showTooltip } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Snackbar {
@@ -6,18 +6,30 @@ export class Snackbar {
         this.parsedNotifications = [];
         this.uid = this.el.id ? this.el.id : generateId();
         this.focusOnDismiss = null;
-        this.timers = [];
+        this.timers = {};
         this.notifications = "[]";
         this.isTabbing = false;
         this.announcement = "";
     }
+    componentDidLoad() {
+        const snackObserver = new MutationObserver((snackMutations) => snackMutations.forEach((mutationRecord) => this.handleSnackMutation(mutationRecord)));
+        snackObserver.observe(this.snackAreaEl, { childList: true });
+    }
+    handleSnackMutation(mutationRecord) {
+        const addedSnacks = Array.from(mutationRecord.addedNodes);
+        if (addedSnacks.length > 0) {
+            addedSnacks.forEach((s) => s.querySelector(".wm-snackbar").classList.add("grow"));
+            addedSnacks[0].scrollIntoView();
+        }
+    }
     updateSnacks(newValue) {
-        const prevNotificationsLength = this.parsedNotifications.length;
+        const prevParsedNotifications = [...this.parsedNotifications];
         this.parsedNotifications = [...JSON.parse(newValue)];
-        if (prevNotificationsLength < this.parsedNotifications.length) {
+        this.refreshUpdatedNotifications(prevParsedNotifications);
+        if (prevParsedNotifications.length < this.parsedNotifications.length) {
             const latestNotification = this.parsedNotifications[0];
-            const newTimer = window.setTimeout(() => this.snackExpired(), 20000);
-            this.timers = [newTimer, ...this.timers];
+            const newTimer = window.setTimeout(() => this.snackExpired(latestNotification.id), 6000);
+            this.timers = Object.assign({ [latestNotification.id]: newTimer }, this.timers);
             // don't announce link if user is tabbing because link is focused after announcement
             this.announce(`${latestNotification.message} ${this.isTabbing ? "" : latestNotification.link}`);
             if (this.isTabbing && latestNotification.link) {
@@ -30,22 +42,38 @@ export class Snackbar {
                 });
             }
         }
-    }
-    toggleTabbingOn() {
-        this.isTabbing = true;
-    }
-    toggleTabbingOff() {
-        this.isTabbing = false;
+        this.setMinWidths();
+    }
+    refreshUpdatedNotifications(prevNotifications) {
+        let updatedNotifications = [];
+        prevNotifications.forEach((prevNotification) => {
+            this.parsedNotifications.forEach((newNotification) => {
+                if (newNotification.id == prevNotification.id && newNotification.message != prevNotification.message) {
+                    updatedNotifications.push(newNotification);
+                }
+            });
+        });
+        updatedNotifications.forEach((updatedNotification) => {
+            const notifEl = this.el.shadowRoot.querySelector(`#snack-${updatedNotification.id}`);
+            if (notifEl) {
+                notifEl.classList.remove("grow");
+                window.requestAnimationFrame(() => notifEl.classList.add("grow"));
+            }
+            this.stopTimer(updatedNotification);
+            const newTimer = window.setTimeout(() => this.snackExpired(updatedNotification.id), 6000);
+            this.timers = Object.assign({ [updatedNotification.id]: newTimer }, this.timers);
+            this.announce(`${updatedNotification.message} ${this.isTabbing ? "" : updatedNotification.link}`);
+        });
     }
     checkForTabbing(ev) {
         if (ev.key === "Tab") {
-            this.toggleTabbingOn();
+            this.isTabbing = true;
         }
     }
     // Workaround for screenreader's triggering click event on "enter"
     // This is why we manually handle this.isTabbing instead of listening to wmUserIsTabbing
     handleMouse() {
-        this.toggleTabbingOff();
+        this.isTabbing = false;
     }
     snackDismissed(notification) {
         this.endSnack(notification);
@@ -56,9 +84,11 @@ export class Snackbar {
         }
     }
     //Remove snack from notification list once timer runs out
-    snackExpired() {
-        const notification = this.parsedNotifications[this.parsedNotifications.length - 1];
-        this.endSnack(notification);
+    snackExpired(expiredID) {
+        const expiredNotification = this.parsedNotifications.find((n) => n.id == expiredID);
+        if (expiredNotification) {
+            this.endSnack(expiredNotification);
+        }
     }
     endSnack(notification) {
         //App listens for wmSnackbarSnackFinished event and deletes the emitted notification.
@@ -82,15 +112,21 @@ export class Snackbar {
     }
     //Delete the timer corresponding to the dismissed notification
     stopTimer(notification) {
-        this.parsedNotifications.forEach((notif, index) => {
-            if (notif.id === notification.id) {
-                clearTimeout(this.timers[index]);
-                this.timers = this.timers.filter((timer, ind) => {
-                    if (ind !== index) {
-                        return timer;
-                    }
-                });
-            }
+        if (this.timers[notification.id]) {
+            clearTimeout(this.timers[notification.id]);
+            delete this.timers[notification.id];
+        }
+    }
+    setMinWidths() {
+        // wait for render to get updated scrollWidth
+        requestAnimationFrame(() => {
+            const msgEls = this.el.shadowRoot.querySelectorAll(".msg");
+            msgEls.forEach((msgEl) => {
+                msgEl.classList.remove("long");
+                if (msgEl.scrollWidth > 216) {
+                    msgEl.classList.add("long");
+                }
+            });
         });
     }
     announce(message) {
@@ -100,16 +136,15 @@ export class Snackbar {
         this.announcement = message;
     }
     renderSnackbars() {
-        return this.parsedNotifications.map((notification) => (h("div", { class: "wm-snack-wrapper" }, h("div", { id: `snack-${this.uid}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "wm-snackbarmsg" }, h("div", { class: "msgtext" }, h("span", null, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
+        return [...this.parsedNotifications].reverse().map((notification) => (h("div", { class: "wm-snack-wrapper" }, h("div", { id: `snack-${notification.id}`, class: "wm-snackbar active neutral" }, h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) }), h("div", { class: "wm-snackbarmsg" }, h("div", { class: "msgtext" }, h("span", { class: "msg" }, notification.message), notification.link && (h("a", { id: `action-${notification.id}`, class: `link ${notification.newWindow ? "new-window" : ""}`, "aria-label": `Click to ${notification.link}...${notification.newWindow ? " " + globalMessages.newWindow : ""}`, tabindex: 0, onClick: () => {
                 this.snackLinkClicked(notification);
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link)))), h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() })), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h("div", { key: '623edefbaaa6e52e2f55e3fdcd105f6cec89b37e', class: {
-                "wm-snackbars": true,
-                empty: this.parsedNotifications.length === 0,
+        return (h(Host, null, h("div", { ref: (el) => (this.snackAreaEl = el), class: {
+                "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
-            } }, h("div", { key: '87c6400cb6682fb06d871e05c40b7c4d3ba7fdae', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement), this.renderSnackbars()));
+            } }, this.renderSnackbars()), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,9 @@
+import { newSpecPage } from "@stencil/core/testing";
+jest.mock("../../global/functions");
+import { Snackbar } from "./wm-snackbar";
+describe("wm-snackbar", () => {
+    it("builds", async () => {
+        const comp = await newSpecPage({ components: [Snackbar], html: "<wm-snackbar><wm-snackbar>" });
+        expect(comp.root).toMatchSnapshot();
+    });
+});

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js

@@ -40,7 +40,7 @@ export class TabItem {
                 "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
             };
         }
-        return (h(Host, { key: '0d9c95f25f36cd8e37bdacdfc73c9032ab11f8b9', role: "presentation" }, h("li", { key: '6d83fae63842be52110fdcaf1797767c8defa24e', class: "tab-item", role: "presentation" }, h("a", { key: '399e8aa507afa3b70b925969c9fd4508345098fb', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", { key: '3571988e318de8baa6a9d82c464d101f38d12a51' })))));
+        return (h(Host, { role: "presentation" }, h("li", { class: "tab-item", role: "presentation" }, h("a", { class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", null)))));
     }
     static get is() { return "wm-tab-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -155,7 +155,7 @@ export class TabList {
             } }, t.textContent)));
     }
     render() {
-        return h(Host, { key: 'c768cc9153a707b6093d82b387d33df4b67f9adf', 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

@@ -12,7 +12,7 @@ export class TabPanel {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return h(Host, { key: '83da2497d78709f8b891e4c3735508b992fc6a90', 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

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

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

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

@@ -858,12 +858,12 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '33abb5778cad372a77e0d92ec7db591a7cacb216', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '83814d7be8f23c6d6d73ac126f6545d6c19fbf50', class: "label-wrapper" }, h("label", { key: 'e404bc94e35dad4c3ca1247c4a59a4ca7d9c472c', class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { key: '07671bf51458668dfc54cbcea7ee557aac20c9dd', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '78e36202ba0e55d912532d36dc0c731fd68266ec', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '6be8fa1d4586a06c2d72a02e7e5eb186b2ee374a', class: "upper-row" }, h("div", { key: '4fce716703d1ce34be8d1837d14a55a96ee57ce1', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { key: 'ecb9d7b6a0c92fd5c575b86f71252d96299a50bb', 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: 'fb154aee6848ebc5a0b4a89596d2470cdc6ae8cc', 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: 'f17d34cc1dab1e7c37a20d79d65f259aef2db3c3', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'ea41b9923c0bd26b0554a76301d0aa488558edc1', id: "info", class: "info-text" }, this.info)), h("div", { key: '9dc002e1b3a97ead65eb8e4fd785dab62a9f4048', id: "error" }, this.errorMessage), h("div", { key: 'b4a72c8d1c58a19d11d6937cd6b26a496f647c30', 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"; }