@hypoth-ui/a11y-audit 0.1.0

package/dist/index.js

@@ -0,0 +1,24 @@
+import {
+  DEFAULT_SEVERITY_THRESHOLD,
+  SEVERITY_ENV_VAR,
+  SEVERITY_LEVELS,
+  describeSeverityThreshold,
+  parseSeverityThreshold,
+  shouldFailOnSeverity
+} from "./chunk-AMA6KCPL.js";
+import {
+  validateChecklist,
+  validateRecord,
+  validateReport
+} from "./chunk-KLSGW6PX.js";
+export {
+  DEFAULT_SEVERITY_THRESHOLD,
+  SEVERITY_ENV_VAR,
+  SEVERITY_LEVELS,
+  describeSeverityThreshold,
+  parseSeverityThreshold,
+  shouldFailOnSeverity,
+  validateChecklist,
+  validateRecord,
+  validateReport
+};

package/dist/report-6GBLBDLV.js

@@ -0,0 +1,587 @@
+import {
+  validateReport
+} from "./chunk-KLSGW6PX.js";
+
+// src/cli/report.ts
+import * as fs3 from "fs";
+import * as path3 from "path";
+
+// src/lib/aggregator.ts
+import * as fs from "fs";
+import * as path from "path";
+function loadAuditRecords(recordsDir) {
+  const records = /* @__PURE__ */ new Map();
+  if (!fs.existsSync(recordsDir)) {
+    return records;
+  }
+  const components = fs.readdirSync(recordsDir, { withFileTypes: true });
+  for (const component of components) {
+    if (!component.isDirectory()) continue;
+    const componentPath = path.join(recordsDir, component.name);
+    const files = fs.readdirSync(componentPath).filter((f) => f.endsWith(".json") && !f.includes(".backup"));
+    const componentRecords = [];
+    for (const file of files) {
+      try {
+        const content = fs.readFileSync(path.join(componentPath, file), "utf-8");
+        const record = JSON.parse(content);
+        componentRecords.push(record);
+      } catch {
+        console.warn(`Warning: Could not parse ${path.join(componentPath, file)}`);
+      }
+    }
+    if (componentRecords.length > 0) {
+      records.set(component.name, componentRecords);
+    }
+  }
+  return records;
+}
+function getLatestRecord(records, version) {
+  if (version) {
+    return records.find((r) => r.version === version);
+  }
+  return records.sort(
+    (a, b) => new Date(b.auditDate).getTime() - new Date(a.auditDate).getTime()
+  )[0];
+}
+function calculateConformanceStatus(data) {
+  const hasAutomated = data.automatedResult !== void 0;
+  const hasManual = data.manualAudit !== void 0;
+  if (!hasAutomated && !hasManual) {
+    return "pending";
+  }
+  if (hasAutomated && !hasManual) {
+    return "pending";
+  }
+  if (hasAutomated && data.automatedResult?.passed === false) {
+    return "non-conformant";
+  }
+  if (hasManual && data.manualAudit) {
+    switch (data.manualAudit.overallStatus) {
+      case "conformant":
+        return "conformant";
+      case "partial":
+        return "partial";
+      case "non-conformant":
+        return "non-conformant";
+    }
+  }
+  return "pending";
+}
+function createManualAuditSummary(record) {
+  const passCount = record.items.filter((i) => i.status === "pass").length;
+  const failCount = record.items.filter((i) => i.status === "fail").length;
+  const exceptionCount = record.exceptions?.length ?? 0;
+  return {
+    status: record.overallStatus,
+    auditId: record.id,
+    auditor: record.auditor,
+    auditDate: record.auditDate,
+    passCount,
+    failCount,
+    exceptionCount
+  };
+}
+function createComponentStatus(data) {
+  const status = calculateConformanceStatus(data);
+  const automatedResult = data.automatedResult ?? {
+    passed: true,
+    violationCount: 0,
+    runId: "pending"
+  };
+  const lastUpdated = data.manualAudit?.auditDate ?? (/* @__PURE__ */ new Date()).toISOString();
+  return {
+    component: data.component,
+    version: data.version,
+    status,
+    automatedResult,
+    manualAudit: data.manualAudit ? createManualAuditSummary(data.manualAudit) : void 0,
+    lastUpdated
+  };
+}
+function aggregateForRelease(components, recordsDir, version) {
+  const allRecords = loadAuditRecords(recordsDir);
+  const statuses = [];
+  for (const component of components) {
+    const records = allRecords.get(component) ?? [];
+    const latestRecord = getLatestRecord(records, version) ?? getLatestRecord(records);
+    const data = {
+      component,
+      version,
+      manualAudit: latestRecord
+    };
+    statuses.push(createComponentStatus(data));
+  }
+  return statuses;
+}
+
+// src/lib/manifest-loader.ts
+import * as fs2 from "fs";
+import * as path2 from "path";
+var DEFAULT_COMPONENTS = [
+  "ds-button",
+  "ds-checkbox",
+  "ds-dialog",
+  "ds-field",
+  "ds-icon",
+  "ds-input",
+  "ds-link",
+  "ds-menu",
+  "ds-popover",
+  "ds-radio",
+  "ds-spinner",
+  "ds-switch",
+  "ds-text",
+  "ds-textarea",
+  "ds-tooltip",
+  "ds-visually-hidden"
+];
+function loadComponentList(manifestPath) {
+  if (manifestPath && fs2.existsSync(manifestPath)) {
+    try {
+      const content = fs2.readFileSync(manifestPath, "utf-8");
+      const manifest = JSON.parse(content);
+      if (Array.isArray(manifest.components)) {
+        return manifest.components.map(
+          (c) => typeof c === "string" ? c : c.id
+        );
+      }
+      if (Array.isArray(manifest)) {
+        return manifest.map((c) => typeof c === "string" ? c : c.id);
+      }
+    } catch {
+      console.warn(`Warning: Could not parse manifest at ${manifestPath}`);
+    }
+  }
+  const wcComponentsPath = path2.resolve(process.cwd(), "packages/wc/src/components");
+  if (fs2.existsSync(wcComponentsPath)) {
+    const dirs = fs2.readdirSync(wcComponentsPath, { withFileTypes: true });
+    const components = dirs.filter((d) => d.isDirectory()).map((d) => `ds-${d.name}`);
+    if (components.length > 0) {
+      return components;
+    }
+  }
+  return DEFAULT_COMPONENTS;
+}
+
+// src/lib/report-html.ts
+import Handlebars from "handlebars";
+Handlebars.registerHelper("statusIcon", (status) => {
+  switch (status) {
+    case "conformant":
+      return "\u2705";
+    case "partial":
+      return "\u26A0\uFE0F";
+    case "non-conformant":
+      return "\u274C";
+    case "pending":
+      return "\u23F3";
+    default:
+      return "\u2753";
+  }
+});
+Handlebars.registerHelper("statusClass", (status) => {
+  switch (status) {
+    case "conformant":
+      return "status-conformant";
+    case "partial":
+      return "status-partial";
+    case "non-conformant":
+      return "status-non-conformant";
+    case "pending":
+      return "status-pending";
+    default:
+      return "";
+  }
+});
+Handlebars.registerHelper(
+  "formatDate",
+  (dateString) => new Date(dateString).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  })
+);
+var HTML_TEMPLATE = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Accessibility Conformance Report - v{{version}}</title>
+  <style>
+    :root {
+      --color-conformant: #22c55e;
+      --color-partial: #f59e0b;
+      --color-non-conformant: #ef4444;
+      --color-pending: #6b7280;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      line-height: 1.6;
+      color: #1f2937;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    header {
+      border-bottom: 2px solid #e5e7eb;
+      padding-bottom: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    h1 {
+      font-size: 2rem;
+      margin-bottom: 0.5rem;
+    }
+
+    .meta {
+      color: #6b7280;
+      font-size: 0.875rem;
+    }
+
+    .summary {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+      margin-bottom: 2rem;
+    }
+
+    .summary-card {
+      background: #f9fafb;
+      border-radius: 8px;
+      padding: 1.5rem;
+      text-align: center;
+    }
+
+    .summary-card .number {
+      font-size: 2.5rem;
+      font-weight: bold;
+    }
+
+    .summary-card .label {
+      color: #6b7280;
+      font-size: 0.875rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .status-conformant .number { color: var(--color-conformant); }
+    .status-partial .number { color: var(--color-partial); }
+    .status-non-conformant .number { color: var(--color-non-conformant); }
+    .status-pending .number { color: var(--color-pending); }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-bottom: 2rem;
+    }
+
+    th, td {
+      padding: 1rem;
+      text-align: left;
+      border-bottom: 1px solid #e5e7eb;
+    }
+
+    th {
+      background: #f9fafb;
+      font-weight: 600;
+    }
+
+    tr:hover {
+      background: #f9fafb;
+    }
+
+    .status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.25rem 0.75rem;
+      border-radius: 9999px;
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+
+    .status-badge.status-conformant {
+      background: #dcfce7;
+      color: #166534;
+    }
+
+    .status-badge.status-partial {
+      background: #fef3c7;
+      color: #92400e;
+    }
+
+    .status-badge.status-non-conformant {
+      background: #fee2e2;
+      color: #991b1b;
+    }
+
+    .status-badge.status-pending {
+      background: #f3f4f6;
+      color: #374151;
+    }
+
+    .progress-bar {
+      height: 8px;
+      background: #e5e7eb;
+      border-radius: 4px;
+      overflow: hidden;
+      margin-top: 0.5rem;
+    }
+
+    .progress-fill {
+      height: 100%;
+      background: var(--color-conformant);
+      transition: width 0.3s ease;
+    }
+
+    footer {
+      border-top: 1px solid #e5e7eb;
+      padding-top: 1rem;
+      margin-top: 2rem;
+      color: #6b7280;
+      font-size: 0.875rem;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Accessibility Conformance Report</h1>
+    <p class="meta">
+      Version {{version}} \u2022 Generated {{formatDate generatedAt}} \u2022 WCAG {{wcagVersion}} Level {{conformanceLevel}}
+    </p>
+  </header>
+
+  <section class="summary">
+    <div class="summary-card">
+      <div class="number">{{summary.totalComponents}}</div>
+      <div class="label">Total Components</div>
+    </div>
+    <div class="summary-card status-conformant">
+      <div class="number">{{summary.conformant}}</div>
+      <div class="label">Conformant</div>
+    </div>
+    <div class="summary-card status-partial">
+      <div class="number">{{summary.partial}}</div>
+      <div class="label">Partial</div>
+    </div>
+    <div class="summary-card status-non-conformant">
+      <div class="number">{{summary.nonConformant}}</div>
+      <div class="label">Non-Conformant</div>
+    </div>
+    <div class="summary-card status-pending">
+      <div class="number">{{summary.pending}}</div>
+      <div class="label">Pending Audit</div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Conformance Progress</h2>
+    <p>{{summary.conformancePercentage}}% of components are fully conformant</p>
+    <div class="progress-bar">
+      <div class="progress-fill" style="width: {{summary.conformancePercentage}}%"></div>
+    </div>
+  </section>
+
+  <section style="margin-top: 2rem;">
+    <h2>Component Status</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Component</th>
+          <th>Version</th>
+          <th>Status</th>
+          <th>Automated</th>
+          <th>Manual Audit</th>
+          <th>Last Updated</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each components}}
+        <tr>
+          <td><strong>{{component}}</strong></td>
+          <td>{{version}}</td>
+          <td>
+            <span class="status-badge {{statusClass status}}">
+              {{statusIcon status}} {{status}}
+            </span>
+          </td>
+          <td>
+            {{#if automatedResult.passed}}
+              \u2705 Passed
+            {{else}}
+              \u274C {{automatedResult.violationCount}} violations
+            {{/if}}
+          </td>
+          <td>
+            {{#if manualAudit}}
+              {{manualAudit.passCount}}/{{manualAudit.passCount}} passed
+            {{else}}
+              <em>Not audited</em>
+            {{/if}}
+          </td>
+          <td>{{formatDate lastUpdated}}</td>
+        </tr>
+        {{/each}}
+      </tbody>
+    </table>
+  </section>
+
+  <footer>
+    <p>Generated by @hypoth-ui/a11y-audit v{{metadata.toolVersion}}</p>
+    {{#if metadata.gitCommit}}
+    <p>Git commit: {{metadata.gitCommit}}</p>
+    {{/if}}
+    {{#if metadata.ciRunUrl}}
+    <p>CI Run: <a href="{{metadata.ciRunUrl}}">View details</a></p>
+    {{/if}}
+  </footer>
+</body>
+</html>`;
+var template = Handlebars.compile(HTML_TEMPLATE);
+function generateHTMLReport(report2) {
+  return template(report2);
+}
+
+// src/lib/report-json.ts
+import { randomUUID } from "crypto";
+function calculateSummary(components) {
+  const total = components.length;
+  const conformant = components.filter((c) => c.status === "conformant").length;
+  const partial = components.filter((c) => c.status === "partial").length;
+  const nonConformant = components.filter((c) => c.status === "non-conformant").length;
+  const pending = components.filter((c) => c.status === "pending").length;
+  const conformancePercentage = total > 0 ? Math.round(conformant / total * 100) : 0;
+  return {
+    totalComponents: total,
+    conformant,
+    partial,
+    nonConformant,
+    pending,
+    conformancePercentage
+  };
+}
+function generateJSONReport(options) {
+  const metadata = {
+    schemaVersion: "1.0.0",
+    toolVersion: "0.0.0",
+    axeCoreVersion: options.axeCoreVersion,
+    gitCommit: options.gitCommit,
+    ciRunUrl: options.ciRunUrl
+  };
+  const report2 = {
+    id: randomUUID(),
+    version: options.version,
+    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    generatedBy: options.generatedBy,
+    wcagVersion: options.wcagVersion ?? "2.1",
+    conformanceLevel: options.conformanceLevel ?? "AA",
+    components: options.components,
+    summary: calculateSummary(options.components),
+    metadata
+  };
+  return report2;
+}
+
+// src/cli/report.ts
+async function report(options) {
+  const { version, output, format } = options;
+  if (!version.match(/^\d+\.\d+\.\d+$/)) {
+    console.error(`\u274C Invalid version format: ${version}`);
+    console.error("   Use semver format: 1.0.0, 2.1.0, etc.");
+    process.exit(1);
+  }
+  const formats = format.split(",").map((f) => f.trim().toLowerCase());
+  const validFormats = ["json", "html"];
+  for (const fmt of formats) {
+    if (!validFormats.includes(fmt)) {
+      console.error(`\u274C Invalid format: ${fmt}`);
+      console.error(`   Valid formats: ${validFormats.join(", ")}`);
+      process.exit(1);
+    }
+  }
+  console.info(`
+\u{1F50D} Generating conformance report
+   Version: ${version}
+   Output:  ${output}
+   Formats: ${formats.join(", ")}
+`);
+  const components = loadComponentList();
+  console.info(`Found ${components.length} components`);
+  const recordsDir = path3.resolve(process.cwd(), "a11y-audits/records");
+  const componentStatuses = aggregateForRelease(components, recordsDir, version);
+  const jsonReport = generateJSONReport({
+    version,
+    generatedBy: process.env.GITHUB_RUN_ID ?? "manual",
+    components: componentStatuses,
+    gitCommit: process.env.GITHUB_SHA,
+    ciRunUrl: process.env.GITHUB_RUN_ID ? `https://github.com/${process.env.GITHUB_REPOSITORY}/actions/runs/${process.env.GITHUB_RUN_ID}` : void 0
+  });
+  const validation = validateReport(jsonReport);
+  if (!validation.valid) {
+    console.error("\u274C Generated report failed validation:");
+    for (const error of validation.errors) {
+      console.error(`   - ${error}`);
+    }
+    process.exit(1);
+  }
+  const outputDir = path3.resolve(process.cwd(), output, version);
+  if (!fs3.existsSync(outputDir)) {
+    fs3.mkdirSync(outputDir, { recursive: true });
+  }
+  const outputs = [];
+  if (formats.includes("json")) {
+    const jsonPath = path3.join(outputDir, "report.json");
+    fs3.writeFileSync(jsonPath, JSON.stringify(jsonReport, null, 2));
+    outputs.push(jsonPath);
+    console.info(`  \u2705 JSON: ${jsonPath}`);
+  }
+  if (formats.includes("html")) {
+    const htmlContent = generateHTMLReport(jsonReport);
+    const htmlPath = path3.join(outputDir, "report.html");
+    fs3.writeFileSync(htmlPath, htmlContent);
+    outputs.push(htmlPath);
+    console.info(`  \u2705 HTML: ${htmlPath}`);
+  }
+  const { summary } = jsonReport;
+  console.info(`
+\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557
+\u2551                  CONFORMANCE REPORT GENERATED                  \u2551
+\u2560\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2563
+\u2551  Version: ${version.padEnd(51)}\u2551
+\u2551  WCAG: ${jsonReport.wcagVersion} Level ${jsonReport.conformanceLevel.padEnd(43)}\u2551
+\u2551                                                               \u2551
+\u2551  Summary:                                                      \u2551
+\u2551    Total Components: ${String(summary.totalComponents).padEnd(42)}\u2551
+\u2551    \u2705 Conformant:    ${String(summary.conformant).padEnd(42)}\u2551
+\u2551    \u26A0\uFE0F  Partial:       ${String(summary.partial).padEnd(42)}\u2551
+\u2551    \u274C Non-Conformant: ${String(summary.nonConformant).padEnd(42)}\u2551
+\u2551    \u23F3 Pending:        ${String(summary.pending).padEnd(42)}\u2551
+\u2551                                                               \u2551
+\u2551  Conformance: ${String(`${summary.conformancePercentage}%`).padEnd(48)}\u2551
+\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D
+`);
+  if (summary.nonConformant > 0 || summary.pending > 0) {
+    console.info("\u26A0\uFE0F  Release gate check:");
+    if (summary.nonConformant > 0) {
+      console.info(`   \u274C ${summary.nonConformant} component(s) are non-conformant`);
+    }
+    if (summary.pending > 0) {
+      console.info(`   \u23F3 ${summary.pending} component(s) pending manual audit`);
+    }
+    console.info("");
+    console.info("   Complete manual audits before release to achieve full conformance.");
+  }
+}
+export {
+  report
+};