chore(tests): Adding accessibility tests through jest-axe

package.json

@@ -127,6 +127,7 @@
     "glob": "8.0.3",
     "husky": "8.0.1",
     "jest": "28.1.3",
+    "jest-axe": "6.0.0",
     "jest-environment-jsdom": "28.1.3",
     "lerna": "5.3.0",
     "lerna-changelog": "2.2.0",

src/components/bcl-accordion/accordion.test.js

@@ -1,10 +1,17 @@
-import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
+import {
+  renderTwigFileAsNode,
+  renderTwigFileAsHtml,
+} from "@openeuropa/bcl-test-utils";
+import { axe, toHaveNoViolations } from "jest-axe";
+
 import demoData from "@openeuropa/bcl-data-accordion/data";
 import demoCustomTags from "@openeuropa/bcl-data-accordion/data--custom-tags";
 
 const template = "@oe-bcl/bcl-accordion/accordion.html.twig";
 const render = (params) => renderTwigFileAsNode(template, params);
 
+expect.extend(toHaveNoViolations);
+
 describe("OE - Accordion", () => {
   test(`renders correctly`, () => {
     expect.assertions(1);
@@ -41,4 +48,10 @@ describe("OE - Accordion", () => {
 
     return expect(render(demoCustomTags)).resolves.toMatchSnapshot();
   });
+
+  test(`passes the accessibility tests`, async () => {
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoCustomTags))
+    ).toHaveNoViolations();
+  });
 });

src/components/bcl-alert/alert.test.js

@@ -1,10 +1,17 @@
-import { renderTwigFileAsNode, getVariants } from "@openeuropa/bcl-test-utils";
+import {
+  renderTwigFileAsNode,
+  renderTwigFileAsHtml,
+  getVariants,
+} from "@openeuropa/bcl-test-utils";
+import { axe, toHaveNoViolations } from "jest-axe";
 import demoData from "@openeuropa/bcl-data-alert/data";
 
 const template = "@oe-bcl/bcl-alert/alert.html.twig";
 const render = (params) => renderTwigFileAsNode(template, params, true);
 const variants = getVariants();
 
+expect.extend(toHaveNoViolations);
+
 describe("OE - Alert", () => {
   test(`renders correctly without close button`, () => {
     expect.assertions(1);
@@ -51,4 +58,10 @@ describe("OE - Alert", () => {
       ).resolves.toMatchSnapshot();
     });
   });
+
+  test(`passes the accessibility tests`, async () => {
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoData))
+    ).toHaveNoViolations();
+  });
 });

src/components/bcl-badge/badge.test.js

@@ -1,10 +1,17 @@
-import { renderTwigFileAsNode, getVariants } from "@openeuropa/bcl-test-utils";
+import {
+  renderTwigFileAsNode,
+  getVariants,
+  renderTwigFileAsHtml,
+} from "@openeuropa/bcl-test-utils";
+import { axe, toHaveNoViolations } from "jest-axe";
 import demoData from "@openeuropa/bcl-data-badge/data";
 
 const template = "@oe-bcl/bcl-badge/badge.html.twig";
 const render = (params) => renderTwigFileAsNode(template, params, true);
 const backgrounds = getVariants();
 
+expect.extend(toHaveNoViolations);
+
 describe("OE - badge", () => {
   test("renders correctly with a link", () => {
     expect.assertions(1);
@@ -62,4 +69,10 @@ describe("OE - badge", () => {
       ).resolves.toMatchSnapshot();
     });
   });
+
+  test(`passes the accessibility tests`, async () => {
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoData, true))
+    ).toHaveNoViolations();
+  });
 });

src/components/bcl-blockquote/blockquote.test.js

@@ -1,8 +1,13 @@
-import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
+import {
+  renderTwigFileAsNode,
+  renderTwigFileAsHtml,
+} from "@openeuropa/bcl-test-utils";
 import demoData from "@openeuropa/bcl-data-blockquote/data";
+import { axe, toHaveNoViolations } from "jest-axe";
 
 const template = "@oe-bcl/bcl-blockquote/blockquote.html.twig";
 const render = (params) => renderTwigFileAsNode(template, params, true);
+expect.extend(toHaveNoViolations);
 
 describe("OE - Blockquote", () => {
   test(`renders correctly`, () => {
@@ -40,4 +45,10 @@ describe("OE - Blockquote", () => {
       render({ ...demoData, alignment: "right" })
     ).resolves.toMatchSnapshot();
   });
+
+  test(`passes the accessibility tests`, async () => {
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoData, true))
+    ).toHaveNoViolations();
+  });
 });

src/components/bcl-breadcrumb/breadcrumb.test.js

@@ -1,6 +1,12 @@
-import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
+import {
+  renderTwigFileAsNode,
+  renderTwigFileAsHtml,
+} from "@openeuropa/bcl-test-utils";
+import { axe, toHaveNoViolations } from "jest-axe";
 import demoData from "@openeuropa/bcl-data-breadcrumb/data";
 
+expect.extend(toHaveNoViolations);
+
 const template = "@oe-bcl/bcl-breadcrumb/breadcrumb.html.twig";
 const render = (params) => renderTwigFileAsNode(template, params);
 
@@ -10,4 +16,10 @@ describe("OE - Breadcrumb", () => {
 
     return expect(render(demoData)).resolves.toMatchSnapshot();
   });
+
+  test(`passes the accessibility tests`, async () => {
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoData))
+    ).toHaveNoViolations();
+  });
 });

src/components/bcl-button-group/button-group.test.js

@@ -1,4 +1,9 @@
-import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
+import {
+  renderTwigFileAsNode,
+  renderTwigFileAsHtml,
+} from "@openeuropa/bcl-test-utils";
+import { axe, toHaveNoViolations } from "jest-axe";
+
 import demoData from "@openeuropa/bcl-data-button-group/data";
 import inputGroupData from "@openeuropa/bcl-data-button-group/data--input-group";
 import toolbarData from "@openeuropa/bcl-data-button-group/data--toolbar";
@@ -7,6 +12,8 @@ const template = "@oe-bcl/bcl-button-group/button-group.html.twig";
 const render = (params, reset) => renderTwigFileAsNode(template, params, reset);
 const sizes = ["lg", "md", "sm"];
 
+expect.extend(toHaveNoViolations);
+
 describe("OE - Button-group", () => {
   sizes.forEach((size) => {
     test(`${size} renders correctly`, () => {
@@ -45,4 +52,10 @@ describe("OE - Button-group", () => {
       render({ ...demoData, aria_label: "changed aria label" }, true)
     ).resolves.toMatchSnapshot();
   });
+
+  test(`passes the accessibility tests`, async () => {
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoData))
+    ).toHaveNoViolations();
+  });
 });

src/components/bcl-button/button.test.js

@@ -1,4 +1,10 @@
-import { renderTwigFileAsNode, getVariants } from "@openeuropa/bcl-test-utils";
+import {
+  renderTwigFileAsNode,
+  renderTwigFileAsHtml,
+  getVariants,
+} from "@openeuropa/bcl-test-utils";
+import { axe, toHaveNoViolations } from "jest-axe";
+
 import demoData from "@openeuropa/bcl-data-button/data.js";
 import toggleDemoData from "@openeuropa/bcl-data-button/data--toggle";
 import popoverDemoData from "@openeuropa/bcl-data-button/data--popover";
@@ -10,6 +16,8 @@ const render = (params, reset) => renderTwigFileAsNode(template, params, reset);
 const variants = getVariants(false, ["link"]);
 const sizes = ["lg", "md", "sm"];
 
+expect.extend(toHaveNoViolations);
+
 describe("OE - Button", () => {
   variants.forEach((variant) => {
     test(`${variant} renders correctly`, () => {
@@ -86,6 +94,12 @@ describe("OE - Button", () => {
 
     return expect(render(tooltipDemoData)).resolves.toMatchSnapshot();
   });
+
+  test(`passes the accessibility tests`, async () => {
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoData))
+    ).toHaveNoViolations();
+  });
 });
 
 describe("OE - Button Outline", () => {
@@ -105,4 +119,10 @@ describe("OE - Button Outline", () => {
       ).resolves.toMatchSnapshot();
     });
   });
+
+  test(`passes the accessibility tests`, async () => {
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoData))
+    ).toHaveNoViolations();
+  });
 });

src/components/bcl-card-layout/card-layout.test.js

@@ -1,11 +1,18 @@
-import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
+import {
+  renderTwigFileAsNode,
+  renderTwigFileAsHtml,
+} from "@openeuropa/bcl-test-utils";
+import { axe, toHaveNoViolations } from "jest-axe";
+
 import demoDataGroup from "@openeuropa/bcl-data-card-layout/data--group";
 import demoDataGrid from "@openeuropa/bcl-data-card-layout/data--grid";
 import demoDataMasonry from "@openeuropa/bcl-data-card-layout/data--masonry";
 
 const template = "@oe-bcl/bcl-card-layout/card-layout.html.twig";
 const render = (params) => renderTwigFileAsNode(template, params, true);
 
+expect.extend(toHaveNoViolations);
+
 describe("OE - Card", () => {
   test(`group renders correctly`, () => {
     expect.assertions(1);
@@ -43,4 +50,14 @@ describe("OE - Card", () => {
 
     return expect(render(demoDataMasonry)).resolves.toMatchSnapshot();
   });
+
+  test(`passes the accessibility tests`, async () => {
+    demoDataGroup.items.forEach((card) => {
+      card.subtitle.tag = "h2";
+    });
+
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoDataGroup, true))
+    ).toHaveNoViolations();
+  });
 });

src/components/bcl-card/card.test.js

@@ -1,4 +1,8 @@
-import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
+import {
+  renderTwigFileAsNode,
+  renderTwigFileAsHtml,
+} from "@openeuropa/bcl-test-utils";
+import { axe, toHaveNoViolations } from "jest-axe";
 import drupalAttribute from "drupal-attribute";
 
 import demoData, { image } from "@openeuropa/bcl-data-card/data";
@@ -7,6 +11,8 @@ import demoDataHorizontal from "@openeuropa/bcl-data-card/data--horizontal";
 const template = "@oe-bcl/bcl-card/card.html.twig";
 const render = (params, reset) => renderTwigFileAsNode(template, params, reset);
 
+expect.extend(toHaveNoViolations);
+
 describe("OE - Card", () => {
   test(`renders correctly`, () => {
     expect.assertions(1);
@@ -68,4 +74,11 @@ describe("OE - Card", () => {
 
     return expect(render(demoData, true)).resolves.toMatchSnapshot();
   });
+
+  test(`passes the accessibility tests`, async () => {
+    demoData.subtitle.tag = "h2";
+    expect(
+      await axe(renderTwigFileAsHtml(template, demoData, true))
+    ).toHaveNoViolations();
+  });
 });