Check examples with axe, and fix some of the errors

navikt · Sep 21, 2024 · 5fc3b5a · 5fc3b5a
1 parent 0d29a07
commit 5fc3b5a
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 28 deletions.
diff --git a/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx b/aksel.nav.no/website/components/website-modules/examples/withDsExample.tsx
@@ -8,6 +8,7 @@ import {
   TabletIcon,
 } from "@navikt/aksel-icons";
 import { HStack } from "@navikt/ds-react";
+import { SEO } from "../seo/SEO";
 import styles from "./examples.module.css";
 
 type withDsT = {
@@ -75,23 +76,26 @@ export const withDsExample = (
     };
 
     return (
-      <div
-        className={cl(styles.container, {
-          [styles.containerDefault]: !variant,
-          [styles.containerStatic]: variant === "static",
-          [styles.containerFull]: variant === "full",
-          [styles.containerStaticFull]: variant === "static-full",
-        })}
-        style={{ background: getBg(background) }}
-      >
-        {showBreakpoints && <BreakpointText />}
-        <div
-          id="ds-example"
-          className={variant === "static" ? styles.exampleStatic : undefined}
+      <>
+        <SEO title="Kodeeksempel" />
+        <main
+          className={cl(styles.container, {
+            [styles.containerDefault]: !variant,
+            [styles.containerStatic]: variant === "static",
+            [styles.containerFull]: variant === "full",
+            [styles.containerStaticFull]: variant === "static-full",
+          })}
+          style={{ background: getBg(background) }}
         >
-          <Component {...props} />
-        </div>
-      </div>
+          {showBreakpoints && <BreakpointText />}
+          <div
+            id="ds-example"
+            className={variant === "static" ? styles.exampleStatic : undefined}
+          >
+            <Component {...props} />
+          </div>
+        </main>
+      </>
     );
   };
 

diff --git a/aksel.nav.no/website/e2e/axe.e2e.ts b/aksel.nav.no/website/e2e/axe.e2e.ts
@@ -1,23 +1,50 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect, test } from "@playwright/test";
-import urls from "./sitemap-urls.json";
+import { getDirectories } from "../scripts/update-examples/parts/get-directories";
+import { getFiles } from "../scripts/update-examples/parts/get-files";
+
+//import urls from "./sitemap-urls.json";
+
+const examples = getDirectories("eksempler");
 
 test.describe("Axe a11y", () => {
-  for (const url of urls) {
+  for (const example of examples) {
+    const testFiles = getFiles(example.path, "eksempler");
+
+    for (const testFile of testFiles.files) {
+      const url = `/eksempler/${example.path}/${testFile.replace(".tsx", "")}`;
+
+      test(`Check page ${url}`, async ({ page }) => {
+        await page.goto(`http://localhost:3000${url}`);
+        //await page.waitForLoadState("domcontentloaded");
+        const a11yScanResults = await new AxeBuilder({
+          page,
+        })
+          .disableRules(["page-has-heading-one"])
+          .analyze();
+        expect(a11yScanResults.violations).toEqual([]);
+      });
+    }
+  }
+
+  // TODO: Ser ikke ut som axe plukker opp page-attributtet på button i Pagination...
+  // TODO: Templates
+
+  /* for (const url of urls) {
     test(`Check page ${url}`, async ({ page }) => {
       await page.goto(`http://localhost:3000${url}`);
       await page.waitForLoadState("domcontentloaded");
-      const accessibilityScanResults = await new AxeBuilder({ page })
+      const a11yScanResults = await new AxeBuilder({ page })
         .disableRules(["definition-list", "scrollable-region-focusable"])
         .exclude("iframe")
         .exclude("#aksel-expansioncard")
         .exclude("#toc-scroll")
         .exclude("#toc-scroll")
         .exclude(".aksel-codesnippet")
         .analyze();
-      expect(accessibilityScanResults.violations).toEqual([]);
+      expect(a11yScanResults.violations).toEqual([]);
     });
-  }
+  } */
 });
 
 /*

diff --git a/aksel.nav.no/website/pages/eksempler/pagination/sizes.tsx b/aksel.nav.no/website/pages/eksempler/pagination/sizes.tsx
@@ -12,24 +12,27 @@ const Example = () => {
         count={9}
         boundaryCount={1}
         siblingCount={1}
+        aria-label="Paginering medium"
       />
 
       <Pagination
+        size="small"
         page={pageState}
         onPageChange={setPageState}
         count={9}
         boundaryCount={1}
         siblingCount={1}
-        size="small"
+        aria-label="Paginering small"
       />
 
       <Pagination
+        size="xsmall"
         page={pageState}
         onPageChange={setPageState}
         count={9}
         boundaryCount={1}
         siblingCount={1}
-        size="xsmall"
+        aria-label="Paginering xsmall"
       />
     </VStack>
   );

diff --git a/aksel.nav.no/website/playwright.config.ts b/aksel.nav.no/website/playwright.config.ts
@@ -2,7 +2,7 @@ import type { PlaywrightTestConfig } from "@playwright/test";
 import { devices } from "@playwright/test";
 import path from "path";
 
-const smoketestMatcher = /smoketest(-\w+)?\.test\.ts/;
+//const smoketestMatcher = /smoketest(-\w+)?\.test\.ts/;
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
@@ -46,10 +46,11 @@ const config: PlaywrightTestConfig = {
         ...devices["Desktop Chrome"],
       },
       ...(process.env.FULL_TEST
-        ? { testMatch: [/.*\.e2e\.(ts|tsx)/] }
-        : { testMatch: [smoketestMatcher, /search.e2e.ts/] }),
+        ? { testMatch: [/axe\.e2e\.(ts|tsx)/] }
+        : { testMatch: [/axe.e2e.ts/] }),
     },
-    {
+    // TODO: Revert all changes to this file
+    /* {
       name: "Safari",
       use: {
         ...devices["Desktop Safari"],
@@ -62,7 +63,7 @@ const config: PlaywrightTestConfig = {
         ...devices["iPhone 12"],
       },
       testMatch: [smoketestMatcher],
-    },
+    }, */
 
     /* {
       name: "firefox",