diff --git a/src/index.ts b/src/index.ts index 014c3e9..58347b1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,16 +2,9 @@ import mustache from 'mustache'; import { AxeResults, Result } from 'axe-core'; import { loadTemplate } from './util/loadTemplate'; import { prepareReportData } from './util/prepareReportData'; +import { prepareAxeRules } from './util/prepareAxeRules'; import { saveHtmlReport } from './util/saveHtmlReport'; -export interface ResultsMinimal { - violations: Result[]; - url?: string; - passes?: Result[]; - incomplete?: Result[]; - inapplicable?: Result[]; -} - export interface Options { reportFileName?: string; outputDir?: string; @@ -20,7 +13,7 @@ export interface Options { } export interface CreateReport { - results: AxeResults | ResultsMinimal; // user can decide to pass only 'violations' or full AxeResults object + results: Partial; options?: Options; } @@ -31,12 +24,11 @@ export interface PreparedResults { inapplicable?: Result[]; } -export const missingRequiredParamsError = - "'violations' is required for HTML accessibility report. Example: createHtmlReport({ results : { violations: Result[] } })"; - export function createHtmlReport({ results, options }: CreateReport): void { if (!results.violations) { - throw new Error(missingRequiredParamsError); + throw new Error( + "'violations' is required for HTML accessibility report. Example: createHtmlReport({ results : { violations: Result[] } })" + ); } try { const template = loadTemplate(); @@ -47,21 +39,23 @@ export function createHtmlReport({ results, options }: CreateReport): void { inapplicable: results.inapplicable, }); const htmlContent = mustache.render(template, { - url: results.url || undefined, + url: results.url, violationsSummary: preparedReportData.violationsSummary, violations: preparedReportData.violationsSummaryTable, violationDetails: preparedReportData.violationsDetails, checksPassed: preparedReportData.checksPassed, checksIncomplete: preparedReportData.checksIncomplete, checksInapplicable: preparedReportData.checksInapplicable, - hasPassed: results.passes !== undefined, - hasIncomplete: results.incomplete !== undefined, - hasInapplicable: results.inapplicable !== undefined, + hasPassed: Boolean(results.passes), + hasIncomplete: Boolean(results.incomplete), + hasInapplicable: Boolean(results.inapplicable), incompleteTotal: preparedReportData.checksIncomplete ? preparedReportData.checksIncomplete.length : 0, projectKey: options?.projectKey, customSummary: options?.customSummary, + hasAxeRawResults: Boolean(results?.timestamp), + rules: prepareAxeRules(results?.toolOptions?.rules || {}), }); saveHtmlReport({ htmlContent, diff --git a/src/util/prepareAxeRules.ts b/src/util/prepareAxeRules.ts new file mode 100644 index 0000000..8972282 --- /dev/null +++ b/src/util/prepareAxeRules.ts @@ -0,0 +1,12 @@ +import { RuleObject } from 'axe-core'; + +export interface ReformattedRulesObject { + index: number; + rule: string; + enabled: boolean; +} +export function prepareAxeRules(rules: RuleObject): ReformattedRulesObject[] { + return Object.keys(rules).map((id, index) => { + return { index: ++ index, rule: id, enabled: rules[id].enabled }; + }); +} diff --git a/src/util/prepareReportData.ts b/src/util/prepareReportData.ts index 4bc7b24..a6978f7 100644 --- a/src/util/prepareReportData.ts +++ b/src/util/prepareReportData.ts @@ -12,7 +12,7 @@ function simplifyAxeResultForSummary(results: Result[]): Summary[] { help, wcag: getWcagReference(tags), impact: impact || 'n/a', - nodes: nodes.length, + nodes: nodes.length })); } /** diff --git a/src/util/template/pageTemplate.html b/src/util/template/pageTemplate.html index 50a946b..45f895b 100644 --- a/src/util/template/pageTemplate.html +++ b/src/util/template/pageTemplate.html @@ -325,6 +325,55 @@
{{/hasInapplicable}} + {{#hasAxeRawResults}} +
+
+
+
+ +
+
+
+
+ {{#rules.length}} + + + + + + + + + + {{#rules}} + + + + + + + {{/rules}} +
#Rule IDEnabled
{{index}}{{rule}}{{enabled}}
+ {{/rules.length}} +
+
+
+
+ {{/hasAxeRawResults}} diff --git a/test/__snapshots__/index.test.ts.snap b/test/__snapshots__/index.test.ts.snap index cbe7733..1e9b0cd 100644 --- a/test/__snapshots__/index.test.ts.snap +++ b/test/__snapshots__/index.test.ts.snap @@ -2817,6 +2817,547 @@ exports[`createHtmlReport() test AxeResults passed 1`] = ` +
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Rule IDEnabled
1object-alttrue
2role-img-alttrue
3input-image-alttrue
4image-alttrue
5svg-img-alttrue
6area-alttrue
7audio-captiontrue
8video-captiontrue
9definition-listtrue
10dlitemtrue
11listitemtrue
12listtrue
13th-has-data-cellstrue
14td-headers-attrtrue
15td-has-headertrue
16p-as-headingtrue
17aria-required-parenttrue
18aria-required-childrentrue
19table-fake-captiontrue
20css-orientation-lockfalse
21autocomplete-validtrue
22link-in-text-blocktrue
23no-autoplay-audiotrue
24color-contrasttrue
25meta-viewporttrue
26avoid-inline-spacingtrue
27server-side-image-maptrue
28meta-refreshtrue
29blinktrue
30marqueetrue
31bypasstrue
32frame-titletrue
33document-titletrue
34scrollable-region-focusabletrue
35identical-links-same-purposefalse
36label-content-name-mismatchtrue
37html-has-langtrue
38html-lang-validtrue
39html-xml-lang-mismatchtrue
40valid-langtrue
41form-field-multiple-labelstrue
42duplicate-id-activetrue
43duplicate-idtrue
44duplicate-id-ariatrue
45aria-valid-attrtrue
46aria-valid-attr-valuetrue
47aria-input-field-nametrue
48aria-rolestrue
49aria-toggle-field-nametrue
50aria-hidden-focustrue
51aria-hidden-bodytrue
52button-nametrue
53aria-allowed-attrtrue
54input-button-nametrue
55aria-required-attrtrue
56aria-roledescriptiontrue
57link-nametrue
58labeltrue
59accesskeystrue
60regiontrue
61aria-allowed-roletrue
62landmark-banner-is-top-leveltrue
63landmark-complementary-is-top-leveltrue
64landmark-contentinfo-is-top-leveltrue
65focus-order-semanticstrue
66tabindextrue
67landmark-no-duplicate-maintrue
68label-title-onlytrue
69frame-testedtrue
70frame-title-uniquetrue
71heading-ordertrue
72empty-headingtrue
73hidden-contenttrue
74landmark-uniquetrue
75landmark-main-is-top-leveltrue
76page-has-heading-onetrue
77landmark-one-maintrue
78landmark-no-duplicate-bannertrue
79landmark-no-duplicate-contentinfotrue
80scope-attr-validtrue
81image-redundant-alttrue
82table-duplicate-nametrue
83skip-linktrue
84meta-viewport-largetrue
+
+
+
+
diff --git a/test/index.test.ts b/test/index.test.ts index d2873ea..a8e7fb1 100644 --- a/test/index.test.ts +++ b/test/index.test.ts @@ -1,4 +1,4 @@ -import { createHtmlReport, missingRequiredParamsError } from '../src'; +import { createHtmlReport } from '../src'; import { defaultReportFileName } from '../src/util/saveHtmlReport'; import fs from 'fs'; import path from 'path'; @@ -25,7 +25,9 @@ describe('createHtmlReport() test', () => { passes: [], }, }); - }).toThrow(missingRequiredParamsError); + }).toThrow( + "'violations' is required for HTML accessibility report. Example: createHtmlReport({ results : { violations: Result[] } })" + ); }); it('Verify report is created only with violations because passes and incomplete are not passed', async () => {