Merge pull request #13 from lpelypenko/addTags

Added all WCAG tags to WCAG column and added all raw tags in description
lpelypenko · Jan 3, 2021 · 3b93c5d · 3b93c5d
2 parents 50e4ca2 + 8c82d08
commit 3b93c5d
Show file tree

Hide file tree

Showing 22 changed files with 4,385 additions and 872 deletions.
diff --git a/artifacts/accessibilityReport.html b/artifacts/accessibilityReport.html
diff --git a/artifacts/tcAllPassedOnlyViolations.html b/artifacts/tcAllPassedOnlyViolations.html
@@ -86,7 +86,6 @@ <h3>
                 AXE Accessibility Results
             </h3>
             <div class="summarySection">
-
             </div>
             <h5>axe-core found <span class="badge badge-success">0</span> violations</h5>
                 <tbody>

diff --git a/artifacts/tcInapplicablePresent.html b/artifacts/tcInapplicablePresent.html
diff --git a/artifacts/tcIncludingCustomSummary.html b/artifacts/tcIncludingCustomSummary.html
diff --git a/artifacts/tcOnlyPasses.html b/artifacts/tcOnlyPasses.html
@@ -91,7 +91,6 @@ <h3>
                     <a href="https:&#x2F;&#x2F;dequeuniversity.com&#x2F;demo&#x2F;mars&#x2F;" target="_blank" class="card-link">https:&#x2F;&#x2F;dequeuniversity.com&#x2F;demo&#x2F;mars&#x2F;</a>
                     <br />
                 </div>
-
             </div>
             <h5>axe-core found <span class="badge badge-success">0</span> violations</h5>
                 <tbody>

diff --git a/artifacts/tcPassesAndViolations.html b/artifacts/tcPassesAndViolations.html
diff --git a/artifacts/tcWithTheKey.html b/artifacts/tcWithTheKey.html
diff --git a/artifacts/tsAllOptionalParametersPresent.html b/artifacts/tsAllOptionalParametersPresent.html
diff --git a/artifacts/urlIsNotPassed.html b/artifacts/urlIsNotPassed.html
diff --git a/docs/index.html b/docs/index.html
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "axe-html-reporter",
-    "version": "2.1.0",
+    "version": "2.1.1",
     "description": "The module that allows you to create HTML Report from raw accessibility aXe result object",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

diff --git a/src/util/AxeReport.ts b/src/util/AxeReport.ts
@@ -22,6 +22,7 @@ interface NodeResult {
 
 interface Details {
     wcag: string;
+    tags: string[];
     id: string;
     impact: string;
     description: string;

diff --git a/src/util/getWcagReference.ts b/src/util/getWcagReference.ts
@@ -6,20 +6,30 @@
  * @returns {string}
  */
 export function getWcagReference(tags: string[]): string {
-    const tagsNames = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice'];
-    const foundTags = tags.filter((tag) => tagsNames.includes(tag));
-
-    const tagNamesToAccessibilityStandard: Record<string, string> = {
-        wcag2a: 'WCAG 2.0 Level A',
-        wcag2aa: 'WCAG 2.0 Level AA',
-        wcag21a: 'WCAG 2.1 Level A',
-        wcag21aa: 'WCAG 2.1 Level AA',
-        'best-practice': 'Best practice',
-    };
-
-    if (foundTags.length > 0) {
-        return foundTags.map((tag) => tagNamesToAccessibilityStandard[tag]).join(',');
+    // case 1: tags includes best-practice
+    if (tags.includes('best-practice')) {
+        return 'Best practice';
+    }
+    // case 2: tags does not include best-practice and include one or more wcag tags
+    const foundWcagTags = tags.filter((tag) => tag.includes('wcag'));
+    if (foundWcagTags.length > 0) {
+        return foundWcagTags
+            .map((tag) => {
+                const sectionNumberMatch = tag.match(/\d+/);
+                const levelMatch = tag.match(/wcag\d+(a+)/);
+                const sectionNumber =
+                    sectionNumberMatch && sectionNumberMatch.length >= 1
+                        ? sectionNumberMatch[0].split('').join('.')
+                        : ''; // wcag section number, e.g 2 in 'wcag2aa' or 411 in 'wcag411' tag
+                const level =
+                    levelMatch && levelMatch.length > 1
+                        ? ` Level ${levelMatch[1].toUpperCase()}`
+                        : ''; // wcag level, e.g aa in 'wcag2aa' or a in 'wcag21a' tag
+                return `WCAG ${sectionNumber}${level}`;
+            })
+            .join(', ');
     }
+    // case 3: tags does not include best-practice or wcag, return raw tags comma separated
 
     return tags.join(',');
 }
diff --git a/src/util/prepareReportData.ts b/src/util/prepareReportData.ts
@@ -10,6 +10,7 @@ function simplifyAxeResultForSummary(results: Result[]): Summary[] {
         id,
         help,
         wcag: getWcagReference(tags),
+        tags,
         impact: impact || 'n/a',
         nodes: nodes.length,
     }));
@@ -68,6 +69,7 @@ export function prepareReportData({
             return {
                 index: issueIndex + 1,
                 wcag: getWcagReference(tags),
+                tags,
                 id,
                 impact: impact || 'n/a',
                 description,

diff --git a/src/util/template/pageTemplate.html b/src/util/template/pageTemplate.html
@@ -92,8 +92,9 @@ <h3>
                     <a href="{{url}}" target="_blank" class="card-link">{{url}}</a>
                     <br />
                 </div>
-                {{/url}}
-                {{#customSummary}}<div class="summary">{{{customSummary}}}</div>{{/customSummary}}
+                {{/url}} {{#customSummary}}
+                <div class="summary">{{{customSummary}}}</div>
+                {{/customSummary}}
             </div>
             <h5>{{{violationsSummary}}}</h5>
             {{#violationDetails.length}}
@@ -103,8 +104,8 @@ <h5>{{{violationsSummary}}}</h5>
                         <th style="width: 5%">#</th>
                         <th style="width: 45%">Description</th>
                         <th style="width: 15%">Axe rule ID</th>
-                        <th style="width: 15%">WCAG</th>
-                        <th style="width: 15%">Impact</th>
+                        <th style="width: 23%">WCAG</th>
+                        <th style="width: 7%">Impact</th>
                         <th style="width: 5%">Count</th>
                     </tr>
                 </thead>
@@ -150,6 +151,13 @@ <h6 class="card-subtitle mb-2 text-muted violationCardTitleItem">
                             {{impact}}
                         </h6>
                     </div>
+                    <div class="violationCardLine">
+                        <h6 class="card-subtitle mb-2 text-muted violationCardTitleItem">
+                            Issue Tags: {{#tags}}
+                            <span class="badge bg-light text-dark"> {{.}} </span>
+                            {{/tags}}
+                        </h6>
+                    </div>
                     <div class="violationNode">
                         <table class="table table-sm table-bordered">
                             <thead>
@@ -224,9 +232,9 @@ <h5 class="mb-0">
                                 <thead>
                                     <tr>
                                         <th style="width: 5%">#</th>
-                                        <th style="width: 50%">Description</th>
+                                        <th style="width: 40%">Description</th>
                                         <th style="width: 5%">Axe rule ID</th>
-                                        <th style="width: 5%">WCAG</th>
+                                        <th style="width: 15%">WCAG</th>
                                         <th style="width: 5%">Nodes passed check</th>
                                     </tr>
                                 </thead>
-Original file line number
+Diff line change
@@ Expand Up / @@ -86,7 +86,6 @@ <h3> @@
                     AXE Accessibility Results
                 </h3>
                 <div class="summarySection">
                 </div>
                 <h5>axe-core found <span class="badge badge-success">0</span> violations</h5>
                     <tbody>
@@ Expand Down @@