Merge pull request #12730 from quarto-dev/feature/axe-check

Feature/axe check

Author: cscheid

configuration

@@ -54,7 +54,7 @@ export DATATABLES_CONFIG=bs5/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-html5-2.4.2/b-prin
 export PDF_MAKE=0.2.7
 
 # javascript search dependencies
-export AUTOCOMPLETE_JS=1.11.1
+export AUTOCOMPLETE_JS=1.19.1
 export FUSE_JS=6.6.2
 export ALGOLIA_SEARCH_JS=4.5.1
 export ALGOLIA_SEARCH_INSIGHTS_JS=2.0.3

src/core/temp-types.ts

@@ -6,6 +6,10 @@
 
 export interface TempContext {
   baseDir: string;
+  createFileFromString: (
+    content: string,
+    options?: Deno.MakeTempOptions,
+  ) => string;
   createFile: (options?: Deno.MakeTempOptions) => string;
   createDir: (options?: Deno.MakeTempOptions) => string;
   cleanup: () => void;

src/core/temp.ts

@@ -66,8 +66,13 @@ export function createTempContext(options?: Deno.MakeTempOptions): TempContext {
 
   const tempContextCleanupHandlers: VoidFunction[] = [];
 
-  return {
+  const result: TempContext = {
     baseDir: dir,
+    createFileFromString: (content: string, options?: Deno.MakeTempOptions) => {
+      const file = result.createFile(options);
+      Deno.writeTextFileSync(file, content);
+      return file;
+    },
     createFile: (options?: Deno.MakeTempOptions) => {
       return Deno.makeTempFileSync({ ...options, dir });
     },
@@ -93,6 +98,7 @@ export function createTempContext(options?: Deno.MakeTempOptions): TempContext {
       tempContextCleanupHandlers.push(handler);
     },
   };
+  return result;
 }
 
 export function systemTempDir(name: string) {

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

@@ -0,0 +1,64 @@
+/*
+ * 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) return {};
+
+  return {
+    [kIncludeInHeader]: [
+      temp.createFileFromString(
+        `<script id="quarto-axe-checker-options" type="text/plain">${
+          encodeBase64(JSON.stringify(options))
+        }</script>`,
+      ),
+    ],
+    html: {
+      "sass-bundles": [
+        {
+          key: "axe",
+          dependency: "bootstrap",
+          user: [{
+            uses: "",
+            defaults: "",
+            functions: "",
+            mixins: "",
+            rules: `
+body div.quarto-axe-report {
+  position: fixed;
+  bottom: 3rem;
+  right: 3rem;
+  padding: 1rem;
+  border: 1px solid $body-color;
+}
+
+.quarto-axe-violation-help { padding-left: 0.5rem; }
+.quarto-axe-violation-selector { padding-left: 1rem; }
+.quarto-axe-violation-target {
+  padding: 0.5rem;
+  color: $link-color;
+  text-decoration: underline;
+  cursor: pointer;
+}
+  
+.quarto-axe-hover-highlight {
+  background-color: red;
+  border: 1px solid $body-color;
+}`,
+          }],
+        },
+      ],
+    },
+  };
+}

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/editor/tools/vs-code.mjs

@@ -23769,6 +23769,8 @@ var require_yaml_intelligence_resources = __commonJS({
         "Manuscript configuration",
         "internal-schema-hack",
         "List execution engines you want to give priority when determining\nwhich engine should render a notebook. If two engines have support for a\nnotebook, the one listed earlier will be chosen. Quarto\u2019s default order\nis \u2018knitr\u2019, \u2018jupyter\u2019, \u2018markdown\u2019, \u2018julia\u2019.",
+        "When defined, run axe-core accessibility tests on the document.",
+        "If set, output axe-core results on console. <code>json</code>:\nproduce structured output; <code>console</code>: print output to\njavascript console; <code>document</code>: produce a visual report of\nviolations in the document itself.",
         "Project configuration.",
         "Project type (<code>default</code>, <code>website</code>,\n<code>book</code>, or <code>manuscript</code>)",
         "Files to render (defaults to all files)",
@@ -24114,7 +24116,8 @@ var require_yaml_intelligence_resources = __commonJS({
         "Disambiguating year suffix in author-date styles (e.g.&nbsp;\u201Ca\u201D in \u201CDoe,\n1999a\u201D).",
         "Manuscript configuration",
         "internal-schema-hack",
-        "List execution engines you want to give priority when determining\nwhich engine should render a notebook. If two engines have support for a\nnotebook, the one listed earlier will be chosen. Quarto\u2019s default order\nis \u2018knitr\u2019, \u2018jupyter\u2019, \u2018markdown\u2019, \u2018julia\u2019."
+        "List execution engines you want to give priority when determining\nwhich engine should render a notebook. If two engines have support for a\nnotebook, the one listed earlier will be chosen. Quarto\u2019s default order\nis \u2018knitr\u2019, \u2018jupyter\u2019, \u2018markdown\u2019, \u2018julia\u2019.",
+        "Date format for the document"
       ],
       "schema/external-schemas.yml": [
         {
@@ -24343,12 +24346,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 195861,
+        _internalId: 196444,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 195853,
+            _internalId: 196436,
             type: "enum",
             enum: [
               "png",
@@ -24364,7 +24367,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 195860,
+            _internalId: 196443,
             type: "anyOf",
             anyOf: [
               {
@@ -24404,7 +24407,32 @@ var require_yaml_intelligence_resources = __commonJS({
           "case-detection": true
         },
         $id: "handlers/mermaid"
-      }
+      },
+      "schema/document-a11y.yml": [
+        {
+          name: "axe",
+          schema: {
+            anyOf: [
+              "boolean",
+              {
+                object: {
+                  properties: {
+                    output: {
+                      enum: [
+                        "json",
+                        "console",
+                        "document"
+                      ],
+                      description: "If set, output axe-core results on console. `json`: produce structured output; `console`: print output to javascript console; `document`: produce a visual report of violations in the document itself."
+                    }
+                  }
+                }
+              }
+            ]
+          },
+          description: "When defined, run axe-core accessibility tests on the document."
+        }
+      ]
     };
   }
 });