@watermarkinsights/ripple 4.2.0-0 → 4.2.0

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

@@ -1,312 +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;
-            });
-        });
+  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 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;
     });
-    //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");
+    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;
     });
-    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);
+    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;
     });
-    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");
+    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;
     });
-    //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");
+    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;
     });
-    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);
+    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;
     });
-    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", "");
+    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", "");
+  });
 });