New design for survey dashboards

accessibilityTests/helper.ts

@@ -0,0 +1,36 @@
+import { Page } from "@playwright/test";
+import { RunOptions } from "axe-core";
+
+export const FLOAT_PRECISION = 0.01;
+
+// https://www.deque.com/axe/core-documentation/api-documentation/#overview
+export const axeTags = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "best-practice", "section508", "wcag412"];
+
+export const axeOptions: RunOptions = {
+  runOnly: {
+    type: "tag",
+    values: axeTags
+  },
+  rules: {
+    //https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
+    "color-contrast": {
+      enabled: false
+    },
+    "document-title": {
+      enabled: false
+    },
+    "landmark-one-main": {
+      enabled: false
+    },
+    "page-has-heading-one": {
+      enabled: false
+    },
+    "region": {
+      enabled: false
+    }
+  }
+};
+
+export function getListItemByText(page, text) {
+  return page.getByRole("option", { name: text, exact: true });
+}

accessibilityTests/matrixes.spec.ts

@@ -0,0 +1,108 @@
+import { axeOptions, getListItemByText } from "./helper";
+import { checkA11y, injectAxe } from "axe-playwright";
+import { test } from "@playwright/test";
+
+test.describe("Matrixes visualizer", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("http://localhost:8080/examples/matrixes.html");
+    await page.waitForLoadState("networkidle");
+    await injectAxe(page);
+  });
+
+  test("matrix single", async ({ page }) => {
+    const axeContext = "#summaryContainer";
+    const questionTitleSelector = page.locator("h3").filter({ hasText: "What is your perception of these brands?" });
+    const questionVisualizerSelector = questionTitleSelector.locator("..").locator("..");
+    questionVisualizerSelector.scrollIntoViewIfNeeded();
+
+    const chartTypeSelector = questionVisualizerSelector.locator(".sa-dropdown").first();
+    const chartContentSelector = questionVisualizerSelector.locator(".sa-visualizer__content");
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Stacked Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Pie").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Doughnut").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    const transposeButtonSelector = questionVisualizerSelector.locator(".sa-toolbar__button").filter({ hasText: /^Per Columns$/ });
+    await transposeButtonSelector.click();
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Stacked Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Pie").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Doughnut").click();
+    await checkA11y(page, axeContext, { axeOptions });
+  });
+
+  test("matrixdropdown simple", async ({ page }) => {
+    const axeContext = "#summaryContainer";
+    const questionTitleSelector = page.locator("h3").filter({ hasText: "What do you feel about these brands?" });
+    const questionVisualizerSelector = questionTitleSelector.locator("..").locator("..");
+    questionVisualizerSelector.scrollIntoViewIfNeeded();
+
+    const column1TitleSelector = page.locator("h3").filter({ hasText: "My Opinion" });
+    const column1VisualizerSelector = column1TitleSelector.locator("..").locator("..");
+    column1VisualizerSelector.scrollIntoViewIfNeeded();
+
+    const chartCol1TypeSelector = column1VisualizerSelector.locator(".sa-dropdown").nth(1);
+    const chartCol1ContentSelector = column1VisualizerSelector.locator(".sa-visualizer__content").nth(1);
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartCol1TypeSelector.click();
+    await getListItemByText(page, "Vertical Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartCol1TypeSelector.click();
+    await getListItemByText(page, "Pie").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartCol1TypeSelector.click();
+    await getListItemByText(page, "Doughnut").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartCol1TypeSelector.click();
+    await getListItemByText(page, "Stacked Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    const transposeButtonSelector = column1VisualizerSelector.locator(".sa-toolbar__button").filter({ hasText: /^Per Columns$/ });
+    await transposeButtonSelector.click();
+
+    await chartCol1TypeSelector.click();
+    await getListItemByText(page, "Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartCol1TypeSelector.click();
+    await getListItemByText(page, "Vertical Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartCol1TypeSelector.click();
+    await getListItemByText(page, "Pie").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartCol1TypeSelector.click();
+    await getListItemByText(page, "Doughnut").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartCol1TypeSelector.click();
+    await getListItemByText(page, "Stacked Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+  });
+
+});

accessibilityTests/misc.spec.ts

@@ -0,0 +1,70 @@
+import { axeOptions, getListItemByText } from "./helper";
+import { checkA11y, injectAxe } from "axe-playwright";
+import { test } from "@playwright/test";
+
+test.describe("Miscellaneous cases", () => {
+  test.beforeEach(async ({ page }) => {
+  });
+
+  test("matrix one row", async ({ page }) => {
+    await page.goto("http://localhost:8080/examples/matrix-one-row.html");
+    await injectAxe(page);
+    await page.setViewportSize({ width: 800, height: 1000 });
+    const axeContext = "#summaryContainer";
+
+    const questionTitleSelector = page.locator("h3").filter({ hasText: "Please indicate if you agree or disagree with the following statements" });
+    const questionVisualizerSelector = questionTitleSelector.locator("..").locator("..");
+    questionVisualizerSelector.scrollIntoViewIfNeeded();
+
+    const chartTypeSelector = questionVisualizerSelector.locator(".sa-dropdown").first();
+    const chartContentSelector = questionVisualizerSelector.locator(".sa-visualizer__content");
+
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Pie").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    const transposeButtonSelector = questionVisualizerSelector.locator(".sa-toolbar__button").filter({ hasText: /^Per Columns$/ });
+    await transposeButtonSelector.click();
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Pie").click();
+    await checkA11y(page, axeContext, { axeOptions });
+  });
+
+  test("matrix dropdown grouped", async ({ page }) => {
+    await page.goto("http://localhost:8080/examples/matrixdropdown-grouped.html");
+    await injectAxe(page);
+    await page.setViewportSize({ width: 800, height: 1000 });
+
+    const axeContext = "#summaryContainer";
+    const questionTitleSelector = page.locator("h3").filter({ hasText: "Please select the top 3 processes that you perceived as most difficult or troublesome." });
+    const questionVisualizerSelector = questionTitleSelector.locator("..").locator("..");
+    questionVisualizerSelector.scrollIntoViewIfNeeded();
+
+    const chartTypeSelector = questionVisualizerSelector.locator(".sa-dropdown").first();
+    const chartContentSelector = questionVisualizerSelector.locator(".sa-visualizer__content");
+
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    const transposeButtonSelector = questionVisualizerSelector.locator(".sa-toolbar__button").filter({ hasText: /^Per Columns$/ });
+    await transposeButtonSelector.click();
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Stacked Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+  });
+});

accessibilityTests/pivot.spec.ts

@@ -0,0 +1,42 @@
+import { axeOptions, getListItemByText } from "./helper";
+import { checkA11y, injectAxe } from "axe-playwright";
+import { test } from "@playwright/test";
+
+test.describe("Pivot chart", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("http://localhost:8080/examples/pivot.html");
+    await injectAxe(page);
+    await page.setViewportSize({ width: 1000, height: 800 });
+  });
+
+  test("simple cases", async ({ page }) => {
+    const axeContext = "#pivotContainer";
+    const xAxisSelector = page.locator(".sa-dropdown-header").nth(1);
+    const yAxisSelector = page.locator(".sa-dropdown-header").nth(2);
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await yAxisSelector.click();
+    await getListItemByText(page, "Item kind").click();
+    await checkA11y(page, axeContext, { axeOptions });
+    await yAxisSelector.click();
+    await getListItemByText(page, "Bill amount").click();
+    await checkA11y(page, axeContext, { axeOptions });
+    await xAxisSelector.click();
+    await getListItemByText(page, "Item kind").click();
+    await yAxisSelector.click();
+    await getListItemByText(page, "Gender").click();
+    await checkA11y(page, axeContext, { axeOptions });
+    await yAxisSelector.click();
+    await getListItemByText(page, "Bill amount").click();
+    await checkA11y(page, axeContext, { axeOptions });
+    await xAxisSelector.click();
+    await getListItemByText(page, "Bill amount").click();
+    await yAxisSelector.click();
+    await getListItemByText(page, "Gender").click();
+    await checkA11y(page, axeContext, { axeOptions });
+    await yAxisSelector.click();
+    await getListItemByText(page, "Item kind").click();
+    await checkA11y(page, axeContext, { axeOptions });
+  });
+
+});

accessibilityTests/summary.spec.ts

@@ -0,0 +1,122 @@
+import { axeOptions, getListItemByText } from "./helper";
+import { checkA11y, injectAxe } from "axe-playwright";
+import { test } from "@playwright/test";
+
+test.describe("Summary common", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("http://localhost:8080/examples/summary.html");
+    await injectAxe(page);
+    await page.setViewportSize({ width: 800, height: 1000 });
+  });
+
+  test("matrix simple cases", async ({ page }) => {
+    const axeContext = "#summaryContainer";
+    const questionTitleSelector = page.locator("h3").filter({ hasText: "Please indicate if you agree or disagree with the following statements" });
+    const questionVisualizerSelector = questionTitleSelector.locator("..").locator("..");
+    questionVisualizerSelector.scrollIntoViewIfNeeded();
+
+    const chartTypeSelector = questionVisualizerSelector.locator(".sa-dropdown").first();
+    const chartContentSelector = questionVisualizerSelector.locator(".sa-visualizer__content");
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Stacked Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Pie").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Doughnut").click();
+    await checkA11y(page, axeContext, { axeOptions });
+  });
+
+  test("boolean simple cases", async ({ page }) => {
+    const axeContext = "#summaryContainer";
+    const questionTitleSelector = page.locator("h3").filter({ hasText: "Please answer the question" });
+    const questionVisualizerSelector = questionTitleSelector.locator("..").locator("..");
+    questionVisualizerSelector.scrollIntoViewIfNeeded();
+
+    const chartTypeSelector = questionVisualizerSelector.locator(".sa-dropdown").first();
+    const chartContentSelector = questionVisualizerSelector.locator(".sa-visualizer__content");
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Doughnut").click();
+    await checkA11y(page, axeContext, { axeOptions });
+  });
+
+  test("select simple cases", async ({ page }) => {
+    const axeContext = "#summaryContainer";
+    const questionTitleSelector = page.locator("h3").filter({ hasText: "Which of the following best describes you or your organization?" });
+    const questionVisualizerSelector = questionTitleSelector.locator("..").locator("..");
+    questionVisualizerSelector.scrollIntoViewIfNeeded();
+
+    const visualizerSelector = questionVisualizerSelector.locator(".sa-dropdown").first();
+    const chartTypeSelector = questionVisualizerSelector.locator(".sa-dropdown").nth(1);
+    const chartContentSelector = questionVisualizerSelector.locator(".sa-visualizer__content").nth(1);
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Vertical Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Pie").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Doughnut").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await visualizerSelector.click();
+    await getListItemByText(page, "Table").click();
+    await checkA11y(page, axeContext, { axeOptions });
+  });
+
+  test("simple cases", async ({ page }) => {
+    const axeContext = "#summaryContainer";
+    const questionTitleSelector = page.locator("h3").filter({ hasText: "How likely are you to recommend SurveyJS to a friend or colleague?" });
+    const questionVisualizerSelector = questionTitleSelector.locator("..").locator("..");
+    questionVisualizerSelector.scrollIntoViewIfNeeded();
+
+    const visualizerSelector = questionVisualizerSelector.locator(".sa-dropdown").first();
+    const chartTypeSelector = questionVisualizerSelector.locator(".sa-dropdown").nth(1);
+    const chartContentSelector = questionVisualizerSelector.locator(".sa-visualizer__content").nth(1);
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await chartTypeSelector.click();
+    await getListItemByText(page, "Bar").click();
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await visualizerSelector.click();
+    await getListItemByText(page, "Average").click();
+
+    const gaugeTypeSelector = questionVisualizerSelector.locator(".sa-dropdown").nth(1);
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await gaugeTypeSelector.click();
+    await getListItemByText(page, "Bullet").click();
+    await checkA11y(page, axeContext, { axeOptions });
+  });
+
+  test("text simple cases", async ({ page }) => {
+    const axeContext = "#summaryContainer";
+    const questionTitleSelector = page.locator("h3").filter({ hasText: "What's your favorite functionality / add-on?" });
+    const questionVisualizerSelector = questionTitleSelector.locator("..").locator("..");
+    questionVisualizerSelector.scrollIntoViewIfNeeded();
+
+    const visualizerTypeSelector = questionVisualizerSelector.locator(".sa-dropdown").first();
+    const chartContentSelector = questionVisualizerSelector.locator(".sa-visualizer__content").nth(1);
+    await checkA11y(page, axeContext, { axeOptions });
+
+    await visualizerTypeSelector.click();
+    await getListItemByText(page, "Texts in table").click();
+    await checkA11y(page, axeContext, { axeOptions });
+  });
+});