@mcptoolshop/accessibility-suite 0.1.0

package/src/a11y-mcp-tools/test/diagnose.test.js

@@ -0,0 +1,485 @@
+"use strict";
+
+const { describe, it } = require("node:test");
+const assert = require("node:assert");
+
+const { diagnose, RULES } = require("../src/tools/diagnose.js");
+
+// Create a test bundle with DOM snapshot
+function createTestBundle(nodes) {
+  const domContent = JSON.stringify({ nodes, root: nodes[0] });
+
+  return {
+    bundle_id: "test-bundle",
+    artifacts: [
+      {
+        artifact_id: "artifact:dom:test",
+        media_type: "application/json",
+        labels: ["dom-snapshot"],
+        _content: domContent,
+      },
+    ],
+    provenance: {
+      record_id: "prov:test",
+      methods: ["engine.capture.html_v0_1"],
+      inputs: ["test.html"],
+      outputs: ["artifact:dom:test"],
+    },
+  };
+}
+
+describe("a11y.diagnose", () => {
+  describe("lang rule", () => {
+    it("should detect missing lang attribute", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "html",
+          attrs: {},
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["lang"] },
+        output: { include_fix_guidance: true },
+      });
+
+      assert.ok(result.findings.length > 0);
+      assert.strictEqual(result.findings[0].id, "a11y.lang.missing");
+      assert.ok(result.findings[0].fix);
+    });
+
+    it("should detect empty lang attribute", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "html",
+          attrs: { lang: "" },
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["lang"] },
+      });
+
+      assert.ok(result.findings.length > 0);
+    });
+
+    it("should pass when lang is present", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "html",
+          attrs: { lang: "en" },
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["lang"] },
+      });
+
+      assert.strictEqual(result.findings.length, 0);
+    });
+  });
+
+  describe("alt rule", () => {
+    it("should detect missing alt on img", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "img",
+          attrs: { src: "test.png" },
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["alt"] },
+        output: { include_fix_guidance: true },
+      });
+
+      assert.ok(result.findings.length > 0);
+      assert.strictEqual(result.findings[0].id, "a11y.img.missing_alt");
+    });
+
+    it("should skip decorative images (role=presentation)", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "img",
+          attrs: { src: "test.png", role: "presentation" },
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["alt"] },
+      });
+
+      assert.strictEqual(result.findings.length, 0);
+    });
+
+    it("should skip hidden images (aria-hidden=true)", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "img",
+          attrs: { src: "test.png", "aria-hidden": "true" },
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["alt"] },
+      });
+
+      assert.strictEqual(result.findings.length, 0);
+    });
+  });
+
+  describe("button-name rule", () => {
+    it("should detect button without accessible name", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "button",
+          attrs: {},
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["button-name"] },
+      });
+
+      assert.ok(result.findings.length > 0);
+      assert.strictEqual(result.findings[0].id, "a11y.button.missing_name");
+    });
+
+    it("should pass when button has text content", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "button",
+          attrs: {},
+          index: 0,
+          children: [{ type: "text", content: "Click me", index: 1 }],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["button-name"] },
+      });
+
+      assert.strictEqual(result.findings.length, 0);
+    });
+
+    it("should pass when button has aria-label", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "button",
+          attrs: { "aria-label": "Close dialog" },
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["button-name"] },
+      });
+
+      assert.strictEqual(result.findings.length, 0);
+    });
+  });
+
+  describe("link-name rule", () => {
+    it("should detect link without accessible name", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "a",
+          attrs: { href: "/page" },
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["link-name"] },
+      });
+
+      assert.ok(result.findings.length > 0);
+      assert.strictEqual(result.findings[0].id, "a11y.link.missing_name");
+    });
+
+    it("should skip anchors without href", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "a",
+          attrs: { name: "anchor" },
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["link-name"] },
+      });
+
+      assert.strictEqual(result.findings.length, 0);
+    });
+  });
+
+  describe("label rule", () => {
+    it("should detect input without label", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "input",
+          attrs: { type: "text" },
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["label"] },
+      });
+
+      assert.ok(result.findings.length > 0);
+      assert.strictEqual(result.findings[0].id, "a11y.input.missing_label");
+    });
+
+    it("should skip hidden inputs", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "input",
+          attrs: { type: "hidden" },
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["label"] },
+      });
+
+      assert.strictEqual(result.findings.length, 0);
+    });
+
+    it("should pass when input has aria-label", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "input",
+          attrs: { type: "text", "aria-label": "Search" },
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["label"] },
+      });
+
+      assert.strictEqual(result.findings.length, 0);
+    });
+
+    it("should pass when input has associated label", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "label",
+          attrs: { for: "email" },
+          index: 0,
+          children: [],
+        },
+        {
+          type: "element",
+          tagName: "input",
+          attrs: { type: "email", id: "email" },
+          index: 1,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["label"] },
+      });
+
+      assert.strictEqual(result.findings.length, 0);
+    });
+  });
+
+  describe("output structure", () => {
+    it("should include summary with severity counts", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "html",
+          attrs: {},
+          index: 0,
+          children: [],
+        },
+        {
+          type: "element",
+          tagName: "img",
+          attrs: { src: "test.png" },
+          index: 1,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({ bundle });
+
+      assert.ok(result.summary);
+      assert.ok(result.summary.severity_counts);
+      assert.strictEqual(result.summary.findings_total, result.findings.length);
+    });
+
+    it("should include provenance record", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "html",
+          attrs: {},
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({ bundle });
+
+      assert.ok(result.provenance);
+      assert.ok(result.provenance.methods);
+      assert.ok(result.provenance.inputs);
+    });
+
+    it("should include evidence anchors in findings", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "html",
+          attrs: {},
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["lang"] },
+      });
+
+      assert.ok(result.findings[0].targets);
+      assert.ok(result.findings[0].targets[0].artifact_id);
+      assert.ok(result.findings[0].targets[0].json_pointer);
+    });
+
+    it("should include fix guidance when requested", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "html",
+          attrs: {},
+          index: 0,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["lang"] },
+        output: { include_fix_guidance: true },
+      });
+
+      assert.ok(result.findings[0].fix);
+      assert.strictEqual(result.findings[0].fix.safe, true);
+      assert.ok(result.findings[0].fix.patch);
+    });
+  });
+
+  describe("rule filtering", () => {
+    it("should only run included rules", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "html",
+          attrs: {},
+          index: 0,
+          children: [],
+        },
+        {
+          type: "element",
+          tagName: "img",
+          attrs: { src: "test.png" },
+          index: 1,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { include: ["lang"] },
+      });
+
+      // Should only find lang issue, not alt issue
+      assert.ok(result.findings.every((f) => f.id === "a11y.lang.missing"));
+    });
+
+    it("should exclude specified rules", async () => {
+      const bundle = createTestBundle([
+        {
+          type: "element",
+          tagName: "html",
+          attrs: {},
+          index: 0,
+          children: [],
+        },
+        {
+          type: "element",
+          tagName: "img",
+          attrs: { src: "test.png" },
+          index: 1,
+          children: [],
+        },
+      ]);
+
+      const result = await diagnose({
+        bundle,
+        rules: { exclude: ["lang"] },
+      });
+
+      // Should not find lang issue
+      assert.ok(result.findings.every((f) => f.id !== "a11y.lang.missing"));
+    });
+  });
+});

package/src/a11y-mcp-tools/test/evidence.test.js

@@ -0,0 +1,183 @@
+"use strict";
+
+const { describe, it, before, after } = require("node:test");
+const assert = require("node:assert");
+const fs = require("fs");
+const path = require("path");
+
+const {
+  captureEvidence,
+  canonicalizeHtml,
+  createDomSnapshot,
+} = require("../src/tools/evidence.js");
+
+const FIXTURES_DIR = path.join(__dirname, "fixtures");
+
+describe("a11y.evidence", () => {
+  before(() => {
+    // Create test fixtures
+    fs.mkdirSync(FIXTURES_DIR, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(FIXTURES_DIR, "test.html"),
+      `<!DOCTYPE html>
+<html>
+<head><title>Test</title></head>
+<body>
+  <img src="test.png">
+  <button></button>
+</body>
+</html>`
+    );
+
+    fs.writeFileSync(
+      path.join(FIXTURES_DIR, "test.log"),
+      "Some CLI output\nAnother line"
+    );
+  });
+
+  after(() => {
+    // Clean up
+    fs.rmSync(FIXTURES_DIR, { recursive: true, force: true });
+  });
+
+  describe("captureEvidence", () => {
+    it("should capture HTML file and create artifact", async () => {
+      const result = await captureEvidence({
+        targets: [{ kind: "file", path: path.join(FIXTURES_DIR, "test.html") }],
+        capture: { html: { canonicalize: false } },
+      });
+
+      assert.ok(result.bundle_id);
+      assert.ok(result.artifacts.length >= 1);
+
+      const htmlArtifact = result.artifacts.find((a) =>
+        a.artifact_id.includes("html")
+      );
+      assert.ok(htmlArtifact);
+      assert.strictEqual(htmlArtifact.media_type, "text/html");
+      assert.ok(htmlArtifact.digest.hex);
+      assert.strictEqual(htmlArtifact.digest.alg, "sha256");
+    });
+
+    it("should create DOM snapshot when requested", async () => {
+      const result = await captureEvidence({
+        targets: [{ kind: "file", path: path.join(FIXTURES_DIR, "test.html") }],
+        capture: {
+          html: { canonicalize: false },
+          dom: { snapshot: true },
+        },
+      });
+
+      const domArtifact = result.artifacts.find((a) =>
+        a.artifact_id.includes("dom")
+      );
+      assert.ok(domArtifact);
+      assert.strictEqual(domArtifact.media_type, "application/json");
+      assert.ok(domArtifact.labels.includes("dom-snapshot"));
+    });
+
+    it("should capture CLI log", async () => {
+      const result = await captureEvidence({
+        targets: [{ kind: "cli_log", path: path.join(FIXTURES_DIR, "test.log") }],
+      });
+
+      const logArtifact = result.artifacts.find((a) =>
+        a.artifact_id.includes("log")
+      );
+      assert.ok(logArtifact);
+      assert.ok(logArtifact.labels.includes("cli-log"));
+    });
+
+    it("should add labels to artifacts", async () => {
+      const result = await captureEvidence({
+        targets: [{ kind: "file", path: path.join(FIXTURES_DIR, "test.html") }],
+        labels: ["baseline", "wcag-2.2-aa"],
+      });
+
+      const artifact = result.artifacts[0];
+      assert.ok(artifact.labels.includes("baseline"));
+      assert.ok(artifact.labels.includes("wcag-2.2-aa"));
+    });
+
+    it("should include provenance record", async () => {
+      const result = await captureEvidence({
+        targets: [{ kind: "file", path: path.join(FIXTURES_DIR, "test.html") }],
+      });
+
+      assert.ok(result.provenance);
+      assert.ok(result.provenance.record_id);
+      assert.ok(result.provenance.methods.length > 0);
+      assert.ok(result.provenance.inputs.length > 0);
+      assert.ok(result.provenance.outputs.length > 0);
+    });
+
+    it("should capture environment info when requested", async () => {
+      const result = await captureEvidence({
+        targets: [{ kind: "file", path: path.join(FIXTURES_DIR, "test.html") }],
+        capture: {
+          environment: { include: ["os", "node"] },
+        },
+      });
+
+      assert.ok(result.environment);
+      assert.ok(result.environment.os);
+      assert.ok(result.environment.node);
+    });
+  });
+
+  describe("canonicalizeHtml", () => {
+    it("should sort attributes alphabetically", () => {
+      const html = '<div class="foo" id="bar">text</div>';
+      const result = canonicalizeHtml(html);
+      // Should have class before id alphabetically? Actually id comes before class
+      assert.ok(result.includes("class="));
+      assert.ok(result.includes("id="));
+    });
+
+    it("should normalize whitespace", () => {
+      const html = "<p>  Multiple   spaces  </p>";
+      const result = canonicalizeHtml(html);
+      assert.ok(!result.includes("  ")); // No double spaces
+    });
+
+    it("should lowercase tags", () => {
+      const html = "<DIV>content</DIV>";
+      const result = canonicalizeHtml(html);
+      assert.ok(result.includes("<div>"));
+      assert.ok(result.includes("</div>"));
+    });
+  });
+
+  describe("createDomSnapshot", () => {
+    it("should create flat nodes array", () => {
+      const html = "<html><body><p>Text</p></body></html>";
+      const result = createDomSnapshot(html);
+
+      assert.ok(result.nodes);
+      assert.ok(Array.isArray(result.nodes));
+      assert.ok(result.nodes.length > 0);
+    });
+
+    it("should assign indices to nodes", () => {
+      const html = "<html><body><p>Text</p></body></html>";
+      const result = createDomSnapshot(html);
+
+      for (let i = 0; i < result.nodes.length; i++) {
+        assert.strictEqual(result.nodes[i].index, i);
+      }
+    });
+
+    it("should include CSS selectors when requested", () => {
+      const html = '<div id="main" class="container">text</div>';
+      const result = createDomSnapshot(html, { include_css_selectors: true });
+
+      const divNode = result.nodes.find(
+        (n) => n.type === "element" && n.tagName === "div"
+      );
+      assert.ok(divNode);
+      assert.ok(divNode.selector);
+      assert.ok(divNode.selector.includes("#main"));
+    });
+  });
+});