vi-axe 0.0.4 → 0.0.6

package/README.md

@@ -0,0 +1,133 @@
+# vi-axe
+
+### A modern fork / rewrite of jest-axe for vitest.
+
+I'm aware that vitest-axe also exists, however it seems to be unmaintained.
+
+[![npm version](https://img.shields.io/npm/v/vi-axe.svg)](http://npm.im/vi-axe)
+![node](https://img.shields.io/node/v/vi-axe)
+
+Custom Vitest matcher for [aXe](https://github.com/dequelabs/axe-core) to test accessibility in your components and pages.
+
+## Installation
+
+```bash
+pnpm add -D vi-axe
+# or
+npm install -D vi-axe
+# or
+yarn add -D vi-axe
+```
+
+## Setup
+
+Configure Vitest so the `toHaveNoViolations` matcher is available in all tests. In your Vitest config (e.g. `vitest.config.ts`):
+
+```ts
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom", // required for axe
+    setupFiles: ["vi-axe/extend-expect"],
+  },
+});
+```
+
+Alternatively, in a single test file:
+
+```ts
+import "vi-axe/extend-expect";
+```
+
+## Usage
+
+### Basic
+
+Run axe on an HTML string or DOM element, then assert there are no violations:
+
+```ts
+import { axe } from "vi-axe";
+
+test("has no a11y violations", async () => {
+  const html = `<main><a href="https://example.com">Example</a></main>`;
+  const results = await axe(html);
+  expect(results).toHaveNoViolations();
+});
+```
+
+### With React Testing Library
+
+Pass the rendered container (or any element) to `axe`:
+
+```ts
+import { render } from "@testing-library/react";
+import { axe } from "vi-axe";
+
+test("component has no a11y violations", async () => {
+  const { container } = render(<MyComponent />);
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+```
+
+### With Vue Test Utils
+
+Pass the wrapper element:
+
+```ts
+import { mount } from "@vue/test-utils";
+import { axe } from "vi-axe";
+
+test("component has no a11y violations", async () => {
+  const wrapper = mount(MyComponent);
+  const results = await axe(wrapper.element);
+  expect(results).toHaveNoViolations();
+});
+```
+
+### Custom configuration
+
+Use `configureAxe` to create an axe runner with default options. You can pass [axe-core run options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md) and vi-axe-specific options:
+
+```ts
+import { configureAxe } from "vi-axe";
+
+const axe = configureAxe({
+  globalOptions: {
+    rules: [{ id: "link-name", enabled: false }],
+  },
+});
+
+test("custom axe run", async () => {
+  const results = await axe("<a href='#'></a>");
+  expect(results).toHaveNoViolations();
+});
+```
+
+Per-run options can be passed as the second argument:
+
+```ts
+const results = await axe(html, {
+  rules: { "link-name": { enabled: false } },
+});
+```
+
+### Filtering by impact level
+
+To fail only for certain impact levels (e.g. critical/serious), use `impactLevels` in `configureAxe`. The matcher will then consider only violations with those impacts:
+
+```ts
+import { configureAxe } from "vi-axe";
+
+const axe = configureAxe({
+  impactLevels: ["critical", "serious"],
+});
+```
+
+## Requirements
+
+- **Node**: >= 20
+- **Vitest** with **jsdom** (or another DOM environment); axe needs a DOM to run.
+
+Color contrast rules are disabled by default in vi-axe because they do not work reliably in jsdom.

package/dist/extend-expect.js

@@ -1,4 +1,4 @@
-import { n as e } from "./src-hfrDQhV4.js";
+import { n as e } from "./src-CypcCU5u.js";
 //#region src/extend-expect.ts
 expect.extend(e);
 //#endregion

package/dist/index.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./src-hfrDQhV4.js";
+import { n as e, r as t, t as n } from "./src-CypcCU5u.js";
 export { n as axe, t as configureAxe, e as toHaveNoViolations };

package/dist/{src-hfrDQhV4.js → src-CypcCU5u.js}

@@ -2534,15 +2534,8 @@ var t = Object.create, n = Object.defineProperty, r = Object.getOwnPropertyDescr
 					symbol: !0
 				};
 				t.exports = function() {
-					var e = n.Symbol, t;
-					if (typeof e != "function") return !1;
-					t = e("test symbol");
-					try {
-						String(t);
-					} catch {
-						return !1;
-					}
-					return !(!r[a(e.iterator)] || !r[a(e.toPrimitive)] || !r[a(e.toStringTag)]);
+					var e = n.Symbol;
+					return !(typeof e != "function" || (e("test symbol"), !r[a(e.iterator)]) || !r[a(e.toPrimitive)] || !r[a(e.toStringTag)]);
 				};
 			}), br = B(function(e, t) {
 				t.exports = function(e) {
@@ -13041,8 +13034,8 @@ var t = Object.create, n = Object.defineProperty, r = Object.getOwnPropertyDescr
 				var n = e.substring(1).split("&");
 				if (!n || !n.length) return t;
 				for (var r = 0; r < n.length; r++) {
-					var i = L(n[r].split("="), 2), a = i[0], o = i[1], s = o === void 0 ? "" : o;
-					t[decodeURIComponent(a)] = decodeURIComponent(s);
+					var i = L(n[r].split("="), 2), a = i[0], o = i[1];
+					t[decodeURIComponent(a)] = decodeURIComponent(o === void 0 ? "" : o);
 				}
 				return t;
 			}
@@ -34514,11 +34507,11 @@ See: https://github.com/dequelabs/axe-core/blob/master/doc/context.md`);
 						var n = L(t, 2), r = n[0], i = n[1];
 						return x(Math.atan2(parseFloat(i), parseFloat(r)));
 					}
-					var a = parseFloat(t[8]), o = Math.asin(a), s = Math.cos(o);
-					return x(Math.acos(parseFloat(t[0]) / s));
+					var a = parseFloat(t[8]), o = Math.cos(Math.asin(a));
+					return x(Math.acos(parseFloat(t[0]) / o));
 				}
 				function x(e) {
-					return Math.round(e * (180 / Math.PI));
+					return Math.round(180 / Math.PI * e);
 				}
 				function S(e) {
 					return e %= 400, e < 0 && (e += 400), Math.round(e / 400 * 360);
@@ -35337,10 +35330,10 @@ See: https://github.com/dequelabs/axe-core/blob/master/doc/context.md`);
 				return n && r;
 			}
 			function QE(e) {
-				var t = L(e.match(/^([0-9.]+)([a-z]+)$/i) || [], 3), n = t[1], r = n === void 0 ? "" : n, i = t[2], a = i === void 0 ? "" : i;
+				var t = L(e.match(/^([0-9.]+)([a-z]+)$/i) || [], 3), n = t[1], r = n === void 0 ? "" : n, i = t[2];
 				return {
 					value: parseFloat(r),
-					unit: a.toLowerCase()
+					unit: (i === void 0 ? "" : i).toLowerCase()
 				};
 			}
 			var $E = {
@@ -42285,7 +42278,10 @@ See: https://github.com/dequelabs/axe-core/blob/master/doc/context.md`);
 		return !1;
 	}
 	t.exports = cn;
-})), f = /* @__PURE__ */ l(u(), 1), p = /* @__PURE__ */ l(d(), 1), m = f.default.getRules(["cat.color"]);
+})), f = /* @__PURE__ */ l(u(), 1), p = /* @__PURE__ */ l(d(), 1), m = f.default.getRules(["cat.color"]).map(({ ruleId: e }) => ({
+	enabled: !1,
+	id: e
+}));
 function h(e) {
 	return !!e && typeof e == "object" && typeof e.tagName == "string";
 }
@@ -42303,21 +42299,18 @@ function _(e) {
 		};
 		return document.body.innerHTML = e, [document.body, n];
 	}
-	throw typeof e == "string" ? TypeError(`html parameter ("${e}") has no elements`) : TypeError("html parameter should be an HTML string or an HTML element");
+	throw TypeError(typeof e == "string" ? `html parameter ("${e}") has no elements` : "html parameter should be an HTML string or an HTML element");
 }
 function v(e = {}) {
-	let { globalOptions: t = {}, ...n } = e, { rules: r = [], ...i } = t, a = m.map(({ ruleId: e }) => ({
-		enabled: !1,
-		id: e
-	}));
+	let { globalOptions: t = {}, ...n } = e, { rules: r = [], ...i } = t;
 	return f.default.configure({
-		rules: [...a, ...r],
+		rules: [...m, ...r],
 		...i
 	}), function(e, t = {}) {
 		let [r, i] = _(e), a = (0, p.default)({}, n, t);
 		return new Promise((e, t) => {
 			f.default.run(r, a, (n, r) => {
-				i(), n && t(n), e(r);
+				i(), n ? t(n) : e(r);
 			});
 		});
 	};
@@ -42333,31 +42326,23 @@ function b(e) {
 function x(e, t) {
 	return t && t.length > 0 ? e.filter((e) => e.impact !== void 0 && e.impact !== null && t.includes(e.impact)) : e;
 }
-var S = { toHaveNoViolations(t) {
-	if (t.violations === void 0) throw TypeError("Unexpected aXe results object. No violations property found.\nDid you change the `reporter` in your aXe configuration?");
-	let { toolOptions: n } = t, r = [];
-	n && "impactLevels" in n && n.impactLevels && ({impactLevels: r} = n);
-	let i = x(t.violations, r), a = ((t) => t.length === 0 ? "" : t.map((t) => t.nodes.map((n) => {
-		let r = `Expected the HTML found at $('${n.target.join(", ")}') to have no violations:
-
-`, i = "";
-		return t.helpUrl && (i = `You can find more information on this issue here: \n${e("blue", t.helpUrl)}`), `${r}${e("gray", n.html)}
-
-Received:
-
-${b(`${t.help} (${t.id})`)}
-
-${e("yellow", n.failureSummary ?? "")}
-
-${i}`;
-	}).join("\n\n")).join("\n\n────────\n\n"))(i), o = a.length === 0;
+var S = "\n\n", C = "────────";
+function w(t) {
+	return t.map((t) => t.nodes.map((n) => {
+		let r = `Expected the HTML found at $('${n.target.join(", ")}') to have no violations:${S}`, i = t.helpUrl ? `You can find more information on this issue here: \n${e("blue", t.helpUrl)}` : "";
+		return `${r}${e("gray", n.html)}${S}Received:${S}${b(`${t.help} (${t.id})`)}${S}${e("yellow", n.failureSummary ?? "")}${S}${i}`;
+	}).join(S)).join(S + C + S);
+}
+var T = { toHaveNoViolations(e) {
+	if (e.violations === void 0) throw TypeError("Unexpected aXe results object. No violations property found.\nDid you change the `reporter` in your aXe configuration?");
+	let t = e.toolOptions?.impactLevels, n = x(e.violations, t), r = n.length === 0;
 	return {
-		actual: i,
+		actual: n,
 		message: () => {
-			if (!o) return `${y(".toHaveNoViolations")}\n\n${a}`;
+			if (!r) return `${y(".toHaveNoViolations")}\n\n${w(n)}`;
 		},
-		pass: o
+		pass: r
 	};
-} }, C = v();
+} }, E = v();
 //#endregion
-export { S as n, v as r, C as t };
+export { T as n, v as r, E as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vi-axe",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Modern Vitest matcher for aXe for testing accessibility using axe-core",
   "keywords": [
     "a11y",
@@ -33,21 +33,21 @@
     "lodash.merge": "4.6.2"
   },
   "devDependencies": {
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/vue": "^8.0.0",
-    "@types/lodash.merge": "^4.6.9",
-    "@types/node": "^25.4.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vue/test-utils": "^2.2.1",
-    "jsdom": "^28.1.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "^5.9.3",
-    "unplugin-isolated-decl": "^0.15.7",
-    "vite": "^8.0.0",
-    "vitest": "^4.0.18",
-    "vue": "^3.2.41"
+    "@testing-library/react": "16.3.2",
+    "@testing-library/vue": "8.1.0",
+    "@types/lodash.merge": "4.6.9",
+    "@types/node": "25.5.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vue/test-utils": "2.4.6",
+    "jsdom": "29.0.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "6.0.2",
+    "unplugin-isolated-decl": "0.15.7",
+    "vite": "8.0.3",
+    "vitest": "4.1.2",
+    "vue": "3.5.31"
   },
   "engines": {
     "node": ">= 20.0.0"