1
/*
2
 * format-html-axe.ts
3
 *
4
 * Copyright (C) 2020-2025 Posit Software, PBC
5
 */
6

7
import { isHtmlDashboardOutput, isRevealjsOutput } from "../../config/format.ts";
8
import {
9
  Format,
10
  FormatDependency,
11
  FormatExtras,
12
  kDependencies,
13
} from "../../config/types.ts";
14
import { formatResourcePath } from "../../core/resources.ts";
15
import { encodeBase64 } from "../../deno_ral/encoding.ts";
16
import { join } from "../../deno_ral/path.ts";
17

18
function axeHtmlDependency(options: unknown): FormatDependency {
19
  return {
20
    name: "quarto-axe",
21
    head: `<script id="quarto-axe-checker-options" type="text/plain">${
22
      encodeBase64(JSON.stringify(options))
23
    }</script>`,
24
    scripts: [{
25
      name: "axe-check.js",
26
      path: formatResourcePath("html", join("axe", "axe-check.js")),
27
      attribs: { type: "module" },
28
    }],
29
  };
30
}
31

32
export function axeFormatDependencies(
33
  format: Format,
34
  options?: unknown,
35
): FormatExtras {
36
  if (!options) return {};
37

38
  // Use reveal-theme for revealjs, bootstrap for other HTML formats.
39
  // Note: For revealjs, sass-bundles compile separately from the theme
40
  // (which compiles in format-reveal-theme.ts), so the !default values
41
  // below are used instead of actual theme colors. This is a known
42
  // limitation - see GitHub issue for architectural context.
43
  const isRevealjs = isRevealjsOutput(format.pandoc);
44
  const isDashboard = isHtmlDashboardOutput(format.identifier["base-format"]);
45
  const sassDependency = isRevealjs ? "reveal-theme" : "bootstrap";
46

47
  // Base overlay rules shared by all formats (also serves as fallback for revealjs)
48
  const baseRules = `
49
body div.quarto-axe-report {
50
  position: fixed;
51
  bottom: 3rem;
52
  right: 3rem;
53
  padding: 1rem;
54
  border: 1px solid var(--r-main-color, $body-color);
55
  z-index: 9999;
56
  background-color: var(--r-background-color, $body-bg);
57
  color: var(--r-main-color, $body-color);
58
  max-height: 50vh;
59
  overflow-y: auto;
60
}
61

62
.quarto-axe-violation-help { padding-left: 0.5rem; }
63
.quarto-axe-violation-selector { padding-left: 1rem; }
64
.quarto-axe-violation-target {
65
  padding: 0.5rem;
66
  color: $link-color;
67
  text-decoration: underline;
68
  cursor: pointer;
69
}
70

71
.quarto-axe-hover-highlight {
72
  background-color: red;
73
  border: 2px solid red;
74
}`;
75

76
  // RevealJS: override overlay styles when report is embedded as a slide
77
  const revealjsRules = isRevealjs
78
    ? `
79
.reveal .slides section.quarto-axe-report-slide {
80
  text-align: left;
81
  font-size: 0.55em;
82
  h2 {
83
    margin-bottom: 0.5em;
84
    font-size: 1.8em;
85
  }
86
  div.quarto-axe-report {
87
    position: static;
88
    padding: 0;
89
    border: none;
90
    background-color: transparent;
91
    max-height: none;
92
    overflow-y: visible;
93
    z-index: auto;
94
  }
95
  .quarto-axe-violation-description {
96
    margin-top: 0.6em;
97
    font-weight: bold;
98
  }
99
  .quarto-axe-violation-target {
100
    font-size: 0.9em;
101
  }
102
}`
103
    : "";
104

105
  // Dashboard: report inside offcanvas sidebar (not fixed overlay)
106
  const dashboardRules = isDashboard
107
    ? `
108
.quarto-dashboard .offcanvas.quarto-axe-offcanvas {
109
  .quarto-axe-report {
110
    position: static;
111
    padding: 0;
112
    border: none;
113
    background-color: transparent;
114
    max-height: none;
115
    overflow-y: visible;
116
    z-index: auto;
117
  }
118
}
119
.quarto-dashboard .quarto-axe-toggle {
120
  position: fixed;
121
  bottom: 1rem;
122
  right: 1rem;
123
  z-index: 1040;
124
  border-radius: 50%;
125
  width: 3rem;
126
  height: 3rem;
127
  display: flex;
128
  align-items: center;
129
  justify-content: center;
130
  font-size: 1.25rem;
131
}
132
.quarto-dashboard .quarto-axe-scanning {
133
  padding: 1rem;
134
  text-align: center;
135
  opacity: 0.7;
136
  font-style: italic;
137
}`
138
    : "";
139

140
  return {
141
    html: {
142
      [kDependencies]: [
143
        axeHtmlDependency(options),
144
      ],
145
      "sass-bundles": [
146
        {
147
          key: "axe",
148
          dependency: sassDependency,
149
          user: [{
150
            uses: "",
151
            defaults: `
152
$body-color: #222 !default;
153
$body-bg: #fff !default;
154
$link-color: #2a76dd !default;
155
`,
156
            functions: "",
157
            mixins: "",
158
            rules: baseRules + revealjsRules + dashboardRules,
159
          }],
160
        },
161
      ],
162
    },
163
  };
164
}
165

166