@watermarkinsights/ripple 5.3.0-0 → 5.3.0-2

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

@@ -0,0 +1,177 @@
+jest.mock("../../global/services/http-service");
+import { newSpecPage } from "@stencil/core/testing";
+//import { PrivNavigatorItem } from "./priv-navigator-item/priv-navigator-item";
+import { Navigator } from "./wm-navigator";
+describe("wm-navigator", () => {
+    it("builds (with props)", async () => {
+        const comp = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator
+      email="anna@user.com"
+      user-name="Anna User"
+      auth-type="3"
+      products='[{"samlLinkUrl":"https://aqua.taskstream.com/sso/samlLogin","linkUrl":"https://aqua.taskstream.com/sso/login","id":"aqua","iconUrl":"https://cdn.watermarkinsights.com/images/login/aqua.svg","name":"Aqua"},{"samlLinkUrl":"https://www.vialivetext.com/wm_sso/saml_login","linkUrl":"https://www.vialivetext.com/wm_sso/login","id":"via","iconUrl":"https://cdn.watermarkinsights.com/images/login/via.svg","name":"Via"},{"samlLinkUrl":"https://watermark.evaluationkit.com/Login/SAML","linkUrl":"https://watermark.evaluationkit.com/Login","id":"ek","iconUrl":"https://cdn.watermarkinsights.com/images/login/evaluationkit.svg","name":"Evaluation Kit"},{"samlLinkUrl":null,"linkUrl":"https://w.taskstream.com/WatermarkSSO/Authenticate/lat","id":"lat","iconUrl":"https://cdn.watermarkinsights.com/images/login/tslat.svg","name":"Taskstream LAT"},{"samlLinkUrl":null,"linkUrl":"https://w.taskstream.com/WatermarkSSO/Authenticate/ams","id":"ams","iconUrl":"https://cdn.watermarkinsights.com/images/login/tsams.svg","name":"Taskstream AMS"},{"samlLinkUrl":"https://www.digitalmeasures.com/login/sso/authenticate/saml","linkUrl":"https://www.digitalmeasures.com/login/sso/authenticate","id":"dm","iconUrl":"https://cdn.watermarkinsights.com/images/login/digitalmeasures.svg","name":"Digital Measures"},{"samlLinkUrl":"https://planning.watermarkinsights.com/login/sso/saml_login","linkUrl":"https://planning.watermarkinsights.com/login/sso","id":"planning","iconUrl":"https://cdn.watermarkinsights.com/images/login/planningselfstudy.svg","name":"Planning & Self-Study"}]'
+      ></wm-navigator>`,
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("builds (endpoint)", async () => {
+        const comp = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator
+      user-name="Bettie User"
+      load-from-userinfo="true"
+      ></wm-navigator>`,
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("returns the proper link", () => {
+        const nav = new Navigator();
+        nav.email = "a_user@company.com";
+        nav.userName = "Anna User";
+        nav.parsedProducts = [
+            {
+                name: "Aqua",
+                iconUrl: "aqua icon",
+                linkUrl: "aqua sso",
+                samlLinkUrl: "aqua saml",
+                id: "aqua",
+            },
+            {
+                name: "via",
+                iconUrl: "via icon",
+                linkUrl: "via sso",
+                samlLinkUrl: "via saml",
+                id: "via",
+            },
+            {
+                name: "ek",
+                iconUrl: "ek icon",
+                linkUrl: "ek sso",
+                samlLinkUrl: "ek saml",
+                id: "ek",
+            },
+            {
+                name: "lat",
+                iconUrl: "lat icon",
+                linkUrl: "lat sso",
+                samlLinkUrl: "lat saml",
+                id: "lat",
+            },
+            {
+                name: "ams",
+                iconUrl: "ams icon",
+                linkUrl: "ams sso",
+                samlLinkUrl: "ams saml",
+                id: "ams",
+            },
+            {
+                name: "dm",
+                iconUrl: "dm icon",
+                linkUrl: "dm sso",
+                samlLinkUrl: "dm saml",
+                id: "dm",
+            },
+            {
+                name: "planning",
+                iconUrl: "planning icon",
+                linkUrl: "planning sso",
+                samlLinkUrl: "planning saml",
+                id: "planning",
+            },
+        ];
+        nav.connectionName = "xoxo"; // connection name only appended for saml
+        nav.authType = 2; // = sso
+        // setProductOnClick returns the onClick function
+        // we invoke it to test the string
+        expect(nav.setProductOnClick("aqua")()).toBe("aqua sso");
+        expect(nav.setProductOnClick("via")()).toBe("via sso");
+        expect(nav.setProductOnClick("ek")()).toBe("ek sso");
+        expect(nav.setProductOnClick("lat")()).toBe("lat sso");
+        expect(nav.setProductOnClick("ams")()).toBe("ams sso");
+        expect(nav.setProductOnClick("dm")()).toBe("dm sso");
+        expect(nav.setProductOnClick("planning")()).toBe("planning sso");
+        nav.authType = 3; // = saml
+        expect(nav.setProductOnClick("aqua")()).toBe("aqua saml/?connection_name=xoxo");
+        // if connection_name is not set, nothing is appended
+        nav.connectionName = "";
+        expect(nav.setProductOnClick("aqua")()).toBe("aqua saml");
+    });
+    it("handles unknown products (props mode)", async () => {
+        // in props mode the component checks a hard-coded list of products
+        // if the product is not in the list, it ignores it altogether
+        // 2 exceptions: "c1" is converted to "livetext", and anything with the name "admin" (e.g. "system_admin_sit", "platform_admin") is converted to "platform_admin"
+        const comp = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator
+      email="anna@user.com"
+      user-name="Anna User"
+      auth-type="3"
+      products='[{"samlLinkUrl":"something_weird.fakeurl","linkUrl":"something_weird.fakeurl","id":"something_weird"},{"samlLinkUrl":"livetext.fakeurl","linkUrl":"livetext.fakeurl","id":"c1"},{"samlLinkUrl":"platform.fakeurl","linkUrl":"platform.fakeurl","id":"something_with_admin_in_it"}]'
+       ></wm-navigator>`,
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("loads (userinfo mode)", async () => {
+        const page = await newSpecPage({
+            components: [Navigator],
+            html: `<wm-navigator user-name="User Name" load-from-userinfo="true"></wm-navigator>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        const nav = page.body.querySelector("wm-navigator");
+        const items = nav.shadowRoot.querySelectorAll("priv-navigator-item");
+        expect(items.length).toBe(7);
+        items.forEach((i) => {
+            expect(i.id).not.toBeNull();
+            expect(i.onClick).not.toBeNull();
+        });
+    });
+    it("camel cases product keys", async () => {
+        const nav = new Navigator();
+        expect(nav.productKeysToCamelCase([
+            {
+                description: "desc1",
+                icon_url: "url1",
+                id: "id1",
+                link_url: "url1",
+                name: "name1",
+            },
+            {
+                description: "desc2",
+                icon_url: "url2",
+                id: "id2",
+                link_url: "url2",
+                name: "name2",
+            },
+            {
+                description: "desc3",
+                icon_url: "url3",
+                id: "id3",
+                link_url: "url3",
+                name: "name3",
+            },
+        ])).toStrictEqual([
+            {
+                description: "desc1",
+                iconUrl: "url1",
+                id: "id1",
+                linkUrl: "url1",
+                name: "name1",
+            },
+            {
+                description: "desc2",
+                iconUrl: "url2",
+                id: "id2",
+                linkUrl: "url2",
+                name: "name2",
+            },
+            {
+                description: "desc3",
+                iconUrl: "url3",
+                id: "id3",
+                linkUrl: "url3",
+                name: "name3",
+            },
+        ]);
+    });
+});

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

@@ -0,0 +1,22 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-option", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent("<wm-select id='test' label='select something'><wm-option id='first' disabled onClick='action()'>First option</wm-option><wm-option id='second' disabled>Second option</wm-option><wm-option id='third'>Third option</wm-option></wm-select><script>function action() {document.getElementById('second').textContent = 'the function ran!'}</script>");
+    });
+    // RENDER
+    it("renders", async () => {
+        const element = await page.find("wm-option");
+        expect(element).not.toBeNull();
+    });
+    it("prevents action on disabled option", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter"); // dropdown opens
+        await page.waitForChanges();
+        await page.keyboard.press("Enter"); // Enter on disabled option
+        await page.waitForChanges();
+        let changedOption = await page.find("wm-option#second");
+        expect(changedOption.textContent).toEqual("Second option"); // the function that shouldn't run replaces this text by: "the function ran!"
+    });
+});

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

@@ -137,7 +137,7 @@ export class Option {
         this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
     }
     render() {
-        return (h(Host, { key: 'b2816c0c9c04ab1feca35230961976a1054eec07', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '859702c06a2851a94a693916de1c8c6eeaa30ee0', class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, h("span", { key: 'ee3c7fcefdcb4931f0880a92056bd5d99fd2f42c', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: 'ff7ffd26cedafdc7cd45301f6e0089a226961fed', class: "sr-only" }, this.el.textContent)), h("div", { key: 'cd936714d6decfd809ddb70cb7c2ffa1e338a840', class: "subinfo" }, this.subinfo)));
+        return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}` }, h("span", { class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
     }
     static get is() { return "wm-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,63 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Option } from "./wm-option";
+import { Select } from "../wm-select/wm-select";
+// mock MutationObserver
+global.MutationObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+describe("wm-option", () => {
+    it("builds", async () => {
+        const page = await newSpecPage({
+            components: [Option],
+            html: `<wm-select label="abel">
+      <wm-option>1</wm-option>
+      <wm-option value="second">2</wm-option>
+      </wm-select>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has the role of option", async () => {
+        const page = await newSpecPage({
+            components: [Option],
+            html: `<wm-select label="label">
+      <wm-option>1</wm-option>
+      <wm-option value="second">2</wm-option>
+      </wm-select>`,
+        });
+        expect(page.root).toEqualAttribute("role", "option");
+    });
+    it("returns the value", async () => {
+        // if devs set the value attribute or property,
+        // the component should return it on comp.value
+        const page = await newSpecPage({
+            components: [Select, Option],
+            html: `<wm-select label="abel">
+      <wm-option>1</wm-option>
+      <wm-option value="second">2</wm-option>
+      </wm-select>`,
+        });
+        const select = page.root;
+        const options = select.querySelectorAll("wm-option");
+        expect(options[0].value).toBeUndefined();
+        expect(options[1].value).toBe("second");
+    });
+    it("handles disabled onClick function", async () => {
+        const page = await newSpecPage({
+            components: [Option],
+            html: `<wm-select label="label">
+      <wm-option>1</wm-option>
+      <wm-option value="second">2</wm-option>
+      </wm-select>`,
+        });
+        const menuItem = page.root;
+        const onClickFunc = () => console.log("Message");
+        menuItem.onclick = onClickFunc;
+        expect(menuItem.onclick).toEqual(onClickFunc);
+        menuItem.disabled = true;
+        expect(menuItem.onclick).toBe(null);
+        menuItem.disabled = false;
+        expect(menuItem.onclick).toEqual(onClickFunc);
+    });
+});

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

@@ -151,7 +151,7 @@ export class Pagination {
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (h("nav", { key: '279170ea9344595421f6cb90c653cedc52d20e1a', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '445afa781358c9257568cedec5390067198bcbc2', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (h("nav", { "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${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"; }