From 51eb9c721ab10fde5dce7cb1ef1556be47541899 Mon Sep 17 00:00:00 2001 From: jaig-0911 <63843872+jaig-0911@users.noreply.github.com> Date: Tue, 7 May 2024 17:41:42 +0530 Subject: [PATCH] feat: added message logs from axe-core violation (#676) * feat: added message logs from axe-core violation * feat: improved formatSpacing --- packages/format/src/result.ts | 9 + ...roupViolationResultsProcessor.test.ts.snap | 273 +++++++++++------- .../resultsProcessor.test.ts.snap | 57 ++++ .../src/groupViolationResultsProcessor.ts | 57 +++- 4 files changed, 287 insertions(+), 109 deletions(-) diff --git a/packages/format/src/result.ts b/packages/format/src/result.ts index 60dde255..727ccb7f 100644 --- a/packages/format/src/result.ts +++ b/packages/format/src/result.ts @@ -9,6 +9,7 @@ import { NodeResult, Result } from 'axe-core'; import { priorities, wcagLevels, WcagMetadata } from '@sa11y/preset-rules'; const defaultImpact = 'minor'; // if impact is undefined +const formatSpacing = '\t'.repeat(12); // Helper object to sort violations by impact order const impactOrder = { critical: 1, @@ -83,6 +84,10 @@ export class A11yResult { public readonly wcag: string; public readonly summary: string; public readonly key: string; // Represent a key with uniquely identifiable info + public readonly ancestry: string; + public readonly any: string; + public readonly all: string; + public readonly none: string; private readonly wcagData: WcagMetadata; // Used to sort results constructor(violation: Result, node: NodeResult) { @@ -97,6 +102,10 @@ export class A11yResult { /* istanbul ignore next */ this.summary = node.failureSummary || ''; this.key = `${this.id}--${this.selectors}`; + this.ancestry = (node.ancestry?.flat(Infinity) ?? []).join('\n'); + this.any = node.any?.map((item) => `${formatSpacing}• ${item.message}`).join('\n'); + this.all = node.all?.map((item) => `${formatSpacing}• ${item.message}`).join('\n'); + this.none = node.none?.map((item) => `${formatSpacing}• ${item.message}`).join('\n'); } /** diff --git a/packages/jest/__tests__/__snapshots__/groupViolationResultsProcessor.test.ts.snap b/packages/jest/__tests__/__snapshots__/groupViolationResultsProcessor.test.ts.snap index 03d113d7..18ffb22c 100644 --- a/packages/jest/__tests__/__snapshots__/groupViolationResultsProcessor.test.ts.snap +++ b/packages/jest/__tests__/__snapshots__/groupViolationResultsProcessor.test.ts.snap @@ -65,6 +65,9 @@ Object { Object { "a11yResults": Array [ Object { + "all": "", + "ancestry": "", + "any": " • Document does not have a non-empty element", "description": "Documents must have <title> element to aid in navigation", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/document-title", "html": "<html><head></head><body> @@ -77,6 +80,7 @@ Object { </body></html>", "id": "document-title", "key": "document-title--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: Document does not have a non-empty <title> element", @@ -135,6 +139,9 @@ Object { }, }, Object { + "all": "", + "ancestry": "", + "any": " • The <html> element does not have a lang attribute", "description": "<html> element must have a lang attribute", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang", "html": "<html><head></head><body> @@ -147,6 +154,7 @@ Object { </body></html>", "id": "html-has-lang", "key": "html-has-lang--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: The <html> element does not have a lang attribute", @@ -207,11 +215,18 @@ Object { }, }, Object { + "all": "", + "ancestry": "", + "any": " • Element does not have text that is visible to screen readers + • aria-label attribute does not exist or is empty + • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty + • Element has no title attribute", "description": "Links must have discernible text", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/link-name", "html": "<a href=\\"#\\"></a>", "id": "link-name", "key": "link-name--a", + "none": " • Element is in tab order and does not have accessible text", "selectors": "a", "summary": "Fix all of the following: Element is in tab order and does not have accessible text @@ -495,12 +510,8 @@ Fix any of the following: 3 HTML elements have accessibility issue(s). 3 rules failed. (1) [document-title] Documents must have <title> element to aid in navigation - * Help URL: https://dequeuniversity.com/rules/axe/4.9/document-title - * WCAG Criteria: SA11Y-WCAG-SC2.4.2-P2 - * More info: Fix any of the following: - Document does not have a non-empty <title> element * Error element(s) : 1 - - (1) HTML element : <html><head></head><body> + (1) - HTML element : <html><head></head><body> <div id=\\"dom-with-issues\\"> <a href=\\"#\\"></a> @@ -508,15 +519,16 @@ Fix any of the following: </body></html> - - CSS selector(s) : html - - HTML Tag Hierarchy : document-title--html + - CSS selector(s) : html + - HTML Tag Hierarchy : + - More Info: To solve the problem, you need to fix at least (1) of the following: + • Document does not have a non-empty <title> element + * Help: + • Help URL: https://dequeuniversity.com/rules/axe/4.9/document-title + • WCAG Criteria: SA11Y-WCAG-SC2.4.2-P2 (2) [html-has-lang] <html> element must have a lang attribute - * Help URL: https://dequeuniversity.com/rules/axe/4.9/html-has-lang - * WCAG Criteria: SA11Y-WCAG-SC3.1.1-P2 - * More info: Fix any of the following: - The <html> element does not have a lang attribute * Error element(s) : 1 - - (1) HTML element : <html><head></head><body> + (1) - HTML element : <html><head></head><body> <div id=\\"dom-with-issues\\"> <a href=\\"#\\"></a> @@ -524,23 +536,30 @@ Fix any of the following: </body></html> - - CSS selector(s) : html - - HTML Tag Hierarchy : html-has-lang--html + - CSS selector(s) : html + - HTML Tag Hierarchy : + - More Info: To solve the problem, you need to fix at least (1) of the following: + • The <html> element does not have a lang attribute + * Help: + • Help URL: https://dequeuniversity.com/rules/axe/4.9/html-has-lang + • WCAG Criteria: SA11Y-WCAG-SC3.1.1-P2 (3) [link-name] Links must have discernible text - * Help URL: https://dequeuniversity.com/rules/axe/4.9/link-name - * WCAG Criteria: SA11Y-WCAG-SC4.1.2-P1 - * More info: Fix all of the following: - Element is in tab order and does not have accessible text - -Fix any of the following: - Element does not have text that is visible to screen readers - aria-label attribute does not exist or is empty - aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty - Element has no title attribute * Error element(s) : 1 - - (1) HTML element : <a href=\\"#\\"></a> - - CSS selector(s) : a - - HTML Tag Hierarchy : link-name--a + (1) - HTML element : <a href=\\"#\\"></a> + - CSS selector(s) : a + - HTML Tag Hierarchy : + - More Info: To solve the problem, you need to fix at least (1) of the following: + • Element does not have text that is visible to screen readers + • aria-label attribute does not exist or is empty + • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty + • Element has no title attribute + - And fix the following: + • Element is in tab order and does not have accessible text + * Help: + • Help URL: https://dequeuniversity.com/rules/axe/4.9/link-name + • WCAG Criteria: SA11Y-WCAG-SC4.1.2-P1 + + For more info about automated accessibility testing: https://sfdc.co/a11y-test For tips on fixing accessibility bugs: https://sfdc.co/a11y For technical questions regarding Salesforce accessibility tools, contact our Sa11y team: http://sfdc.co/sa11y-users @@ -558,11 +577,15 @@ Fix any of the following: Object { "a11yResults": Array [ Object { + "all": "", + "ancestry": "", + "any": " • The <html> element does not have a lang attribute", "description": "<html> element must have a lang attribute", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang", "html": "<html>", "id": "html-has-lang", "key": "html-has-lang--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: The <html> element does not have a lang attribute", @@ -668,14 +691,17 @@ Fix any of the following: 1 HTML elements have accessibility issue(s). 1 rules failed. (1) [html-has-lang] <html> element must have a lang attribute - * Help URL: https://dequeuniversity.com/rules/axe/4.9/html-has-lang - * WCAG Criteria: SA11Y-WCAG-SC3.1.1-P2 - * More info: Fix any of the following: - The <html> element does not have a lang attribute * Error element(s) : 1 - - (1) HTML element : <html> - - CSS selector(s) : html - - HTML Tag Hierarchy : html-has-lang--html + (1) - HTML element : <html> + - CSS selector(s) : html + - HTML Tag Hierarchy : + - More Info: To solve the problem, you need to fix at least (1) of the following: + • The <html> element does not have a lang attribute + * Help: + • Help URL: https://dequeuniversity.com/rules/axe/4.9/html-has-lang + • WCAG Criteria: SA11Y-WCAG-SC3.1.1-P2 + + For more info about automated accessibility testing: https://sfdc.co/a11y-test For tips on fixing accessibility bugs: https://sfdc.co/a11y For technical questions regarding Salesforce accessibility tools, contact our Sa11y team: http://sfdc.co/sa11y-users @@ -693,6 +719,9 @@ Fix any of the following: Object { "a11yResults": Array [ Object { + "all": "", + "ancestry": "", + "any": " • Document does not have a non-empty <title> element", "description": "Documents must have <title> element to aid in navigation", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/document-title", "html": "<html><head></head><body> @@ -705,6 +734,7 @@ Fix any of the following: </body></html>", "id": "document-title", "key": "document-title--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: Document does not have a non-empty <title> element", @@ -763,6 +793,9 @@ Fix any of the following: }, }, Object { + "all": "", + "ancestry": "", + "any": " • The <html> element does not have a lang attribute", "description": "<html> element must have a lang attribute", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang", "html": "<html><head></head><body> @@ -775,6 +808,7 @@ Fix any of the following: </body></html>", "id": "html-has-lang", "key": "html-has-lang--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: The <html> element does not have a lang attribute", @@ -835,11 +869,18 @@ Fix any of the following: }, }, Object { + "all": "", + "ancestry": "", + "any": " • Element does not have text that is visible to screen readers + • aria-label attribute does not exist or is empty + • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty + • Element has no title attribute", "description": "Links must have discernible text", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/link-name", "html": "<a href=\\"#\\"></a>", "id": "link-name", "key": "link-name--a", + "none": " • Element is in tab order and does not have accessible text", "selectors": "a", "summary": "Fix all of the following: Element is in tab order and does not have accessible text @@ -1123,12 +1164,8 @@ Fix any of the following: 3 HTML elements have accessibility issue(s). 3 rules failed. (1) [document-title] Documents must have <title> element to aid in navigation - * Help URL: https://dequeuniversity.com/rules/axe/4.9/document-title - * WCAG Criteria: SA11Y-WCAG-SC2.4.2-P2 - * More info: Fix any of the following: - Document does not have a non-empty <title> element * Error element(s) : 1 - - (1) HTML element : <html><head></head><body> + (1) - HTML element : <html><head></head><body> <div id=\\"dom-with-issues\\"> <a href=\\"#\\"></a> @@ -1136,15 +1173,16 @@ Fix any of the following: </body></html> - - CSS selector(s) : html - - HTML Tag Hierarchy : document-title--html + - CSS selector(s) : html + - HTML Tag Hierarchy : + - More Info: To solve the problem, you need to fix at least (1) of the following: + • Document does not have a non-empty <title> element + * Help: + • Help URL: https://dequeuniversity.com/rules/axe/4.9/document-title + • WCAG Criteria: SA11Y-WCAG-SC2.4.2-P2 (2) [html-has-lang] <html> element must have a lang attribute - * Help URL: https://dequeuniversity.com/rules/axe/4.9/html-has-lang - * WCAG Criteria: SA11Y-WCAG-SC3.1.1-P2 - * More info: Fix any of the following: - The <html> element does not have a lang attribute * Error element(s) : 1 - - (1) HTML element : <html><head></head><body> + (1) - HTML element : <html><head></head><body> <div id=\\"dom-with-issues\\"> <a href=\\"#\\"></a> @@ -1152,23 +1190,30 @@ Fix any of the following: </body></html> - - CSS selector(s) : html - - HTML Tag Hierarchy : html-has-lang--html + - CSS selector(s) : html + - HTML Tag Hierarchy : + - More Info: To solve the problem, you need to fix at least (1) of the following: + • The <html> element does not have a lang attribute + * Help: + • Help URL: https://dequeuniversity.com/rules/axe/4.9/html-has-lang + • WCAG Criteria: SA11Y-WCAG-SC3.1.1-P2 (3) [link-name] Links must have discernible text - * Help URL: https://dequeuniversity.com/rules/axe/4.9/link-name - * WCAG Criteria: SA11Y-WCAG-SC4.1.2-P1 - * More info: Fix all of the following: - Element is in tab order and does not have accessible text - -Fix any of the following: - Element does not have text that is visible to screen readers - aria-label attribute does not exist or is empty - aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty - Element has no title attribute * Error element(s) : 1 - - (1) HTML element : <a href=\\"#\\"></a> - - CSS selector(s) : a - - HTML Tag Hierarchy : link-name--a + (1) - HTML element : <a href=\\"#\\"></a> + - CSS selector(s) : a + - HTML Tag Hierarchy : + - More Info: To solve the problem, you need to fix at least (1) of the following: + • Element does not have text that is visible to screen readers + • aria-label attribute does not exist or is empty + • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty + • Element has no title attribute + - And fix the following: + • Element is in tab order and does not have accessible text + * Help: + • Help URL: https://dequeuniversity.com/rules/axe/4.9/link-name + • WCAG Criteria: SA11Y-WCAG-SC4.1.2-P1 + + For more info about automated accessibility testing: https://sfdc.co/a11y-test For tips on fixing accessibility bugs: https://sfdc.co/a11y For technical questions regarding Salesforce accessibility tools, contact our Sa11y team: http://sfdc.co/sa11y-users @@ -1186,11 +1231,15 @@ Fix any of the following: Object { "a11yResults": Array [ Object { + "all": "", + "ancestry": "", + "any": " • The <html> element does not have a lang attribute", "description": "<html> element must have a lang attribute", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang", "html": "<html>", "id": "html-has-lang", "key": "html-has-lang--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: The <html> element does not have a lang attribute", @@ -1296,14 +1345,17 @@ Fix any of the following: 1 HTML elements have accessibility issue(s). 1 rules failed. (1) [html-has-lang] <html> element must have a lang attribute - * Help URL: https://dequeuniversity.com/rules/axe/4.9/html-has-lang - * WCAG Criteria: SA11Y-WCAG-SC3.1.1-P2 - * More info: Fix any of the following: - The <html> element does not have a lang attribute * Error element(s) : 1 - - (1) HTML element : <html> - - CSS selector(s) : html - - HTML Tag Hierarchy : html-has-lang--html + (1) - HTML element : <html> + - CSS selector(s) : html + - HTML Tag Hierarchy : + - More Info: To solve the problem, you need to fix at least (1) of the following: + • The <html> element does not have a lang attribute + * Help: + • Help URL: https://dequeuniversity.com/rules/axe/4.9/html-has-lang + • WCAG Criteria: SA11Y-WCAG-SC3.1.1-P2 + + For more info about automated accessibility testing: https://sfdc.co/a11y-test For tips on fixing accessibility bugs: https://sfdc.co/a11y For technical questions regarding Salesforce accessibility tools, contact our Sa11y team: http://sfdc.co/sa11y-users @@ -1321,6 +1373,9 @@ Fix any of the following: Object { "a11yResults": Array [ Object { + "all": "", + "ancestry": "", + "any": " • Document does not have a non-empty <title> element", "description": "Documents must have <title> element to aid in navigation", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/document-title", "html": "<html><head></head><body> @@ -1333,6 +1388,7 @@ Fix any of the following: </body></html>", "id": "document-title", "key": "document-title--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: Document does not have a non-empty <title> element", @@ -1391,6 +1447,9 @@ Fix any of the following: }, }, Object { + "all": "", + "ancestry": "", + "any": " • The <html> element does not have a lang attribute", "description": "<html> element must have a lang attribute", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang", "html": "<html><head></head><body> @@ -1403,6 +1462,7 @@ Fix any of the following: </body></html>", "id": "html-has-lang", "key": "html-has-lang--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: The <html> element does not have a lang attribute", @@ -1463,11 +1523,18 @@ Fix any of the following: }, }, Object { + "all": "", + "ancestry": "", + "any": " • Element does not have text that is visible to screen readers + • aria-label attribute does not exist or is empty + • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty + • Element has no title attribute", "description": "Links must have discernible text", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/link-name", "html": "<a href=\\"#\\"></a>", "id": "link-name", "key": "link-name--a", + "none": " • Element is in tab order and does not have accessible text", "selectors": "a", "summary": "Fix all of the following: Element is in tab order and does not have accessible text @@ -1566,11 +1633,15 @@ Fix any of the following: }, }, Object { + "all": "", + "ancestry": "", + "any": " • The <html> element does not have a lang attribute", "description": "<html> element must have a lang attribute", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang", "html": "<html>", "id": "html-has-lang", "key": "html-has-lang--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: The <html> element does not have a lang attribute", @@ -1850,12 +1921,8 @@ Fix any of the following: 4 HTML elements have accessibility issue(s). 3 rules failed. (1) [document-title] Documents must have <title> element to aid in navigation - * Help URL: https://dequeuniversity.com/rules/axe/4.9/document-title - * WCAG Criteria: SA11Y-WCAG-SC2.4.2-P2 - * More info: Fix any of the following: - Document does not have a non-empty <title> element * Error element(s) : 1 - - (1) HTML element : <html><head></head><body> + (1) - HTML element : <html><head></head><body> <div id=\\"dom-with-issues\\"> <a href=\\"#\\"></a> @@ -1863,15 +1930,16 @@ Fix any of the following: </body></html> - - CSS selector(s) : html - - HTML Tag Hierarchy : document-title--html + - CSS selector(s) : html + - HTML Tag Hierarchy : + - More Info: To solve the problem, you need to fix at least (1) of the following: + • Document does not have a non-empty <title> element + * Help: + • Help URL: https://dequeuniversity.com/rules/axe/4.9/document-title + • WCAG Criteria: SA11Y-WCAG-SC2.4.2-P2 (2) [html-has-lang] <html> element must have a lang attribute - * Help URL: https://dequeuniversity.com/rules/axe/4.9/html-has-lang - * WCAG Criteria: SA11Y-WCAG-SC3.1.1-P2 - * More info: Fix any of the following: - The <html> element does not have a lang attribute * Error element(s) : 2 - - (1) HTML element : <html><head></head><body> + (1) - HTML element : <html><head></head><body> <div id=\\"dom-with-issues\\"> <a href=\\"#\\"></a> @@ -1879,26 +1947,35 @@ Fix any of the following: </body></html> - - CSS selector(s) : html - - HTML Tag Hierarchy : html-has-lang--html -- (2) HTML element : <html> - - CSS selector(s) : html - - HTML Tag Hierarchy : html-has-lang--html + - CSS selector(s) : html + - HTML Tag Hierarchy : + - More Info: To solve the problem, you need to fix at least (1) of the following: + • The <html> element does not have a lang attribute + (2) - HTML element : <html> + - CSS selector(s) : html + - HTML Tag Hierarchy : + - More Info: To solve the problem, you need to fix at least (1) of the following: + • The <html> element does not have a lang attribute + * Help: + • Help URL: https://dequeuniversity.com/rules/axe/4.9/html-has-lang + • WCAG Criteria: SA11Y-WCAG-SC3.1.1-P2 (3) [link-name] Links must have discernible text - * Help URL: https://dequeuniversity.com/rules/axe/4.9/link-name - * WCAG Criteria: SA11Y-WCAG-SC4.1.2-P1 - * More info: Fix all of the following: - Element is in tab order and does not have accessible text - -Fix any of the following: - Element does not have text that is visible to screen readers - aria-label attribute does not exist or is empty - aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty - Element has no title attribute * Error element(s) : 1 - - (1) HTML element : <a href=\\"#\\"></a> - - CSS selector(s) : a - - HTML Tag Hierarchy : link-name--a + (1) - HTML element : <a href=\\"#\\"></a> + - CSS selector(s) : a + - HTML Tag Hierarchy : + - More Info: To solve the problem, you need to fix at least (1) of the following: + • Element does not have text that is visible to screen readers + • aria-label attribute does not exist or is empty + • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty + • Element has no title attribute + - And fix the following: + • Element is in tab order and does not have accessible text + * Help: + • Help URL: https://dequeuniversity.com/rules/axe/4.9/link-name + • WCAG Criteria: SA11Y-WCAG-SC4.1.2-P1 + + For more info about automated accessibility testing: https://sfdc.co/a11y-test For tips on fixing accessibility bugs: https://sfdc.co/a11y For technical questions regarding Salesforce accessibility tools, contact our Sa11y team: http://sfdc.co/sa11y-users diff --git a/packages/jest/__tests__/__snapshots__/resultsProcessor.test.ts.snap b/packages/jest/__tests__/__snapshots__/resultsProcessor.test.ts.snap index d70d6737..dcc25bb0 100644 --- a/packages/jest/__tests__/__snapshots__/resultsProcessor.test.ts.snap +++ b/packages/jest/__tests__/__snapshots__/resultsProcessor.test.ts.snap @@ -232,6 +232,9 @@ Object { Object { "a11yResults": Array [ Object { + "all": "", + "ancestry": "", + "any": " • Document does not have a non-empty <title> element", "description": "Documents must have <title> element to aid in navigation", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/document-title", "html": "<html><head></head><body> @@ -244,6 +247,7 @@ Object { </body></html>", "id": "document-title", "key": "document-title--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: Document does not have a non-empty <title> element", @@ -302,6 +306,9 @@ Object { }, }, Object { + "all": "", + "ancestry": "", + "any": " • The <html> element does not have a lang attribute", "description": "<html> element must have a lang attribute", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang", "html": "<html><head></head><body> @@ -314,6 +321,7 @@ Object { </body></html>", "id": "html-has-lang", "key": "html-has-lang--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: The <html> element does not have a lang attribute", @@ -374,11 +382,18 @@ Object { }, }, Object { + "all": "", + "ancestry": "", + "any": " • Element does not have text that is visible to screen readers + • aria-label attribute does not exist or is empty + • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty + • Element has no title attribute", "description": "Links must have discernible text", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/link-name", "html": "<a href=\\"#\\"></a>", "id": "link-name", "key": "link-name--a", + "none": " • Element is in tab order and does not have accessible text", "selectors": "a", "summary": "Fix all of the following: Element is in tab order and does not have accessible text @@ -667,11 +682,15 @@ Fix any of the following: Object { "a11yResults": Array [ Object { + "all": "", + "ancestry": "", + "any": " • The <html> element does not have a lang attribute", "description": "<html> element must have a lang attribute", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang", "html": "<html>", "id": "html-has-lang", "key": "html-has-lang--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: The <html> element does not have a lang attribute", @@ -782,6 +801,9 @@ Fix any of the following: Object { "a11yResults": Array [ Object { + "all": "", + "ancestry": "", + "any": " • Document does not have a non-empty <title> element", "description": "Documents must have <title> element to aid in navigation", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/document-title", "html": "<html><head></head><body> @@ -794,6 +816,7 @@ Fix any of the following: </body></html>", "id": "document-title", "key": "document-title--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: Document does not have a non-empty <title> element", @@ -852,6 +875,9 @@ Fix any of the following: }, }, Object { + "all": "", + "ancestry": "", + "any": " • The <html> element does not have a lang attribute", "description": "<html> element must have a lang attribute", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang", "html": "<html><head></head><body> @@ -864,6 +890,7 @@ Fix any of the following: </body></html>", "id": "html-has-lang", "key": "html-has-lang--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: The <html> element does not have a lang attribute", @@ -924,11 +951,18 @@ Fix any of the following: }, }, Object { + "all": "", + "ancestry": "", + "any": " • Element does not have text that is visible to screen readers + • aria-label attribute does not exist or is empty + • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty + • Element has no title attribute", "description": "Links must have discernible text", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/link-name", "html": "<a href=\\"#\\"></a>", "id": "link-name", "key": "link-name--a", + "none": " • Element is in tab order and does not have accessible text", "selectors": "a", "summary": "Fix all of the following: Element is in tab order and does not have accessible text @@ -1217,11 +1251,15 @@ Fix any of the following: Object { "a11yResults": Array [ Object { + "all": "", + "ancestry": "", + "any": " • The <html> element does not have a lang attribute", "description": "<html> element must have a lang attribute", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang", "html": "<html>", "id": "html-has-lang", "key": "html-has-lang--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: The <html> element does not have a lang attribute", @@ -1332,6 +1370,9 @@ Fix any of the following: Object { "a11yResults": Array [ Object { + "all": "", + "ancestry": "", + "any": " • Document does not have a non-empty <title> element", "description": "Documents must have <title> element to aid in navigation", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/document-title", "html": "<html><head></head><body> @@ -1344,6 +1385,7 @@ Fix any of the following: </body></html>", "id": "document-title", "key": "document-title--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: Document does not have a non-empty <title> element", @@ -1402,6 +1444,9 @@ Fix any of the following: }, }, Object { + "all": "", + "ancestry": "", + "any": " • The <html> element does not have a lang attribute", "description": "<html> element must have a lang attribute", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang", "html": "<html><head></head><body> @@ -1414,6 +1459,7 @@ Fix any of the following: </body></html>", "id": "html-has-lang", "key": "html-has-lang--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: The <html> element does not have a lang attribute", @@ -1474,11 +1520,18 @@ Fix any of the following: }, }, Object { + "all": "", + "ancestry": "", + "any": " • Element does not have text that is visible to screen readers + • aria-label attribute does not exist or is empty + • aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty + • Element has no title attribute", "description": "Links must have discernible text", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/link-name", "html": "<a href=\\"#\\"></a>", "id": "link-name", "key": "link-name--a", + "none": " • Element is in tab order and does not have accessible text", "selectors": "a", "summary": "Fix all of the following: Element is in tab order and does not have accessible text @@ -1577,11 +1630,15 @@ Fix any of the following: }, }, Object { + "all": "", + "ancestry": "", + "any": " • The <html> element does not have a lang attribute", "description": "<html> element must have a lang attribute", "helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang", "html": "<html>", "id": "html-has-lang", "key": "html-has-lang--html", + "none": "", "selectors": "html", "summary": "Fix any of the following: The <html> element does not have a lang attribute", diff --git a/packages/jest/src/groupViolationResultsProcessor.ts b/packages/jest/src/groupViolationResultsProcessor.ts index 0f98bb11..421cc80a 100644 --- a/packages/jest/src/groupViolationResultsProcessor.ts +++ b/packages/jest/src/groupViolationResultsProcessor.ts @@ -16,6 +16,9 @@ type ErrorElement = { html: string; selectors: string; hierarchy: string; + any: string; + all: string; + none: string; }; type A11yViolation = { @@ -27,17 +30,45 @@ type A11yViolation = { errorElements: ErrorElement[]; }; +const formatSpacing = '\t'.repeat(8); +const formatForAxeMessage = `\n${formatSpacing}\t\t`; + +const axeMessages = { + toSolveAny: `${formatForAxeMessage}- More Info: To solve the problem, you need to fix at least (1) of the following:\n`, + toSolveFirst: `${formatForAxeMessage}- More Info: To solve the problem, you need to fix one of the following:\n`, + toSolveSecond: `${formatForAxeMessage}- And fix the following:\n`, +}; /** * Create a test failure html elements array grouped by rule violation */ function createA11yErrorElements(errorElements: ErrorElement[]) { const a11yErrorElements: string[] = []; errorElements.forEach((errorElement, index) => { - a11yErrorElements.push( - `- (${index + 1}) HTML element : ${errorElement.html.replace(/</g, '<').replace(/>/, '>')} - - CSS selector(s) : ${errorElement.selectors.replace(/>/, '>')} - - HTML Tag Hierarchy : ${errorElement.hierarchy}` - ); + let errorMessage = `${formatSpacing}(${index + 1}) - HTML element : ${errorElement.html + .replace(/</g, '<') + .replace(/>/, '>')} + - CSS selector(s) : ${errorElement.selectors.replace(/>/, '>')} + - HTML Tag Hierarchy : ${errorElement.hierarchy}`; + + if (errorElement.any && errorElement.any.length > 0) { + errorMessage += `${axeMessages.toSolveAny}${errorElement.any}`; + if (errorElement.all && errorElement.all.length > 0) { + errorMessage += `${axeMessages.toSolveSecond}${errorElement.all}`; + } + if (errorElement.none && errorElement.none.length > 0) { + errorMessage += `${axeMessages.toSolveSecond}${errorElement.none}`; + } + } else if (errorElement.all && errorElement.all.length > 0) { + errorMessage += `${axeMessages.toSolveFirst}${errorElement.all}`; + if (errorElement.none && errorElement.none.length > 0) { + errorMessage += `${axeMessages.toSolveSecond}${errorElement.none}`; + } + } else { + if (errorElement.none && errorElement.none.length > 0) { + errorMessage += `${axeMessages.toSolveFirst}${errorElement.none}`; + } + } + a11yErrorElements.push(errorMessage); }); return a11yErrorElements.join('\n'); @@ -48,11 +79,10 @@ function createA11yErrorElements(errorElements: ErrorElement[]) { */ function createA11yRuleViolation(a11yRule: A11yViolation, ruleIndex: number) { return `(${ruleIndex}) [${a11yRule.id}] ${a11yRule.description} - * Help URL: ${a11yRule.helpUrl} - * WCAG Criteria: ${a11yRule.wcagCriteria} - * More info: ${a11yRule.summary} - * Error element(s) : ${a11yRule.errorElements.length} - ${createA11yErrorElements(a11yRule.errorElements)}`; + * Error element(s) : ${a11yRule.errorElements.length}\n${createA11yErrorElements(a11yRule.errorElements)} + * Help: + • Help URL: ${a11yRule.helpUrl} + • WCAG Criteria: ${a11yRule.wcagCriteria}`; } /** @@ -92,7 +122,10 @@ function processA11yErrors(results: AggregatedResult, testSuite: TestResult, tes a11yRuleViolations[a11yResult.wcag].errorElements.push({ html: a11yResult.html, selectors: a11yResult.selectors, - hierarchy: a11yResult.key, + hierarchy: a11yResult.ancestry, + any: a11yResult.any, + all: a11yResult.all, + none: a11yResult.none, }); }); @@ -103,6 +136,8 @@ function processA11yErrors(results: AggregatedResult, testSuite: TestResult, tes ${Object.values(a11yRuleViolations) .map((a11yRuleViolation, index) => createA11yRuleViolation(a11yRuleViolation, index + 1)) .join('\n')} + + For more info about automated accessibility testing: https://sfdc.co/a11y-test For tips on fixing accessibility bugs: https://sfdc.co/a11y For technical questions regarding Salesforce accessibility tools, contact our Sa11y team: http://sfdc.co/sa11y-users