npm - @watermarkinsights/ripple - Versions diffs - 5.12.0-9 → 5.12.0 - Mend

@watermarkinsights/ripple 5.12.0-9 → 5.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (366) hide show

package/dist/collection/components/charts/wm-chart/wm-chart.e2e.js ADDED Viewed

@@ -0,0 +1,213 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-chart", () => {
+    let page,
+    // @ts-ignore for some reason ts says it's unused
+    component,
+    // slices: NodeList,
+    paths, svg;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-chart label="the label"><wm-chart-slice amount="70" legend="Created"></wm-chart-slice><wm-chart-slice amount="2" legend="Not Created"></wm-chart-slice></wm-chart>
+      </main></body></html>`);
+        component = await page.find("wm-chart");
+        svg = await page.find("wm-chart >>> svg");
+        // slices = await page.findAll("wm-chart-slice");
+        paths = await page.findAll("wm-chart >>> path");
+    });
+    it("passes Axe tests", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("renders", async () => {
+        expect(svg).toBeTruthy();
+    });
+    it("renders the right amount of slices and text", async () => {
+        let tmpPage = await newE2EPage();
+        await tmpPage.setContent(`<wm-chart label="the label">
+      <wm-chart-slice amount="100" legend="Created"></wm-chart-slice>
+      <wm-chart-slice amount="123" legend="Created"></wm-chart-slice>
+      <wm-chart-slice amount="0" legend="Maybe Created"></wm-chart-slice>
+      </wm-chart>`);
+        let tmpSlices = await tmpPage.findAll("wm-chart-slice");
+        let tmpPaths = await tmpPage.findAll("wm-chart >>> path");
+        let tmpTexts = await tmpPage.findAll("wm-chart >>> text.value");
+        expect(tmpSlices.length).toEqual(3);
+        // slices rendered even if amount === 0 for accessibility reasons
+        expect(tmpPaths.length).toEqual(tmpSlices.length);
+        expect(tmpTexts.length).toEqual(tmpSlices.length - 1);
+    });
+    it("hides clustered small numbers", async () => {
+        // rule: num < 4 && either neighbor < 5
+        let page = await newE2EPage();
+        await page.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
+        <wm-chart-slice amount="75" legend="A"></wm-chart-slice> // 89%
+        <wm-chart-slice amount="5" legend="B"></wm-chart-slice> // 6%
+        <wm-chart-slice amount="4" legend="C"></wm-chart-slice> // 5%
+      </wm-chart>
+      <wm-chart id="two" label="the label" chart-type="doughnut3">
+        <wm-chart-slice amount="65" legend="A"></wm-chart-slice> // 69%
+        <wm-chart-slice amount="14" legend="B"></wm-chart-slice> // 15%
+        <wm-chart-slice amount="4" legend="C"></wm-chart-slice> // 4%
+        <wm-chart-slice amount="4" legend="D"></wm-chart-slice> // 4%
+        <wm-chart-slice amount="4" legend="E"></wm-chart-slice> // 4%
+        <wm-chart-slice amount="3" legend="F"></wm-chart-slice> // 3%
+      </wm-chart>
+      <wm-chart id="three" label="the label" chart-type="doughnut3">
+        <wm-chart-slice amount="83" legend="A"></wm-chart-slice> // 83%
+        <wm-chart-slice amount="7" legend="B"></wm-chart-slice> // 7%
+        <wm-chart-slice amount="6" legend="C"></wm-chart-slice> // 6%
+        <wm-chart-slice amount="3" legend="D"></wm-chart-slice> // 3%
+        <wm-chart-slice amount="1" legend="E"></wm-chart-slice> // 1%
+        <wm-chart-slice amount="0" legend="F"></wm-chart-slice> // 0%
+      </wm-chart>`);
+        let [one, two, three] = await page.findAll("wm-chart");
+        let oneSlices = await one.findAll("wm-chart-slice");
+        let onePaths = await page.findAll("#one >>> path");
+        let oneTexts = await page.findAll("#one >>> text.value");
+        expect(onePaths.length).toEqual(oneSlices.length);
+        // All vals should show incl. small ones
+        // (they are not neighbors to other small vals)
+        expect(oneTexts.length).toEqual(oneSlices.length);
+        let twoSlices = await two.findAll("wm-chart-slice");
+        let twoPaths = await page.findAll("#two >>> path");
+        let twoTexts = await page.findAll("#two >>> text.value");
+        expect(twoPaths.length).toEqual(twoSlices.length);
+        // 1 small val should be hidden (3%)
+        // because it is < 4 and has a neighbor < 5
+        expect(twoTexts.length).toEqual(twoSlices.length - 1);
+        let threeSlices = await three.findAll("wm-chart-slice");
+        let threePaths = await page.findAll("#three >>> path");
+        let threeTexts = await page.findAll("#three >>> text.value");
+        // 3 small values should be hidden
+        expect(threePaths.length).toEqual(threeSlices.length);
+        expect(threeTexts.length).toEqual(threeSlices.length - 3);
+    });
+    it("handles percentages less than 1", async () => {
+        let page = await newE2EPage();
+        await page.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
+      // total 284
+        <wm-chart-slice amount="209" legend="A"></wm-chart-slice> // 74%
+        <wm-chart-slice amount="40" legend="B"></wm-chart-slice> // 14%
+        <wm-chart-slice amount="20" legend="C"></wm-chart-slice> // 7%
+        <wm-chart-slice amount="14" legend="D"></wm-chart-slice> // 5%
+        <wm-chart-slice amount="1" legend="E"></wm-chart-slice> // <1%
+      </wm-chart>
+      <wm-chart id="two" label="the label" chart-type="doughnut3">
+      // total 284
+        <wm-chart-slice amount="209" legend="A"></wm-chart-slice> // 73%
+        <wm-chart-slice amount="40" legend="B"></wm-chart-slice> // 14%
+        <wm-chart-slice amount="34" legend="C"></wm-chart-slice> // 12%
+        <wm-chart-slice amount="1" legend="D"></wm-chart-slice> // <1%
+      </wm-chart>`);
+        let [one, two] = await page.findAll("wm-chart");
+        let oneSlices = await one.findAll("wm-chart-slice");
+        let onePaths = await page.findAll("#one >>> path");
+        let oneTexts = await page.findAll("#one >>> text.value");
+        expect(oneSlices.length).toEqual(5);
+        // All paths are rendered
+        expect(onePaths.length).toEqual(oneSlices.length);
+        // E should be hidden because it borders a percentage < 8
+        expect(oneTexts.length).toEqual(oneSlices.length - 1);
+        let twoSlices = await two.findAll("wm-chart-slice");
+        let twoPaths = await page.findAll("#two >>> path");
+        let twoTexts = await page.findAll("#two >>> text.value");
+        expect(twoSlices.length).toEqual(4);
+        // All paths are rendered
+        expect(twoPaths.length).toEqual(twoSlices.length);
+        // Even D should be visible because it borders a percentage > 8
+        expect(twoTexts.length).toEqual(twoSlices.length);
+    });
+    it("sets the subinfo value", async () => {
+        const comp = await page.find("wm-chart");
+        comp.setProperty("subinfo", "subinfo text");
+        await page.waitForChanges();
+        const subinfo = await page.find("wm-chart >>> .subinfo");
+        expect(subinfo.textContent).toEqual("subinfo text");
+    });
+    it("changes the display values", async () => {
+        // type bar2 and bar3
+        const tmpPage = await newE2EPage();
+        await tmpPage.setContent(`<wm-chart id="bar2chart" chart-type="bar2" label="the label" value-format="percentage"><wm-chart-slice amount="10" legend="Created"></wm-chart-slice><wm-chart-slice amount="10" legend="Not Created"></wm-chart-slice></wm-chart>
+      <wm-chart id="bar3chart" chart-type="bar3" label="the label" value-format="amount"><wm-chart-slice amount="70" legend="Created"></wm-chart-slice><wm-chart-slice amount="10" legend="Not Created"></wm-chart-slice></wm-chart>`);
+        await tmpPage.waitForChanges();
+        const bar2val = await tmpPage.findAll("#bar2chart >>> .value");
+        expect(bar2val[0].textContent).toEqual("50%");
+        const bar3val = await tmpPage.findAll("#bar3chart >>> .value");
+        expect(bar3val[0].textContent).toEqual("70");
+    });
+    it("handles Arrows and Tab keys", async () => {
+        const componentWrapper = await page.find("wm-chart >>> .component-wrapper");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        paths = await page.findAll("wm-chart >>> path");
+        expect(componentWrapper).toEqualAttribute("tabindex", "-1");
+        expect(paths[0]).toEqualAttribute("tabindex", "0");
+        expect(paths[1]).toEqualAttribute("tabindex", "-1");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        paths = await page.findAll("wm-chart >>> path");
+        expect(componentWrapper).toEqualAttribute("tabindex", "-1");
+        expect(paths[0]).toEqualAttribute("tabindex", "-1");
+        expect(paths[1]).toEqualAttribute("tabindex", "0");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        paths = await page.findAll("wm-chart >>> path");
+        expect(componentWrapper).toEqualAttribute("tabindex", "-1");
+        expect(paths[0]).toEqualAttribute("tabindex", "0");
+        expect(paths[1]).toEqualAttribute("tabindex", "-1");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        paths = await page.findAll("wm-chart >>> path");
+        expect(componentWrapper).toEqualAttribute("tabindex", "-1");
+        expect(paths[0]).toEqualAttribute("tabindex", "-1");
+        expect(paths[1]).toEqualAttribute("tabindex", "0");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(componentWrapper).toEqualAttribute("tabindex", "0");
+        expect(paths[0]).toEqualAttribute("tabindex", "-1");
+        expect(paths[1]).toEqualAttribute("tabindex", "-1");
+    });
+    it("opens popover when slice clicked", async () => {
+        const tmpPage = await newE2EPage();
+        await tmpPage.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
+        <wm-chart-slice amount="95" popover-title="A" popover-text="Text A" popover-button-text="A Button" legend="A"></wm-chart-slice>
+        <wm-chart-slice amount="5" popover-title="B" popover-text="Text B" popover-button-text="B Button" legend="B"></wm-chart-slice>
+      </wm-chart>`);
+        await tmpPage.waitForChanges;
+        let hasPopover = await tmpPage.find("wm-chart >>> .popover");
+        const path = await tmpPage.find("wm-chart >>> path");
+        expect(hasPopover).toBeFalsy;
+        await path.click();
+        await tmpPage.waitForChanges();
+        hasPopover = await tmpPage.find("wm-chart >>> .popover");
+        expect(hasPopover).toBeTruthy;
+    });
+    it("activating popover button fires event", async () => {
+        const tmpPage = await newE2EPage();
+        await tmpPage.setContent(`<wm-chart id="one" label="the label" chart-type="doughnut3">
+      <wm-chart-slice amount="5" popover-title="A" popover-text="Text A" popover-button-text="A Button" legend="A"></wm-chart-slice>
+      <wm-chart-slice amount="95" popover-title="B" popover-text="Text B" popover-button-text="B Button" legend="B"></wm-chart-slice>
+      </wm-chart>
+      <div id="indicator"></div>`);
+        await tmpPage.waitForChanges;
+        await tmpPage.evaluate(async () => {
+            const component = await document.querySelector("wm-chart");
+            const indicator = await document.querySelector("#indicator");
+            await component.addEventListener("wmChartPopoverButtonTriggered", () => (indicator.textContent = "event heard"));
+        });
+        await tmpPage.waitForChanges;
+        const indicator = await tmpPage.find("#indicator");
+        expect(indicator.textContent).toBe("");
+        await tmpPage.keyboard.press("Tab");
+        await tmpPage.waitForChanges();
+        await tmpPage.keyboard.press("ArrowDown");
+        await tmpPage.waitForChanges();
+        await tmpPage.keyboard.press("Enter");
+        await tmpPage.waitForChanges();
+        expect(indicator.textContent).toBe("event heard");
+    });
+});

package/dist/collection/components/charts/wm-chart/wm-chart.js CHANGED Viewed

@@ -107,8 +107,15 @@ export class Chart {
     renderBarText(s, minimumWidth) {
         let val;
         if (this.valueFormat === "percentage") {
-            // if segment has an amount, but "0" percentage (it's below 0.5% and rounded down), still display it as <1%
-            val = s.perc === 0 && s.amount > 0 ? "<1%" : `${s.perc}%`;
+            if (s.perc === 0 && s.amount > 0) {
+                val = "<1%";
+            }
+            else if (s.perc === 100 && s.amount < this.total) {
+                val = ">99%";
+            }
+            else {
+                val = s.perc + "%";
+            }
         }
         else if (this.valueFormat === "amount") {
             val = s.amount;
@@ -138,7 +145,7 @@ export class Chart {
         }
     }
     render() {
-        return (h(Host, { key: 'ef9b572d9a621ce353e3a9938f742fcbc112bdaa', onBlur: () => exitChart.call(this) }, h("div", { key: '1986f84f897d79ccf0d0b8553bcd8d10470910f1', ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, h("label", { key: 'dce7ee04fed3d9eb491eebf2c90c3b951776b2bb', id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, h("span", { key: '3a88022a876f5e26861cd38f7770dde825a23928', class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { key: '3eebb869fd86ef29cce02239139019ba833d1e5f', class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.isBar && !this.printMode && renderHiddenValuesMessage()), renderInstructionsText()));
+        return (h(Host, { onBlur: () => exitChart.call(this) }, h("div", { ref: (el) => (this.componentWrapperEl = el), class: `component-wrapper ${this.currentChartType} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""} ${this.labelPosition === "left" && this.currentChartType === "bar4" ? "left-label" : ""}`, role: "application", "aria-label": this.ariaLabelText, tabindex: 0, "aria-roledescription": chartMessages.interactiveChart, "aria-describedby": "chart-instructions" }, h("label", { id: `label-${this.uid}`, class: `label --${this.labelPosition}`, htmlFor: `graphic-${this.uid}` }, h("span", { class: "label-text" }, this.label), this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""), this.isBar && renderLegend.call(this, this.currentChartType), this.renderChart(), this.isDoughnut && renderLegend.call(this, this.currentChartType), h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "", onIntChartPopoverOpenChanged: (ev) => this.handlePopoverOpenChanged(ev) }), this.isBar && !this.printMode && renderHiddenValuesMessage()), renderInstructionsText()));
     }
     static get is() { return "wm-chart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/charts/wm-chart/wm-chart.spec.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { newSpecPage } from "@stencil/core/testing";
+import * as globalFuncs from "../../../global/functions";
+jest.spyOn(globalFuncs, "generateId");
+// @ts-ignore
+globalFuncs.generateId.mockImplementation(() => "random-id");
+import { Chart } from "./wm-chart";
+// mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+describe("wm-chart", () => {
+    it("builds", async () => {
+        const page = await newSpecPage({ components: [Chart], html: '<wm-chart label="charty"></wm-chart>' });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("properties and attributes", async () => {
+        const page = await newSpecPage({ components: [Chart], html: '<wm-chart label="charty"></wm-chart>' });
+        const componentWrapper = page.root.shadowRoot.querySelector(".component-wrapper");
+        expect(componentWrapper).toEqualAttribute("role", "application");
+        expect(componentWrapper).toEqualAttribute("aria-label", "charty");
+        expect(componentWrapper).toEqualAttribute("aria-roledescription", "Interactive chart");
+        expect(componentWrapper).toEqualAttribute("aria-describedby", "chart-instructions");
+    });
+    // needs refactoring before it can be tested
+    // it("generates the svg path", () => {
+    //   const chart = new Chart();
+    //   expect(chart.getPathData(122, 23)).toEqual("thing");
+    // })
+    // needs refactoring before it can be tested
+    // it("outputs the svg arc syntax", () => {
+    //   const chart = new Chart();
+    //   // the 2nd arc is set according to whether we're drawing the inner or outer arc, and whether it's concave or convex
+    //   expect(chart.getArc(23, "0 1", 34, 66)).toEqual("nene");
+    // })
+});

package/dist/collection/components/charts/wm-line-chart/wm-line-chart.e2e.js ADDED Viewed

@@ -0,0 +1,176 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-line-chart", () => {
+    let page;
+    async function createPageHelper() {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    <wm-line-chart
+          label="Regional Job Trends"
+          description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+          x-axis-label="Year"
+          y-axis-label="Change Since 2020"
+          line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": null, "2024": 20, "2025": 23, "2026": 25, "2027": 32, "2028": 35, "2029": 40, "2030": 42, "2031": 52, "2032": 54, "2033": 61}, "National": {"2020": 8, "2021": 13, "2022": 16, "2023": 21, "2024": 23, "2025": 26, "2026": 28, "2027": 29, "2028": 32, "2029": 35, "2030": 39, "2031": 49, "2032": 51, "2033": 58} }'
+          units="year,%"
+          show-deltas="true"
+          y-range="0,25,50,75,100"
+          highlight-start="2026"
+          visibility-toggles="true"
+        >
+        </wm-line-chart>
+  </main></body></html>`);
+    }
+    it("passes Axe tests", async () => {
+        await createPageHelper();
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("has keyboard navigation for legend", async () => {
+        await createPageHelper();
+        // first focus goes to first button
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-0");
+        // wraps right
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-1");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-0");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-1");
+        // wraps left
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-0");
+    });
+    it("has keyboard navigation for data points", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    <wm-line-chart
+          label="Regional Job Trends"
+          description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+          x-axis-label="Year"
+          y-axis-label="Change Since 2020"
+          line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13}, "National": {"2020": 8, "2021": null, "2022": 16}}'
+          y-range="0,25,50,75,100"
+        >
+        </wm-line-chart>
+  </main></body></html>`);
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("Regional-1");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-2");
+        // wraps left
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+        // wraps Left
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-2");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-1");
+        // next line
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        // skips null data point
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-2");
+        // wraps to first line
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+        // wraps to last line
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+    });
+    it("visibility toggle hides lines, data points are skipped by navigation", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    <wm-line-chart
+          label="Regional Job Trends"
+          description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
+          x-axis-label="Year"
+          y-axis-label="Change Since 2020"
+          line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13}, "National": {"2020": 8, "2021": 12, "2022": 16}, "International": {"2020": 8, "2021": 12, "2022": 16}}'
+          visibility-toggles="true"
+        >
+        </wm-line-chart>
+  </main></body></html>`);
+        const allLineEls = await page.findAll("wm-line-chart >>> .line");
+        expect(allLineEls[0]).not.toHaveClass("hidden");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        // Enter key toggles button
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(allLineEls[0]).toHaveClass("hidden");
+        // Space key toggles button
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(allLineEls[0]).not.toHaveClass("hidden");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(allLineEls[0]).toHaveClass("hidden");
+        // tab focuses first visible data point
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("International-0");
+        // data point nav skips hidden line
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        // data point nav skips hidden line
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("International-0");
+    });
+});

package/dist/collection/components/charts/wm-line-chart/wm-line-chart.js CHANGED Viewed

@@ -11,12 +11,12 @@ export class LineChart {
         this.displayedXIntervals = [];
         this.yIntervals = [];
         this.lineStyles = [
-            { color: "#8b86ca", icon: "triangle" }, // lavender
-            { color: "#2e1b46", icon: "circle" }, // midnight
-            { color: "#0089e4", icon: "square" }, // blue
-            { color: "#088000", icon: "star" }, // forest
-            { color: "#ea8500", icon: "rhombus" }, // orange
-            { color: "#d54f41", icon: "triangle-inverted" }, // red
+            { color: "#8b86ca", icon: "triangle" },
+            { color: "#2e1b46", icon: "circle" },
+            { color: "#0089e4", icon: "square" },
+            { color: "#088000", icon: "star" },
+            { color: "#ea8500", icon: "rhombus" },
+            { color: "#d54f41", icon: "triangle-inverted" },
             { color: "#146ca9", icon: "pentagon" }, // blue
         ];
         this.debouncedResize = debounce(async () => {
@@ -29,7 +29,7 @@ export class LineChart {
         this.lineData = undefined;
         this.units = "null,null";
         this.labelWidth = "120px";
-        this.highlightQualifier = "highlighted";
+        this.highlightQualifier = lineChartMessages.highlightQualifier;
         this.highlightStart = undefined;
         this.highlightEnd = undefined;
         this.visibilityToggles = false;
@@ -171,7 +171,8 @@ export class LineChart {
     lineFocusMessage(lineIdx) {
         const label = this.dataPointMatrix[lineIdx][0].lineLabel;
         const numDataPoints = this.dataPointMatrix[lineIdx].filter((datapoint) => datapoint.yValue !== null).length;
-        return `${label}, line ${lineIdx + 1} of ${this.dataPointMatrix.length} with ${numDataPoints} data points`;
+        const focusMessage = lineChartMessages.getLineFocusAnnouncement(label, lineIdx + 1, this.dataPointMatrix.length, numDataPoints);
+        return focusMessage;
     }
     focusDataPointByEl(pointEl) {
         this.pointEls.forEach((point) => (point.tabIndex = -1));
@@ -301,7 +302,7 @@ export class LineChart {
         })));
     }
     renderVisibilityToggle(lineLabel, lineIdx, isHidden) {
-        return (h("wm-button", { id: `visibility-button-${lineIdx}`, class: "visibility-toggle", "label-for-identical-buttons": `${lineIdx === 0 ? `Toggle line visibility list with ${this.dataPointMatrix.length} items` : ""} ${isHidden ? globalMessages.show : globalMessages.hide} ${lineLabel} toggle ${isHidden ? "pressed" : ""}`, "button-type": "navigational", tooltip: isHidden ? globalMessages.show : globalMessages.hide, tooltipPosition: "bottom", icon: isHidden ? "#hide" : "#show", onClick: () => this.toggleLineVisibility(lineIdx), onKeyDown: (ev) => this.handleVisibilityToggleKeydown(ev, lineIdx), onFocus: () => (this.popoverIndex = -1) }));
+        return (h("wm-button", { id: `visibility-button-${lineIdx}`, class: "visibility-toggle", "label-for-identical-buttons": `${lineIdx === 0 ? lineChartMessages.getToggleButtonLabel(this.dataPointMatrix.length) : ""} ${isHidden ? globalMessages.show : globalMessages.hide} ${lineLabel} ${lineChartMessages.getToggleButtonState(isHidden)}`, "button-type": "navigational", tooltip: isHidden ? globalMessages.show : globalMessages.hide, tooltipPosition: "bottom", icon: isHidden ? "#hide" : "#show", onClick: () => this.toggleLineVisibility(lineIdx), onKeyDown: (ev) => this.handleVisibilityToggleKeydown(ev, lineIdx), onFocus: () => (this.popoverIndex = -1) }));
     }
     renderIcon(lineIdx) {
         const { color, icon } = this.lineStyles[lineIdx];
@@ -396,7 +397,7 @@ export class LineChart {
             popoverStyle = {
                 "--leftPosition": `0%`,
                 "--topPosition": "0%",
-                maxWidth: Math.min(this.el.clientWidth - 2, 400) + "px", // take up no more max-width than is visually available
+                maxWidth: Math.min(this.el.clientWidth - 2, 400) + "px",
                 transform: `translateX(calc(${displaceLeft}))`, // align with left edge of component
             };
         }
@@ -436,9 +437,9 @@ export class LineChart {
         return h("div", { class: "highlight", style: highlightStyle });
     }
     render() {
-        return (h(Host, { key: '4ddac80582553966d0220bf23227946830071c2c', onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, h("div", { key: '0449968192d808926652fac96cfa2067471b0dfb', class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { key: '4f1b3b0a9b5979fa34a2444201cac973015c0994', class: "chart-wrapper" }, h("div", { key: '88ded396f08aff0a52558c5f07a4577db39417bf', class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), h("div", { key: '417b81ee9507d4513120033a82ed30eaa44f960a', ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
+        return (h(Host, { onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, h("div", { class: "component-wrapper", role: "application", "aria-roledescription": chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), h("div", { class: "chart-wrapper" }, h("div", { class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), h("div", { ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
                 "--backgroundSize": `${this.dataPointMatrix[0][this.xIntervals.indexOf(this.displayedXIntervals[1])].xPositionPercent}%`,
-            } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), h("div", { key: '89ba3ebc74778a9cea23786ecaffe2314e3781fa', class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { key: 'ef3dab4aea3e3600db34017e74903d6f5e0f6cff', id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { key: '8ed7658d881d03f1b22e0b3c39046c9170c870bb', ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
+            } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), h("div", { class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), h("div", { id: "chart-description", class: "sr-only" }, `${lineChartMessages.instructions} ${this.description}`), h("div", { ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
     }
     static get is() { return "wm-line-chart"; }
     static get encapsulation() { return "shadow"; }
@@ -592,7 +593,7 @@ export class LineChart {
                 },
                 "attribute": "highlight-qualifier",
                 "reflect": false,
-                "defaultValue": "\"highlighted\""
+                "defaultValue": "lineChartMessages.highlightQualifier"
             },
             "highlightStart": {
                 "type": "string",