@watermarkinsights/ripple 5.12.0-9 → 5.12.0

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

@@ -0,0 +1,312 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-pagination", () => {
+    let page, el;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent("<wm-pagination total-items='43' items-per-page='10' current-page='1'></wm-pagination>");
+        el = await page.find("wm-pagination");
+        await page.evaluate(async () => {
+            await document.addEventListener("wmPaginationPageClicked", function (ev) {
+                let pagin = document.querySelector("wm-pagination");
+                pagin.currentPage = +ev.target.value;
+            });
+        });
+    });
+    // HANDLES ONE PAGE (FALLBACK IF DEV'S CONDITIONAL RENDERING FAILS)
+    it("does not render pagination", async () => {
+        el.setAttribute("current-page", "1");
+        el.setAttribute("total-items", "5");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        const current = await page.find("wm-pagination >>> nav");
+        expect(current).toBe(null);
+    });
+    //HANDLES SHORT PAGINATION (FIVE PAGES OR LESS )
+    it("indicates the current page correctly", async () => {
+        el.setAttribute("current-page", "5");
+        el.setAttribute("total-items", "47");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        let current = await page.find("wm-pagination >>> [aria-current='page']");
+        let val = await current.getProperty("value");
+        expect(val).toEqual("5");
+    });
+    it("displays the correct number of buttons", async () => {
+        el.setAttribute("current-page", "2");
+        el.setAttribute("total-items", "47");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        //There should be prev, five page numbers and next
+        let buttons = await page.findAll("wm-pagination >>> button");
+        expect(buttons.length).toBe(7);
+        el.setAttribute("current-page", "2");
+        el.setAttribute("total-items", "11");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        //There should now be prev, two page numbers, and next
+        buttons = await page.findAll("wm-pagination >>> button");
+        expect(buttons.length).toBe(4);
+    });
+    it("disables previous and next", async () => {
+        el.setAttribute("current-page", "5");
+        el.setAttribute("total-items", "47");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        let buttons = await page.findAll("wm-pagination >>> button");
+        let prev = await buttons[0];
+        let next = await buttons[6];
+        expect(prev).not.toHaveAttribute("disabled");
+        expect(next).toHaveAttribute("disabled");
+        el.setAttribute("current-page", "1");
+        await page.waitForChanges();
+        buttons = await page.findAll("wm-pagination >>> button");
+        prev = await buttons[0];
+        next = await buttons[6];
+        expect(next).not.toHaveAttribute("disabled");
+        expect(prev).toHaveAttribute("disabled");
+    });
+    //Add tests for keyboard navigation to simulate events that update the current page
+    // HANDLES LONG PAGINATION (SIX OR MORE PAGES)
+    it("indicates the current page correctly", async () => {
+        el.setAttribute("current-page", "6");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        let current = await page.find("wm-pagination >>> [aria-current='page']");
+        let val = await current.getProperty("value");
+        expect(val).toEqual("6");
+    });
+    it("displays five page number buttons regardless of the current page", async () => {
+        el.setAttribute("current-page", "3");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        let buttons = await page.findAll("wm-pagination >>> button");
+        //five page number buttons, plus the two prev/next buttons that always render
+        expect(buttons.length).toBe(7);
+        el.setAttribute("current-page", "15");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        buttons = await page.findAll("wm-pagination >>> button");
+        //five page number buttons, plus the two prev/next buttons that always render
+        expect(buttons.length).toBe(7);
+        el.setAttribute("current-page", "7");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        buttons = await page.findAll("wm-pagination >>> button");
+        //five page number buttons, plus the two prev/next buttons that always render
+        expect(buttons.length).toBe(7);
+    });
+    it("displays only the right hand ellipsis when current page is within the first four pages", async () => {
+        el.setAttribute("current-page", "3");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        const displayedElements = await page.find("wm-pagination >>> div.pagebtncontainer");
+        //Check that page number, not left hand ellipsis, is displayed
+        expect(displayedElements.childNodes[2].innerHTML).toBe("2");
+        //Check that ellipsis is displayed in the right spot
+        expect(displayedElements.childNodes[5].innerHTML).toBe("...");
+    });
+    it("displays only the left hand ellipsis only when current page is within the last four pages", async () => {
+        el.setAttribute("current-page", "13");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        const displayedElements = await page.find("wm-pagination >>> div.pagebtncontainer");
+        //Check that page number, not right hand ellipsis, is displayed
+        expect(displayedElements.childNodes[5].innerHTML).toBe("14");
+        //Check that ellipsis is displayed in the right spot
+        expect(displayedElements.childNodes[2].innerHTML).toBe("...");
+    });
+    it("displays both sets of ellipsis when the total page count is greater than 6 and the current page is not within the first four or the last four pages", async () => {
+        el.setAttribute("current-page", "8");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        const displayedElements = await page.find("wm-pagination >>> div.pagebtncontainer");
+        //left ellipsis
+        expect(displayedElements.childNodes[2].innerHTML).toBe("...");
+        //right ellipsis
+        expect(displayedElements.childNodes[6].innerHTML).toBe("...");
+    });
+    it("fires an event when a button is triggered", async () => {
+        el.setAttribute("current-page", "3");
+        el.setAttribute("total-items", "147");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab"); // Previous btn
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        let current = await page.find("wm-pagination >>> [aria-current='page']");
+        expect(current.id).toBe("wm-2");
+    });
+    // A11Y
+    // UX requirements, cf. https://watermarkinsights.atlassian.net/wiki/spaces/WDS/pages/51938484/Pagination
+    it("allows user to tab through the clickable pagination elements", async () => {
+        el.setAttribute("current-page", "5");
+        el.setAttribute("total-items", "97");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        // User should be able to tab through the clickable pagination elements. Navigating below to page 5
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("wm-5");
+        //Navigating below to next button
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("next");
+    });
+    it("updates the current page when enter is pressed on a page button and keeps focus on the selected page", async () => {
+        el.setAttribute("current-page", "5");
+        el.setAttribute("total-items", "97");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        //Navigate to page 6 and click on it
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        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();
+        //Current page should update to page 6
+        let current = await page.find("wm-pagination >>> [aria-current='page']");
+        let val = await current.getProperty("value");
+        expect(val).toEqual("6");
+        //Focus should remain on 6 even though button arrangement changes
+        let activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("wm-6");
+    });
+    it("decrements the current page when enter is pressed on the previous button, keeps focus on the previous button until it becomes disabled, and moves focus first page once it is disabled", async () => {
+        el.setAttribute("current-page", "3");
+        el.setAttribute("total-items", "97");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        //Navigate to previous button
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        //Current page should decrease by 1
+        let current = await page.find("wm-pagination >>> [aria-current='page']");
+        let val = await current.getProperty("value");
+        expect(val).toEqual("2");
+        //Focus should remain on previous button
+        let activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("previous");
+        //Press previous again, reaching first page and disabling previous button
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        current = await page.find("wm-pagination >>> [aria-current='page']");
+        val = await current.getProperty("value");
+        expect(val).toEqual("1");
+        //Focus is shifted to first page button rather than flying out to body
+        activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("wm-1");
+    });
+    it("increments the current page when enter is pressed on the next button, keeps focus on the next button until it becomes disabled, and moves focus back to last page once it is disabled", async () => {
+        el.setAttribute("current-page", "8");
+        el.setAttribute("total-items", "97");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        //Navigate to the next button and press enter
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        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();
+        //Current page should increase by 1
+        let current = await page.find("wm-pagination >>> [aria-current='page']");
+        let val = await current.getProperty("value");
+        expect(val).toEqual("9");
+        //Focus should remain on the next button
+        let activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("next");
+        //Press next again
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        //Last page is reached, and next button becomes disabled
+        current = await page.find("wm-pagination >>> [aria-current='page']");
+        val = await current.getProperty("value");
+        expect(val).toEqual("10");
+        //Rather than the focus shifting to the body once it is disabled, focus is brought to last page button
+        activeElId = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.id;
+        });
+        expect(activeElId).toBe("wm-10");
+    });
+    it("sets labels dynamically so that screenreaders properly announce the navigable pagination elements", async () => {
+        el.setAttribute("current-page", "3");
+        el.setAttribute("total-items", "47");
+        el.setAttribute("items-per-page", "10");
+        await page.waitForChanges();
+        let buttons = await page.findAll("wm-pagination >>> button");
+        let notCurrentPage = buttons[2];
+        expect(notCurrentPage).toEqualAttribute("aria-label", "Go to page 2");
+        let currentPage = buttons[3];
+        expect(currentPage).toEqualAttribute("aria-label", "");
+        //Change current page number
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        buttons = await page.findAll("wm-pagination >>> button");
+        //Button 3 no longer as label indicating it's the current page
+        notCurrentPage = buttons[3];
+        expect(notCurrentPage).toEqualAttribute("aria-label", "Go to page 3");
+        //Button 2 now has current page label
+        currentPage = buttons[2];
+        expect(currentPage).toEqualAttribute("aria-label", "");
+    });
+});

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

@@ -1,8 +1,24 @@
 import { h } from "@stencil/core";
-import { debounce } from "../../global/functions";
+import { debounce, intl } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
 export class Pagination {
     constructor() {
         this.totalPages = 0;
+        this.navigationLabel = intl.formatMessage({
+            id: "pagination.navLabel",
+            defaultMessage: "Pagination navigation.",
+            description: "Label for a navigation HTML element within a pagination UI element",
+        });
+        this.nextPageButtonLabel = intl.formatMessage({
+            id: "pagination.nextPageButtonLabel",
+            defaultMessage: "Go to next page",
+            description: "Page refers to a paginated list of items",
+        });
+        this.previousPageButtonLabel = intl.formatMessage({
+            id: "pagination.previousPageButtonLabel",
+            defaultMessage: "Go to previous page",
+            description: "Page refers to a paginated list of items",
+        });
         this.debouncedResize = debounce(() => (this.isLargeSize = this.el.clientWidth > 500), 100);
         this.getMiddlePageNums = () => {
             let coreBtns;
@@ -25,6 +41,33 @@ export class Pagination {
         this.isLargeSize = window.innerWidth > 600;
         this.srAnnouncement = "";
     }
+    pageButtonLabel(pageNum) {
+        return intl.formatMessage({
+            id: "pagination.pageButtonLabel",
+            defaultMessage: `Go to page {pageNum}`,
+            description: "Page refers to a paginated list of items",
+        }, {
+            pageNum: pageNum,
+        });
+    }
+    lastPageButtonLabel(totalPages) {
+        return intl.formatMessage({
+            id: "pagination.lastPageButtonLabel",
+            defaultMessage: `Go to last page, page {totalPages}`,
+            description: "Page refers to a paginated list of items",
+        }, {
+            totalPages: totalPages,
+        });
+    }
+    currentPageAnnouncement(currentPage) {
+        return intl.formatMessage({
+            id: "pagination.currentPageAnnouncement",
+            defaultMessage: "Current page, {currentPage}.",
+            description: "Page refers to a paginated list of items",
+        }, {
+            currentPage: currentPage,
+        });
+    }
     maintainFocusOnNumberChange(el) {
         window.requestAnimationFrame(() => {
             switch (el) {
@@ -73,7 +116,7 @@ export class Pagination {
     updatePageDisplayed(pageNum) {
         this.value = pageNum;
         this.wmPaginationPageClicked.emit();
-        this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;
+        this.srAnnouncement = `${this.currentPageAnnouncement(this.currentPage)} ${this.getCurrentPagesInView()}`;
     }
     displayShortPagination() {
         let pages = [];
@@ -97,7 +140,7 @@ export class Pagination {
                 this.currentPage = pageNum;
                 this.updatePageDisplayed(pageNum);
                 this.maintainFocusOnNumberChange("page");
-            }, value: pageNum, "aria-label": this.currentPage !== pageNum ? `Go to page ${pageNum}` : "", "aria-current": this.currentPage === pageNum ? "page" : undefined }, pageNum));
+            }, value: pageNum, "aria-label": this.currentPage !== pageNum ? this.pageButtonLabel(pageNum) : "", "aria-current": this.currentPage === pageNum ? "page" : undefined }, pageNum));
     }
     displayEllipsis() {
         return h("span", { class: "ellipsis" }, "...");
@@ -116,42 +159,51 @@ export class Pagination {
         if (end > this.totalItems) {
             end = this.totalItems;
         }
-        return "Viewing " + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);
+        return intl.formatMessage({
+            id: "pagination.pagesInView",
+            defaultMessage: "Viewing {atEnd, select, true {{itemStart}} other {{itemStart}-{itemEnd} of {totalItems}}}",
+            description: "Text indicating the range of items displayed in a list, and the total amount of items the list contains",
+        }, {
+            atEnd: begin === end,
+            itemStart: begin,
+            itemEnd: end,
+            totalItems: this.totalItems,
+        });
     }
     renderLarge() {
         return (h("div", { class: "largescreen" }, h("div", { class: "pageview" }, this.getCurrentPagesInView()), h("div", { class: "pagebtncontainer" }, h("button", { id: "previous", class: "paginationbtn previousbtn", onClick: () => {
                 this.currentPage = this.currentPage - 1;
                 this.updatePageDisplayed(this.currentPage);
                 this.maintainFocusOnNumberChange("previous");
-            }, disabled: this.currentPage === 1, "aria-label": "Go to previous page", "aria-controls": "status" }, "Previous"), this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination(), h("button", { id: "next", class: "paginationbtn nextbtn", onClick: () => {
+            }, disabled: this.currentPage === 1, "aria-label": this.previousPageButtonLabel, "aria-controls": "status" }, globalMessages.previous), this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination(), h("button", { id: "next", class: "paginationbtn nextbtn", onClick: () => {
                 this.currentPage = this.currentPage + 1;
                 this.updatePageDisplayed(this.currentPage);
                 this.maintainFocusOnNumberChange("next");
-            }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page", "aria-controls": "status" }, "Next"))));
+            }, disabled: this.currentPage === this.totalPages, "aria-label": this.nextPageButtonLabel, "aria-controls": "status" }, globalMessages.next))));
     }
     renderSmall() {
         return (h("div", { class: "smallscreen" }, h("div", { class: "pagebtncontainer" }, h("button", { id: "wm-1-arw", class: "paginationbtn", onClick: () => {
                 this.currentPage = 1;
                 this.updatePageDisplayed(1);
                 this.maintainFocusOnNumberChange("prev-arrow");
-            }, value: 1, "aria-current": this.currentPage === 1 ? "page" : undefined, "aria-label": `Go to page 1`, "aria-controls": "status", disabled: this.currentPage === 1 }, h("svg", { width: "16", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z" }))), h("button", { id: "previous-arw", class: "paginationbtn previousbtn", onClick: () => {
+            }, value: 1, "aria-current": this.currentPage === 1 ? "page" : undefined, "aria-label": this.pageButtonLabel(1), "aria-controls": "status", disabled: this.currentPage === 1 }, h("svg", { width: "16", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z" }))), h("button", { id: "previous-arw", class: "paginationbtn previousbtn", onClick: () => {
                 this.currentPage -= 1;
                 this.updatePageDisplayed(this.currentPage);
                 this.maintainFocusOnNumberChange("prev-arrow");
-            }, disabled: this.currentPage === 1, "aria-label": "Go to previous page" }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z" }))), "Page ", this.currentPage, " of ", this.totalPages, h("button", { id: "next-arw", class: "paginationbtn nextbtn", onClick: () => {
+            }, disabled: this.currentPage === 1, "aria-label": this.previousPageButtonLabel }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z" }))), "Page ", this.currentPage, " of ", this.totalPages, h("button", { id: "next-arw", class: "paginationbtn nextbtn", onClick: () => {
                 this.currentPage += 1;
                 this.updatePageDisplayed(this.currentPage);
                 this.maintainFocusOnNumberChange("next-arrow");
-            }, disabled: this.currentPage === this.totalPages, "aria-label": "Go to next page" }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z" }))), h("button", { id: `wm-${this.totalPages}-arw`, class: "paginationbtn", onClick: () => {
+            }, disabled: this.currentPage === this.totalPages, "aria-label": this.nextPageButtonLabel }, h("svg", { width: "8", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z" }))), h("button", { id: `wm-${this.totalPages}-arw`, class: "paginationbtn", onClick: () => {
                 this.currentPage = this.totalPages;
                 this.updatePageDisplayed(this.totalPages);
                 this.maintainFocusOnNumberChange("next-arrow");
-            }, value: this.totalPages, "aria-current": this.currentPage === this.totalPages ? "page" : undefined, "aria-label": `Go to last page, page ${this.totalPages}`, "aria-controls": "status", disabled: this.currentPage === this.totalPages }, h("svg", { width: "17", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z" }))))));
+            }, value: this.totalPages, "aria-current": this.currentPage === this.totalPages ? "page" : undefined, "aria-label": this.lastPageButtonLabel(this.totalPages), "aria-controls": "status", disabled: this.currentPage === this.totalPages }, h("svg", { width: "17", height: "12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z" }))))));
     }
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (h("nav", { key: '4a9b64a4bbfa5da2d26b64c639054985826fc968', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '98de85ef66a0861f2f1997c7881b17f0a50509b9', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (h("nav", { "aria-label": `${this.navigationLabel} ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
     }
     static get is() { return "wm-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,76 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-search", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+    });
+    it("passes Axe checks", async () => {
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-search label="example" placeholder="search here"></wm-search>
+      </main></body></html>`);
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("delegates focus", async () => {
+        await page.setContent(`<wm-search label="example" placeholder="search here">click here</wm-search>`);
+        const wmSearch = await page.find("wm-search");
+        wmSearch.focus();
+        let activeEl = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.nodeName;
+        });
+        expect(activeEl).toBe("INPUT");
+    });
+    it("updates the aria-live region with the number of results in the basic type", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<wm-search label="example" search-type="basic" placeholder="search here">click here</wm-search>`);
+        await page.waitForChanges();
+        let component = await page.find("wm-search");
+        let input = await page.find("wm-search >>> input");
+        let liveRegion = await page.find("wm-search >>> #wm-search-live");
+        expect(liveRegion.textContent).toEqual("");
+        await input.type("a");
+        await page.waitForChanges();
+        component.setProperty("numResults", 3);
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("3 results found");
+        await input.type("b");
+        await page.waitForChanges();
+        component.setProperty("numResults", 2);
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("2 results found");
+        await input.type("c");
+        await page.waitForChanges();
+        component.setProperty("numResults", 0);
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("No results found");
+    });
+    it("updates the aria-live region with the number of results and the name of the corresponding item in the find type", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<wm-search label="example" search-type="find" placeholder="search here">click here</wm-search>`);
+        await page.waitForChanges();
+        let component = await page.find("wm-search");
+        let input = await page.find("wm-search >>> input");
+        let liveRegion = await page.find("wm-search >>> #wm-search-live");
+        expect(liveRegion.textContent).toEqual("");
+        await input.type("a");
+        await page.waitForChanges();
+        component.setProperty("numResults", 3);
+        component.setProperty("highlightedName", "a");
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("1 of 3 results, a");
+        await input.type("b");
+        await page.waitForChanges();
+        component.setProperty("numResults", 2);
+        component.setProperty("highlightedName", "b");
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("1 of 2 results, b");
+        await input.type("c");
+        await page.waitForChanges();
+        component.setProperty("numResults", 0);
+        component.setProperty("highlightedName", "");
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("No results found");
+    });
+});

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

@@ -166,10 +166,10 @@ export class Search {
      * End search and find render helpers
      */
     render() {
-        return (h(Host, { key: '1ffec56e18aeda2b15741dd86adb2a0d2d131dfc' }, h("div", { key: '1253a6ac6923653d7bc5daceb3fa83f3eb3f45ea', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '20d3c4520fdf0fc511f7e2b7866e4089a4a58a71', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+        return (h(Host, null, h("div", { id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
                 id: "search.typeToFilterResults",
                 defaultMessage: "Type to filter the results",
-            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '410a1c3e881bbdf76f9b8c3a6aaf3064e200c776', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '51a68b524397adab5278394479a5059708629f2c', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
+            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
     }
     static get is() { return "wm-search"; }
     static get encapsulation() { return "shadow"; }
@@ -380,9 +380,8 @@ export class Search {
                 "complexType": {
                     "signature": "(value: string) => Promise<void>",
                     "parameters": [{
-                            "name": "value",
-                            "type": "string",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -0,0 +1,71 @@
+import { Search } from "./wm-search";
+import { newSpecPage } from "@stencil/core/testing";
+console.error = jest.fn();
+describe("wm-search", () => {
+    let page;
+    beforeEach(async () => {
+        jest.clearAllMocks();
+        page = await newSpecPage({
+            components: [Search],
+            html: `<wm-search></wm-search>`,
+        });
+        jest
+            .spyOn(window, "requestAnimationFrame")
+            // @ts-ignore
+            .mockImplementation((cb) => cb());
+    });
+    it("renders", () => {
+        expect(new Search()).toBeTruthy();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has the right props", () => {
+        const search = new Search();
+        expect(search).toHaveProperty("placeholder");
+        expect(search).toHaveProperty("label");
+        expect(search).toHaveProperty("numResults");
+        expect(search).toHaveProperty("highlightedId");
+        expect(search).toHaveProperty("highlightedName");
+        expect(search).toHaveProperty("searchType");
+    });
+    it("should render an input element", async () => {
+        const input = page.root.shadowRoot.querySelector("input");
+        expect(input).toBeTruthy();
+    });
+    it("renders an aria-live region", () => {
+        const liveRegion = page.root.shadowRoot.querySelector("[aria-live='polite']");
+        expect(liveRegion).toBeTruthy();
+    });
+    it("throws an error if required props aren't passed", async () => {
+        expect(console.error).toHaveBeenCalledTimes(2);
+    });
+    it("should be the basic type by default", () => {
+        const search = new Search();
+        expect(search.searchType).toEqual("basic");
+    });
+    it("renders two buttons when the searchType property is set to find", async () => {
+        page.rootInstance.searchType = "find";
+        await page.waitForChanges();
+        const buttons = page.root.shadowRoot.querySelectorAll("wm-button");
+        expect(buttons.length).toEqual(2);
+    });
+    it("sets the input's placeholder attribute in sentence case according to the placeholder prop", async () => {
+        page = await newSpecPage({
+            components: [Search],
+            html: `<wm-search placeholder="Placeholder value"></wm-search>`,
+        });
+        const input = page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("placeholder", "Placeholder value");
+    });
+    it("sets the input's aria-label attribute according to the label prop", async () => {
+        page.rootInstance.label = "Label value";
+        await page.waitForChanges();
+        const input = page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("aria-label", "Label value. Type to filter the results");
+    });
+    it("sets the component's value property according to the input's value", async () => {
+        //Check input rather than just call the method???
+        await page.root.updateValue("hello");
+        await page.waitForChanges();
+        expect(page.rootInstance.value).toEqual("hello");
+    });
+});