Updating result schema to include more specific data #217
Conversation
Co-authored-by: Robert Jackson <me@rwjblue.com>
Co-authored-by: Robert Jackson <me@rwjblue.com>
@scalvert Would you please post a sample result, so we can compare/contrast what will be audited out with this change? |
|
@MelSumner sure thing. I've added a sample output. Additionally, the TypeScript interface effectively gives you a sense of the format of the output. Essentially, we've trimmed out a bunch of extraneous data that would unnecessarily bloat the output without immediate value. Some of the outer information in a single
When running tests on a small sized project, this extra data would likely not be too large. On any reasonably sized project, this data would likely grow quite large. |
|
@rwjblue @MelSumner any more updates/feedback/issues with this PR? I'd like to get it shipped soon so we can target it for a new release. |
The results that are returned from each failed audit are quite large. When considering the size of the payloads passed through the middleware, passing raw
AxeResultsobjects could result in a very large payload. This PR specifically reduces the size of the overall payload that's sent through the middleware, which will also reduce the size written to disc.In addition to this, there's extra data that's useful to gather when assessing audits, such as
The stored result, per test, adheres to this interface:
JSON result example
[ { "moduleName": "setupMiddlewareReporter", "testName": "gathers results from failed a11yAudit calls", "urls": [ "/" ], "routes": [ "violations" ], "helpers": [ "visit" ], "stack": "", "violations": [ { "id": "button-name", "impact": "critical", "tags": [ "cat.name-role-value", "wcag2a", "wcag412", "section508", "section508.22.a" ], "description": "Ensures buttons have discernible text", "help": "Buttons must have discernible text", "helpUrl": "https://dequeuniversity.com/rules/axe/4.0/button-name?application=axeAPI", "nodes": [ { "any": [ { "id": "button-has-visible-text", "data": null, "relatedNodes": [], "impact": "critical", "message": "Element does not have inner text that is visible to screen readers" }, { "id": "aria-label", "data": null, "relatedNodes": [], "impact": "serious", "message": "aria-label attribute does not exist or is empty" }, { "id": "aria-labelledby", "data": null, "relatedNodes": [], "impact": "serious", "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty" }, { "id": "role-presentation", "data": null, "relatedNodes": [], "impact": "minor", "message": "Element's default semantics were not overridden with role=\"presentation\"" }, { "id": "role-none", "data": null, "relatedNodes": [], "impact": "minor", "message": "Element's default semantics were not overridden with role=\"none\"" }, { "id": "non-empty-title", "data": null, "relatedNodes": [], "impact": "serious", "message": "Element has no title attribute or the title attribute is empty" } ], "all": [], "none": [], "impact": "critical", "html": "<button data-test-selector=\"empty-button\" id=\"violations__empty-button\" class=\"c-button ember-view\">\n</button>", "target": [ "#violations__empty-button" ], "failureSummary": "Fix any of the following:\n Element does not have inner 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\n Element's default semantics were not overridden with role=\"presentation\"\n Element's default semantics were not overridden with role=\"none\"\n Element has no title attribute or the title attribute is empty" } ] }, { "id": "image-alt", "impact": "critical", "tags": [ "cat.text-alternatives", "wcag2a", "wcag111", "section508", "section508.22.a" ], "description": "Ensures <img> elements have alternate text or a role of none or presentation", "help": "Images must have alternate text", "helpUrl": "https://dequeuniversity.com/rules/axe/4.0/image-alt?application=axeAPI", "nodes": [ { "any": [ { "id": "has-alt", "data": null, "relatedNodes": [], "impact": "critical", "message": "Element does not have an alt attribute" }, { "id": "aria-label", "data": null, "relatedNodes": [], "impact": "serious", "message": "aria-label attribute does not exist or is empty" }, { "id": "aria-labelledby", "data": null, "relatedNodes": [], "impact": "serious", "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty" }, { "id": "non-empty-title", "data": null, "relatedNodes": [], "impact": "serious", "message": "Element has no title attribute or the title attribute is empty" }, { "id": "role-presentation", "data": null, "relatedNodes": [], "impact": "minor", "message": "Element's default semantics were not overridden with role=\"presentation\"" }, { "id": "role-none", "data": null, "relatedNodes": [], "impact": "minor", "message": "Element's default semantics were not overridden with role=\"none\"" } ], "all": [], "none": [], "impact": "critical", "html": "<img src=\"assets/img/empire-state-building-moonlight.png\" id=\"violations__img-without-alt\" class=\"u-fill c-img ember-view\">", "target": [ "#violations__img-without-alt" ], "failureSummary": "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\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\"" } ] }, { "id": "label", "impact": "critical", "tags": [ "cat.forms", "wcag2a", "wcag412", "wcag131", "section508", "section508.22.n" ], "description": "Ensures every form element has a label", "help": "Form elements must have labels", "helpUrl": "https://dequeuniversity.com/rules/axe/4.0/label?application=axeAPI", "nodes": [ { "any": [ { "id": "aria-label", "data": null, "relatedNodes": [], "impact": "serious", "message": "aria-label attribute does not exist or is empty" }, { "id": "aria-labelledby", "data": null, "relatedNodes": [], "impact": "serious", "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty" }, { "id": "implicit-label", "data": null, "relatedNodes": [], "impact": "critical", "message": "Form element does not have an implicit (wrapped) <label>" }, { "id": "explicit-label", "data": null, "relatedNodes": [], "impact": "critical", "message": "Form element does not have an explicit <label>" }, { "id": "non-empty-title", "data": null, "relatedNodes": [], "impact": "serious", "message": "Element has no title attribute or the title attribute is empty" } ], "all": [], "none": [], "impact": "critical", "html": "<input class=\"c-text-input__input\" id=\"violations__labeless-input\" type=\"text\">", "target": [ "#violations__labeless-input" ], "failureSummary": "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\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" } ] } ] } ]