Legg inn playwright axe-plugin

package.json

@@ -38,7 +38,8 @@
         "reboot": "pnpm clean && pnpm boot",
         "scaffold": "node './scripts/scaffold'",
         "integration:ci": "playwright test",
-        "integration:interactive": "playwright test --ui"
+        "integration:interactive": "playwright test --ui",
+        "integration:axe": "playwright test -g axe"
     },
     "packageManager": "[email protected]",
     "pnpm": {
@@ -65,6 +66,7 @@
         "react-is": "^18.3.1"
     },
     "devDependencies": {
+        "@axe-core/playwright": "^4.10.1",
         "@commitlint/cli": "^17.8.1",
         "@commitlint/config-conventional": "^17.8.1",
         "@fremtind/browserslist-config-jkl": "^2.0.1",

packages/jokul/CONTRIBUTING.md

@@ -2,6 +2,27 @@
 
 Se også [CONTRIBUTING.md](../../CONTRIBUTING.md).
 
+## Integrasjonstester
+
+Vi har en testsuite laget med [Playwright](https://playwright.dev/). Den håndterer
+både visuell regresjonstesting og testing mot WCAG kriteria med en [Axe](https://www.deque.com/axe/)-plugin.
+
+### Visuelle regresjonstester
+
+Disse er kun tenkt kjørt på CI-serveren for å unngå false negatives når skjermbilder
+tas på forskjellige platformer. Dersom det allerede finnes skjermbilder for en test
+vil det gjøres en sammenligning mellom de som er lagret og det som er rendret
+i browseren og dersom det ikke finnes noen skjermbilder vil nye tas.
+
+Dersom du har gjort visuelle endringer er dermed alt du trenger å gjøre å slette
+eksisterende skjermbilder, så vil en Github action ta nye og gjøre en commit mot
+branchen etter at du oppretter en PR.
+
+### Testing mot WCAG kriteria
+
+Disse kan du fint kjøre lokalt, bruk da kommandoen `CI=true pnpm integration:axe` på
+rot av prosjektet.
+
 ## Lage ny komponent
 
 Følg mappe- og filstruktur fra de andre komponentene.

packages/jokul/src/components/accordion/integration/accordion.spec.ts

@@ -1,6 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
-
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 let helper: TestHelper;
 
 test.beforeEach(async ({ page }, workerInfo) => {
@@ -35,3 +34,13 @@ test("opens accordion", async () => {
         },
     });
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await axe();
+
+    await helper.clickElement('[data-testid="jkl-accordion-item"]');
+
+    await axe();
+});

packages/jokul/src/components/breadcrumb/integration/breadcrumb.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -21,3 +21,9 @@ test("renders correctly", async () => {
 
     await helper.snapshots({ focusElement: ".jkl-link" });
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await axe();
+});

packages/jokul/src/components/button/integration/button.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -29,3 +29,13 @@ test("renders correctly with icon", async () => {
 
     await helper.snapshots();
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await axe();
+
+    await helper.checkProp("bool-prop-icon");
+
+    await axe();
+});

packages/jokul/src/components/card/integration/card.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -21,3 +21,10 @@ test("renders correctly", async () => {
 
     await helper.snapshots({ focusElement: ".jkl-card" });
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    // The plugin claims aria-expanded can't be used with the checkbox role. We disagree.
+    await axe({ disableRules: ["aria-allowed-attr"] });
+});

packages/jokul/src/components/checkbox/integration/checkbox.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -29,3 +29,13 @@ test("renders correctly with error message", async () => {
 
     await helper.snapshots();
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await axe();
+
+    await helper.checkProp("bool-prop-med-feil");
+
+    await axe();
+});

packages/jokul/src/components/chip/integration/chip.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -29,3 +29,12 @@ test("renders correctly as filter", async () => {
 
     await helper.snapshots({ focusElement: ".jkl-chip" });
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await axe();
+    await helper.checkProp("choice-prop-filter");
+
+    await axe();
+});

packages/jokul/src/components/combobox/integration/combobox.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -29,3 +29,9 @@ test("renders correctly with help text", async () => {
 
     await helper.snapshots();
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await axe();
+});

packages/jokul/src/components/cookie-consent/integration/cookie-consent.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 

packages/jokul/src/components/datepicker/integration/datepicker.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 

packages/jokul/src/components/description-list/integration/description-list.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -21,3 +21,9 @@ test("renders correctly", async () => {
 
     await helper.snapshots();
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await axe();
+});

packages/jokul/src/components/expander/integration/expander.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -32,3 +32,18 @@ test("opens correctly", async () => {
 
     await helper.snapshots();
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    // The plugin claims aria-expanded can't be used with the checkbox role. We disagree.
+    await axe({ disableRules: ["aria-allowed-attr"] });
+
+    await helper.clickElement("summary");
+    await helper.clickElement(
+        ".jkl-expandable__wrapper:nth-of-type(3) summary",
+    );
+
+    // The plugin claims aria-expanded can't be used with the checkbox role. We disagree.
+    await axe({ disableRules: ["aria-allowed-attr"] });
+});

packages/jokul/src/components/expander/styles/expandable.scss

@@ -129,7 +129,7 @@
 
     @media (hover: hover) {
         &:hover {
-            background-color: var(--jkl-color-background-interactive-hover);
+            background-color: var(--jkl-color-background-interactive-selected);
         }
     }
 

packages/jokul/src/components/feedback/integration/feedback.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 

packages/jokul/src/components/file-input/integration/file-input.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -29,3 +29,9 @@ test("renders correctly in small mode", async () => {
 
     await helper.snapshots();
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await axe();
+});

packages/jokul/src/components/icon-button/integration/icon-button.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 

packages/jokul/src/components/icon/integration/icon.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -21,3 +21,9 @@ test("renders correctly", async () => {
 
     await helper.snapshots();
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await axe();
+});

packages/jokul/src/components/image/integration/image.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -27,3 +27,13 @@ test("renders correctly", async () => {
         },
     });
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await helper.clickElement('[data-testid="load-image-button"]');
+
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    await axe();
+});

packages/jokul/src/components/input-group/integration/input-group.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -23,3 +23,11 @@ test("renders correctly", async () => {
 
     await helper.snapshots({ focusElement: ".jkl-text-input__input" });
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await helper.checkProp("bool-prop-med-tooltip");
+
+    await axe();
+});

packages/jokul/src/components/input-panel/integration/input-panel.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -31,3 +31,17 @@ test("CheckPanel renders correctly", async () => {
 
     await helper.snapshots({ focusElement: "[aria-expanded='false']" });
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await helper.clickElement('[data-testid="radio-panel"]');
+
+    // The plugin claims aria-expanded can't be used with the radio role. We disagree.
+    await axe({ disableRules: ["aria-allowed-attr"] });
+
+    await helper.clickElement('[data-testid="check-panel"]');
+
+    // The plugin claims aria-expanded can't be used with the checkbox role. We disagree.
+    await axe({ disableRules: ["aria-allowed-attr"] });
+});

packages/jokul/src/components/link-list/integration/link-list.spec.ts

@@ -1,5 +1,5 @@
-import { test } from "@playwright/test";
-import { TestHelper } from "../../../../../../utils/playwright/TestHelper.mjs";
+import { test } from "utils/playwright/base.mjs";
+import { TestHelper } from "utils/playwright/TestHelper.mjs";
 
 let helper: TestHelper;
 
@@ -21,3 +21,9 @@ test("renders correctly", async () => {
 
     await helper.snapshots({ focusElement: ".jkl-link-list-link" });
 });
+
+test("axe", async ({ axe }) => {
+    await helper.open();
+
+    await axe();
+});