core(a11y): add back html/tags/impact #5439
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -33,6 +33,8 @@ class AxeAudit extends Audit { | |
|
|
||
| const violations = artifacts.Accessibility.violations || []; | ||
| const rule = violations.find(result => result.id === this.meta.name); | ||
| const impact = rule && rule.impact; | ||
| const tags = rule && rule.tags; | ||
|
|
||
| /** @type {Array<{node: LH.Audit.DetailsRendererNodeDetailsJSON}>}>} */ | ||
| let items = []; | ||
|
|
@@ -42,7 +44,8 @@ class AxeAudit extends Audit { | |
| type: 'node', | ||
| selector: Array.isArray(node.target) ? node.target.join(' ') : '', | ||
| path: node.path, | ||
| snippet: node.html || node.snippet, | ||
| axeFailureSummary: node.failureSummary, | ||
| }), | ||
| })); | ||
| } | ||
|
|
@@ -56,7 +59,7 @@ class AxeAudit extends Audit { | |
| extendedInfo: { | ||
| value: rule, | ||
| }, | ||
| details: {...Audit.makeTableDetails(headings, items), impact, tags}, | ||
|
There was a problem hiding this comment. should There was a problem hiding this comment. FWIW, I like it where it is. If it were nested, I can't think of what it would be called. On Deque's site "impact" and "tags" meta is extrapolated to create the "Compliance Data & User Impact" column. "complianceUserImpact:" seems a little long anyway ;-) |
||
| }; | ||
| } | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -1224,17 +1224,25 @@ | |
| "type": "node", | ||
| "selector": "div > h2", | ||
| "path": "3,HTML,1,BODY,0,DIV,0,H2", | ||
| "snippet": "<h2>Do better web tester page</h2>", | ||
| "axeFailureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.32 (foreground color: #ffc0cb, background color: #eeeeee, font size: 18.0pt, font weight: bold). Expected contrast ratio of 3:1" | ||
| } | ||
| }, | ||
| { | ||
| "node": { | ||
| "type": "node", | ||
| "selector": "div > span", | ||
| "path": "3,HTML,1,BODY,0,DIV,1,SPAN", | ||
| "snippet": "<span>Hi there!</span>", | ||
| "axeFailureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.32 (foreground color: #ffc0cb, background color: #eeeeee, font size: 12.0pt, font weight: normal). Expected contrast ratio of 4.5:1" | ||
| } | ||
| } | ||
| ], | ||
| "impact": "serious", | ||
| "tags": [ | ||
| "cat.color", | ||
| "wcag2aa", | ||
| "wcag143" | ||
| ] | ||
| } | ||
| }, | ||
|
|
@@ -1310,9 +1318,16 @@ | |
| "type": "node", | ||
| "selector": "html", | ||
| "path": "3,HTML", | ||
| "snippet": "<html manifest=\"clock.appcache\">", | ||
| "axeFailureSummary": "Fix any of the following:\n The <html> element does not have a lang attribute" | ||
| } | ||
| } | ||
| ], | ||
| "impact": "serious", | ||
| "tags": [ | ||
| "cat.language", | ||
| "wcag2a", | ||
| "wcag311" | ||
| ] | ||
| } | ||
| }, | ||
|
|
@@ -1346,25 +1361,36 @@ | |
| "type": "node", | ||
| "selector": "body > img[src$=\"lighthouse-480x318.jpg\"]:nth-child(5)", | ||
| "path": "3,HTML,1,BODY,5,IMG", | ||
| "snippet": "<img src=\"lighthouse-480x318.jpg\" width=\"480\" height=\"57\">", | ||
| "axeFailureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Element has no title attribute or the title attribute is empty\n Element's default semantics were not overridden with role=\"presentation\"\n Element's default semantics were not overridden with role=\"none\"" | ||
| } | ||
| }, | ||
| { | ||
| "node": { | ||
| "type": "node", | ||
| "selector": "body > img[src$=\"lighthouse-480x318.jpg\"]:nth-child(6)", | ||
| "path": "3,HTML,1,BODY,7,IMG", | ||
| "snippet": "<img src=\"lighthouse-480x318.jpg\" width=\"480\" height=\"318\">", | ||
| "axeFailureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Element has no title attribute or the title attribute is empty\n Element's default semantics were not overridden with role=\"presentation\"\n Element's default semantics were not overridden with role=\"none\"" | ||
| } | ||
| }, | ||
| { | ||
| "node": { | ||
| "type": "node", | ||
| "selector": "body > img:nth-child(20)", | ||
| "path": "3,HTML,1,BODY,36,IMG", | ||
| "snippet": "<img src=\"blob:http://localhost:10200/ae0eac03-ab9b-4a6a-b299-f5212153e277\">", | ||
| "axeFailureSummary": "Fix any of the following:\n Element does not have an alt attribute\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Element has no title attribute or the title attribute is empty\n Element's default semantics were not overridden with role=\"presentation\"\n Element's default semantics were not overridden with role=\"none\"" | ||
| } | ||
| } | ||
| ], | ||
| "impact": "critical", | ||
| "tags": [ | ||
| "cat.text-alternatives", | ||
| "wcag2a", | ||
| "wcag111", | ||
| "section508", | ||
| "section508.22.a" | ||
| ] | ||
| } | ||
| }, | ||
|
|
@@ -1398,25 +1424,37 @@ | |
| "type": "node", | ||
| "selector": "body > input[type=\"password\"]:nth-child(17)", | ||
| "path": "3,HTML,1,BODY,31,INPUT", | ||
| "snippet": "<input type=\"password\" onpaste=\"event.preventDefault();\">", | ||
| "axeFailureSummary": "Fix any of the following:\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Form element does not have an implicit (wrapped) <label>\n Form element does not have an explicit <label>\n Element has no title attribute or the title attribute is empty" | ||
| } | ||
| }, | ||
| { | ||
| "node": { | ||
| "type": "node", | ||
| "selector": "body > input[type=\"password\"]:nth-child(18)", | ||
| "path": "3,HTML,1,BODY,33,INPUT", | ||
| "snippet": "<input type=\"password\">", | ||
| "axeFailureSummary": "Fix any of the following:\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Form element does not have an implicit (wrapped) <label>\n Form element does not have an explicit <label>\n Element has no title attribute or the title attribute is empty" | ||
| } | ||
| }, | ||
| { | ||
| "node": { | ||
| "type": "node", | ||
| "selector": "body > input[type=\"password\"]:nth-child(19)", | ||
| "path": "3,HTML,1,BODY,35,INPUT", | ||
| "snippet": "<input type=\"password\" onpaste=\"return false;\">", | ||
| "axeFailureSummary": "Fix any of the following:\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Form element does not have an implicit (wrapped) <label>\n Form element does not have an explicit <label>\n Element has no title attribute or the title attribute is empty" | ||
| } | ||
| } | ||
| ], | ||
| "impact": "critical", | ||
| "tags": [ | ||
| "cat.forms", | ||
| "wcag2a", | ||
| "wcag332", | ||
| "wcag131", | ||
| "section508", | ||
| "section508.22.n" | ||
| ] | ||
| } | ||
| }, | ||
|
|
@@ -1450,17 +1488,29 @@ | |
| "type": "node", | ||
| "selector": "body > a:nth-child(15)", | ||
| "path": "3,HTML,1,BODY,27,A", | ||
| "snippet": "<a href=\"javascript:void(0)\" target=\"_blank\"></a>", | ||
| "axeFailureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Element's default semantics were not overridden with role=\"presentation\"\n Element's default semantics were not overridden with role=\"none\"" | ||
| } | ||
| }, | ||
| { | ||
| "node": { | ||
| "type": "node", | ||
| "selector": "body > a[href$=\"mailto:[email protected]\"]", | ||
| "path": "3,HTML,1,BODY,29,A", | ||
| "snippet": "<a href=\"mailto:[email protected]\" target=\"_blank\"></a>", | ||
| "axeFailureSummary": "Fix all of the following:\n Element is in tab order and does not have accessible text\n\nFix any of the following:\n Element does not have text that is visible to screen readers\n aria-label attribute does not exist or is empty\n aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty or not visible\n Element's default semantics were not overridden with role=\"presentation\"\n Element's default semantics were not overridden with role=\"none\"" | ||
|
There was a problem hiding this comment. @joelhsmith it seems like in several cases these can be static Do you have a sense of which cases they're needed per-node? Is it just color-contrast? There was a problem hiding this comment. Looking through axe-core, I found these: aria-allowed-attr I would not be surprised in the future if even more of them became contextual in the future. Plus people can write their own checks which also might be contextual. |
||
| } | ||
| } | ||
| ], | ||
| "impact": "serious", | ||
| "tags": [ | ||
| "cat.name-role-value", | ||
| "wcag2a", | ||
| "wcag111", | ||
| "wcag412", | ||
| "wcag244", | ||
| "section508", | ||
| "section508.22.a" | ||
| ] | ||
| } | ||
| }, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
how about just
summaryThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
discussed in person, landed on
explanationto match with our audit-level naming 👍