html - add minimal axe checker implementation

Author: cscheid

src/format/html/format-html-axe.ts

@@ -0,0 +1,30 @@
+/*
+ * format-html-axe.ts
+ *
+ * Copyright (C) 2020-2025 Posit Software, PBC
+ */
+
+import { kIncludeInHeader } from "../../config/constants.ts";
+import { Format, FormatExtras } from "../../config/types.ts";
+import { TempContext } from "../../core/temp-types.ts";
+import { encodeBase64 } from "../../deno_ral/encoding.ts";
+
+export function axeFormatDependencies(
+  _format: Format,
+  temp: TempContext,
+  options?: unknown,
+): FormatExtras {
+  if (options === undefined) {
+    return {};
+  }
+
+  return {
+    [kIncludeInHeader]: [
+      temp.createFileFromString(
+        `<script id="quarto-axe-checker-options" type="text/plain">${
+          encodeBase64(JSON.stringify(options))
+        }</script>`,
+      ),
+    ],
+  };
+}

src/format/html/format-html-shared.ts

@@ -56,6 +56,7 @@ export const kComments = "comments";
 export const kHypothesis = "hypothesis";
 export const kUtterances = "utterances";
 export const kGiscus = "giscus";
+export const kAxe = "axe";
 
 export const kGiscusRepoId = "repo-id";
 export const kGiscusCategoryId = "category-id";

src/format/html/format-html.ts

@@ -5,7 +5,7 @@
  *
  * Copyright (C) 2020-2022 Posit Software, PBC
  */
-import { dirname, join, relative } from "../../deno_ral/path.ts";
+import { join, relative } from "../../deno_ral/path.ts";
 import { warning } from "../../deno_ral/log.ts";
 
 import * as ld from "../../core/lodash.ts";
@@ -68,6 +68,7 @@ import {
   clipboardDependency,
   createCodeCopyButton,
   kAnchorSections,
+  kAxe,
   kBootstrapDependencyName,
   kCitationsHover,
   kCodeAnnotations,
@@ -116,8 +117,9 @@ import {
 import { kQuartoHtmlDependency } from "./format-html-constants.ts";
 import { registerWriterFormatHandler } from "../format-handlers.ts";
 import { brandSassFormatExtras } from "../../core/sass/brand.ts";
-import { ESBuildAnalysis, esbuildAnalyze } from "../../core/esbuild.ts";
+import { ESBuildAnalysis } from "../../core/esbuild.ts";
 import { assert } from "testing/asserts";
+import { axeFormatDependencies } from "./format-html-axe.ts";
 
 let esbuildAnalysisCache: Record<string, ESBuildAnalysis> | undefined;
 export function esbuildCachedAnalysis(
@@ -245,6 +247,10 @@ export async function htmlFormatExtras(
   tippyOptions?: HtmlFormatTippyOptions,
   scssOptions?: HtmlFormatScssOptions,
 ): Promise<FormatExtras> {
+  const configurableExtras: FormatExtras[] = [
+    axeFormatDependencies(format, temp, format.metadata[kAxe]),
+  ];
+
   // note whether we are targeting bootstrap
   const bootstrap = formatHasBootstrap(format);
 
@@ -645,7 +651,7 @@ export async function htmlFormatExtras(
   }
 
   const metadata: Metadata = {};
-  return {
+  const result: FormatExtras = {
     [kIncludeInHeader]: includeInHeader,
     [kIncludeBeforeBody]: includeBeforeBody,
     [kIncludeAfterBody]: includeAfterBody,
@@ -657,6 +663,11 @@ export async function htmlFormatExtras(
       [kHtmlPostprocessors]: htmlPostProcessors,
     },
   };
+
+  return mergeConfigs(
+    result,
+    ...configurableExtras,
+  ) as FormatExtras;
 }
 
 const kFormatHasBootstrap = "has-bootstrap";

src/resources/formats/html/axe/axe-check.js

@@ -0,0 +1,33 @@
+class QuartoAxeChecker {
+  constructor(opts) {
+    this.options = opts;
+  }
+  async init() {
+    const axe = (await import("https://cdn.skypack.dev/pin/[email protected]/mode=imports,min/optimized/axe-core.js")).default;
+    const result = await axe.run({
+      preload: { assets: ['cssom'], timeout: 50000 }    
+    });
+    if (this.options.output === "json") {
+      console.log(JSON.stringify(result, null, 2));
+      return;
+    }
+    for (const violation of result.violations) {
+      console.log(violation.description);
+      for (const node of violation.nodes) {
+        for (const target of node.target) {
+          console.log(target);
+          console.log(document.querySelector(target));
+        }
+      }
+    }
+  }
+}
+
+export async function init() {
+  const opts = document.querySelector("#quarto-axe-checker-options");
+  if (opts) {
+    const jsonOptions = JSON.parse(atob(opts.textContent));
+    const checker = new QuartoAxeChecker(jsonOptions);
+    await checker.init();
+  }
+}

src/resources/formats/html/esbuild-analysis-cache.json

@@ -14,6 +14,11 @@
             "path": "./tabsets/tabsets.js",
             "kind": "import-statement",
             "external": true
+          },
+          {
+            "path": "./axe/axe-check.js",
+            "kind": "import-statement",
+            "external": true
           }
         ],
         "exports": [],

src/resources/formats/html/quarto.js

@@ -1,4 +1,5 @@
 import * as tabsets from "./tabsets/tabsets.js";
+import * as axe from "./axe/axe-check.js";
 
 const sectionChanged = new CustomEvent("quarto-sectionChanged", {
   detail: {},
@@ -826,6 +827,7 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
 });
 
 tabsets.init();
+axe.init();
 
 function throttle(func, wait) {
   let waiting = false;