@@ -1863,15 +1930,16 @@ Fix any of the following:
- - 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
@@ -1879,26 +1947,35 @@ Fix any of the following:
- - CSS selector(s) : html
- - HTML Tag Hierarchy : html-has-lang--html
-- (2) HTML element :
- - 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 element does not have a lang attribute
+ (2) - HTML element :
+ - CSS selector(s) : html
+ - HTML Tag Hierarchy :
+ - More Info: To solve the problem, you need to fix at least (1) of the following:
+ • The 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 :
- - CSS selector(s) : a
- - HTML Tag Hierarchy : link-name--a
+ (1) - HTML element :
+ - 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
element",
"description": "Documents must have element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.9/document-title",
"html": "
@@ -244,6 +247,7 @@ Object {
",
"id": "document-title",
"key": "document-title--html",
+ "none": "",
"selectors": "html",
"summary": "Fix any of the following:
Document does not have a non-empty
element",
@@ -302,6 +306,9 @@ Object {
},
},
Object {
+ "all": "",
+ "ancestry": "",
+ "any": " • The element does not have a lang attribute",
"description": " element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang",
"html": "
@@ -314,6 +321,7 @@ Object {
",
"id": "html-has-lang",
"key": "html-has-lang--html",
+ "none": "",
"selectors": "html",
"summary": "Fix any of the following:
The 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": "
",
"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 element does not have a lang attribute",
"description": " element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang",
"html": "",
"id": "html-has-lang",
"key": "html-has-lang--html",
+ "none": "",
"selectors": "html",
"summary": "Fix any of the following:
The 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
element",
"description": "Documents must have element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.9/document-title",
"html": "
@@ -794,6 +816,7 @@ Fix any of the following:
",
"id": "document-title",
"key": "document-title--html",
+ "none": "",
"selectors": "html",
"summary": "Fix any of the following:
Document does not have a non-empty
element",
@@ -852,6 +875,9 @@ Fix any of the following:
},
},
Object {
+ "all": "",
+ "ancestry": "",
+ "any": " • The element does not have a lang attribute",
"description": " element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang",
"html": "
@@ -864,6 +890,7 @@ Fix any of the following:
",
"id": "html-has-lang",
"key": "html-has-lang--html",
+ "none": "",
"selectors": "html",
"summary": "Fix any of the following:
The 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": "
",
"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 element does not have a lang attribute",
"description": " element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang",
"html": "",
"id": "html-has-lang",
"key": "html-has-lang--html",
+ "none": "",
"selectors": "html",
"summary": "Fix any of the following:
The 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
element",
"description": "Documents must have element to aid in navigation",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.9/document-title",
"html": "
@@ -1344,6 +1385,7 @@ Fix any of the following:
",
"id": "document-title",
"key": "document-title--html",
+ "none": "",
"selectors": "html",
"summary": "Fix any of the following:
Document does not have a non-empty
element",
@@ -1402,6 +1444,9 @@ Fix any of the following:
},
},
Object {
+ "all": "",
+ "ancestry": "",
+ "any": " • The element does not have a lang attribute",
"description": " element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang",
"html": "
@@ -1414,6 +1459,7 @@ Fix any of the following:
",
"id": "html-has-lang",
"key": "html-has-lang--html",
+ "none": "",
"selectors": "html",
"summary": "Fix any of the following:
The 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": "
",
"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 element does not have a lang attribute",
"description": " element must have a lang attribute",
"helpUrl": "https://dequeuniversity.com/rules/axe/4.9/html-has-lang",
"html": "",
"id": "html-has-lang",
"key": "html-has-lang--html",
+ "none": "",
"selectors": "html",
"summary": "Fix any of the following:
The 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