Skip to content

Commit d596a9f

Browse files
hanna-skrylhanna-skryl
committed
fix(plugin-axe): wrap HTML tags in audit metadata
1 parent 78675b2 commit d596a9f

File tree

3 files changed

+47
-47
lines changed

3 files changed

+47
-47
lines changed

‎e2e/plugin-axe-e2e/tests/__snapshots__/collect.e2e.test.ts.snap‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
77
{
88
"audits": [
99
{
10-
"description": "Ensure <area> elements of image maps have alternative text",
10+
"description": "Ensure \`<area>\` elements of image maps have alternative text",
1111
"displayValue": "0 elements",
1212
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/area-alt?application=axeAPI",
1313
"score": 1,
1414
"slug": "area-alt",
15-
"title": "Active <area> elements must have alternative text",
15+
"title": "Active \`<area>\` elements must have alternative text",
1616
"value": 0,
1717
},
1818
{
@@ -106,12 +106,12 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
106106
"value": 0,
107107
},
108108
{
109-
"description": "Ensure <audio> elements have captions",
109+
"description": "Ensure \`<audio>\` elements have captions",
110110
"displayValue": "0 elements",
111111
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/audio-caption?application=axeAPI",
112112
"score": 1,
113113
"slug": "audio-caption",
114-
"title": "<audio> elements must have a captions track",
114+
"title": "\`<audio>\` elements must have a captions track",
115115
"value": 0,
116116
},
117117
{
@@ -133,30 +133,30 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
133133
"value": 0,
134134
},
135135
{
136-
"description": "Ensure <blink> elements are not used",
136+
"description": "Ensure \`<blink>\` elements are not used",
137137
"displayValue": "0 elements",
138138
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/blink?application=axeAPI",
139139
"score": 1,
140140
"slug": "blink",
141-
"title": "<blink> elements are deprecated and must not be used",
141+
"title": "\`<blink>\` elements are deprecated and must not be used",
142142
"value": 0,
143143
},
144144
{
145-
"description": "Ensure <dl> elements are structured correctly",
145+
"description": "Ensure \`<dl>\` elements are structured correctly",
146146
"displayValue": "0 elements",
147147
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/definition-list?application=axeAPI",
148148
"score": 1,
149149
"slug": "definition-list",
150-
"title": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
150+
"title": "\`<dl>\` elements must only directly contain properly-ordered \`<dt>\` and \`<dd>\` groups, \`<script>\`, \`<template>\` or \`<div>\` elements",
151151
"value": 0,
152152
},
153153
{
154-
"description": "Ensure <dt> and <dd> elements are contained by a <dl>",
154+
"description": "Ensure \`<dt>\` and \`<dd>\` elements are contained by a \`<dl>\`",
155155
"displayValue": "0 elements",
156156
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/dlitem?application=axeAPI",
157157
"score": 1,
158158
"slug": "dlitem",
159-
"title": "<dt> and <dd> elements must be contained by a <dl>",
159+
"title": "\`<dt>\` and \`<dd>\` elements must be contained by a \`<dl>\`",
160160
"value": 0,
161161
},
162162
{
@@ -169,7 +169,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
169169
"value": 0,
170170
},
171171
{
172-
"description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
172+
"description": "Ensure \`<frame>\` and \`<iframe>\` elements with focusable content do not have tabindex=-1",
173173
"displayValue": "0 elements",
174174
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/frame-focusable-content?application=axeAPI",
175175
"score": 1,
@@ -178,7 +178,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
178178
"value": 0,
179179
},
180180
{
181-
"description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
181+
"description": "Ensure \`<iframe>\` and \`<frame>\` elements contain a unique title attribute",
182182
"displayValue": "0 elements",
183183
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/frame-title-unique?application=axeAPI",
184184
"score": 1,
@@ -187,7 +187,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
187187
"value": 0,
188188
},
189189
{
190-
"description": "Ensure <iframe> and <frame> elements have an accessible name",
190+
"description": "Ensure \`<iframe>\` and \`<frame>\` elements have an accessible name",
191191
"displayValue": "0 elements",
192192
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/frame-title?application=axeAPI",
193193
"score": 1,
@@ -214,7 +214,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
214214
"value": 0,
215215
},
216216
{
217-
"description": "Ensure <input type="image"> elements have alternative text",
217+
"description": "Ensure \`<input type="image">\` elements have alternative text",
218218
"displayValue": "0 elements",
219219
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/input-image-alt?application=axeAPI",
220220
"score": 1,
@@ -246,29 +246,29 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
246246
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/list?application=axeAPI",
247247
"score": 1,
248248
"slug": "list",
249-
"title": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
249+
"title": "\`<ul>\` and \`<ol>\` must only directly contain \`<li>\`, \`<script>\` or \`<template>\` elements",
250250
"value": 0,
251251
},
252252
{
253-
"description": "Ensure <li> elements are used semantically",
253+
"description": "Ensure \`<li>\` elements are used semantically",
254254
"displayValue": "0 elements",
255255
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/listitem?application=axeAPI",
256256
"score": 1,
257257
"slug": "listitem",
258-
"title": "<li> elements must be contained in a <ul> or <ol>",
258+
"title": "\`<li>\` elements must be contained in a \`<ul>\` or \`<ol>\`",
259259
"value": 0,
260260
},
261261
{
262-
"description": "Ensure <marquee> elements are not used",
262+
"description": "Ensure \`<marquee>\` elements are not used",
263263
"displayValue": "0 elements",
264264
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/marquee?application=axeAPI",
265265
"score": 1,
266266
"slug": "marquee",
267-
"title": "<marquee> elements are deprecated and must not be used",
267+
"title": "\`<marquee>\` elements are deprecated and must not be used",
268268
"value": 0,
269269
},
270270
{
271-
"description": "Ensure <meta http-equiv="refresh"> is not used for delayed refresh",
271+
"description": "Ensure \`<meta http-equiv="refresh">\` is not used for delayed refresh",
272272
"displayValue": "0 elements",
273273
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/meta-refresh?application=axeAPI",
274274
"score": 1,
@@ -277,21 +277,21 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
277277
"value": 0,
278278
},
279279
{
280-
"description": "Ensure <object> elements have alternative text",
280+
"description": "Ensure \`<object>\` elements have alternative text",
281281
"displayValue": "0 elements",
282282
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/object-alt?application=axeAPI",
283283
"score": 1,
284284
"slug": "object-alt",
285-
"title": "<object> elements must have alternative text",
285+
"title": "\`<object>\` elements must have alternative text",
286286
"value": 0,
287287
},
288288
{
289-
"description": "Ensure bold, italic text and font-size is not used to style <p> elements as a heading",
289+
"description": "Ensure bold, italic text and font-size is not used to style \`<p>\` elements as a heading",
290290
"displayValue": "0 elements",
291291
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/p-as-heading?application=axeAPI",
292292
"score": 1,
293293
"slug": "p-as-heading",
294-
"title": "Styled <p> elements must not be used as headings",
294+
"title": "Styled \`<p>\` elements must not be used as headings",
295295
"value": 0,
296296
},
297297
{
@@ -340,16 +340,16 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
340340
"value": 0,
341341
},
342342
{
343-
"description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have accessible text",
343+
"description": "Ensure \`<svg>\` elements with an img, graphics-document or graphics-symbol role have accessible text",
344344
"displayValue": "0 elements",
345345
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/svg-img-alt?application=axeAPI",
346346
"score": 1,
347347
"slug": "svg-img-alt",
348-
"title": "<svg> elements with an img role must have alternative text",
348+
"title": "\`<svg>\` elements with an img role must have alternative text",
349349
"value": 0,
350350
},
351351
{
352-
"description": "Ensure that tables with a caption use the <caption> element.",
352+
"description": "Ensure that tables with a caption use the \`<caption>\` element.",
353353
"displayValue": "0 elements",
354354
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/table-fake-caption?application=axeAPI",
355355
"score": 1,
@@ -358,25 +358,25 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
358358
"value": 0,
359359
},
360360
{
361-
"description": "Ensure that each non-empty data cell in a <table> larger than 3 by 3 has one or more table headers",
361+
"description": "Ensure that each non-empty data cell in a \`<table>\` larger than 3 by 3 has one or more table headers",
362362
"displayValue": "0 elements",
363363
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/td-has-header?application=axeAPI",
364364
"score": 1,
365365
"slug": "td-has-header",
366-
"title": "Non-empty <td> elements in larger <table> must have an associated table header",
366+
"title": "Non-empty \`<td>\` elements in larger \`<table>\` must have an associated table header",
367367
"value": 0,
368368
},
369369
{
370-
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other <th> elements in that table",
370+
"description": "Ensure that each cell in a table that uses the headers attribute refers only to other \`<th>\` elements in that table",
371371
"displayValue": "0 elements",
372372
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/td-headers-attr?application=axeAPI",
373373
"score": 1,
374374
"slug": "td-headers-attr",
375-
"title": "Table cell headers attributes must refer to other <th> elements in the same table",
375+
"title": "Table cell headers attributes must refer to other \`<th>\` elements in the same table",
376376
"value": 0,
377377
},
378378
{
379-
"description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
379+
"description": "Ensure that \`<th>\` elements and elements with role=columnheader/rowheader have data cells they describe",
380380
"displayValue": "0 elements",
381381
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/th-has-data-cells?application=axeAPI",
382382
"score": 1,
@@ -394,21 +394,21 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
394394
"value": 0,
395395
},
396396
{
397-
"description": "Ensure <video> elements have captions",
397+
"description": "Ensure \`<video>\` elements have captions",
398398
"displayValue": "0 elements",
399399
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/video-caption?application=axeAPI",
400400
"score": 1,
401401
"slug": "video-caption",
402-
"title": "<video> elements must have captions",
402+
"title": "\`<video>\` elements must have captions",
403403
"value": 0,
404404
},
405405
{
406-
"description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
406+
"description": "Ensure \`<video>\` or \`<audio>\` elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
407407
"displayValue": "0 elements",
408408
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/no-autoplay-audio?application=axeAPI",
409409
"score": 1,
410410
"slug": "no-autoplay-audio",
411-
"title": "<video> or <audio> elements must not play automatically",
411+
"title": "\`<video>\` or \`<audio>\` elements must not play automatically",
412412
"value": 0,
413413
},
414414
{
@@ -536,12 +536,12 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
536536
"value": 1,
537537
},
538538
{
539-
"description": "Ensure each HTML document contains a non-empty <title> element",
539+
"description": "Ensure each HTML document contains a non-empty \`<title>\` element",
540540
"displayValue": "1 element",
541541
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/document-title?application=axeAPI",
542542
"score": 1,
543543
"slug": "document-title",
544-
"title": "Documents must have <title> element to aid in navigation",
544+
"title": "Documents must have \`<title>\` element to aid in navigation",
545545
"value": 1,
546546
},
547547
{
@@ -559,16 +559,16 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
559559
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/html-has-lang?application=axeAPI",
560560
"score": 1,
561561
"slug": "html-has-lang",
562-
"title": "<html> element must have a lang attribute",
562+
"title": "\`<html>\` element must have a lang attribute",
563563
"value": 1,
564564
},
565565
{
566-
"description": "Ensure the lang attribute of the <html> element has a valid value",
566+
"description": "Ensure the lang attribute of the \`<html>\` element has a valid value",
567567
"displayValue": "1 element",
568568
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/html-lang-valid?application=axeAPI",
569569
"score": 1,
570570
"slug": "html-lang-valid",
571-
"title": "<html> element must have a valid value for the lang attribute",
571+
"title": "\`<html>\` element must have a valid value for the lang attribute",
572572
"value": 1,
573573
},
574574
{
@@ -581,7 +581,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
581581
"value": 1,
582582
},
583583
{
584-
"description": "Ensure <meta name="viewport"> does not disable text scaling and zooming",
584+
"description": "Ensure \`<meta name="viewport">\` does not disable text scaling and zooming",
585585
"displayValue": "1 element",
586586
"docsUrl": "https://dequeuniversity.com/rules/axe/4.11/meta-viewport?application=axeAPI",
587587
"score": 1,
@@ -625,7 +625,7 @@ exports[`PLUGIN collect report with axe-plugin NPM package > should run plugin o
625625
"value": 1,
626626
},
627627
{
628-
"description": "Ensure <img> elements have alternative text or a role of none or presentation",
628+
"description": "Ensure \`<img>\` elements have alternative text or a role of none or presentation",
629629
"details": {
630630
"issues": [
631631
{

‎packages/plugin-axe/src/lib/meta/transform.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import axe from 'axe-core';
22
import type { Audit, Group } from '@code-pushup/models';
3-
import { objectToEntries } from '@code-pushup/utils';
3+
import { objectToEntries, wrapTags } from '@code-pushup/utils';
44
import type { AxePreset } from '../config.js';
55
import {
66
type AxeGroupSlug,
@@ -16,8 +16,8 @@ export function loadAxeRules(preset: AxePreset): axe.RuleMetadata[] {
1616
export function transformRulesToAudits(rules: axe.RuleMetadata[]): Audit[] {
1717
return rules.map(rule => ({
1818
slug: rule.ruleId,
19-
title: rule.help,
20-
description: rule.description,
19+
title: wrapTags(rule.help),
20+
description: wrapTags(rule.description),
2121
docsUrl: rule.helpUrl,
2222
}));
2323
}

‎packages/utils/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export {
123123
listAuditsFromAllPlugins,
124124
listGroupsFromAllPlugins,
125125
} from './lib/reports/flatten-plugins.js';
126-
export { formatIssueSeverities } from './lib/reports/formatting.js';
126+
export { formatIssueSeverities, wrapTags } from './lib/reports/formatting.js';
127127
export { generateMdReport } from './lib/reports/generate-md-report.js';
128128
export {
129129
generateMdReportsDiff,

0 commit comments

Comments
 (0)