Closed acelaya closed 1 year ago
By doing a simple console log, accessibility violations were being printed like this:
ERROR: 'axe-core violation', Object{id: 'aria-valid-attr-value', impact: 'critical', tags: ['cat.aria', 'wcag2a', 'wcag412', 'EN-301-549', 'EN-9.4.1.2'], description: 'Ensures all ARIA attributes have valid values', help: 'ARIA attributes must conform to valid values', helpUrl: 'https://dequeuniversity.com/rules/axe/4.8/aria-valid-attr-value?application=axeAPI', nodes: [Object{any: ..., all: ..., none: ..., impact: ..., html: ..., target: ..., failureSummary: ...}]}
With this new approach they are printed on a more human-friendly way in which errors can be inspected and more easily interpreted:
ERROR: 'axe-core violation', '{ "id": "aria-valid-attr-value", "impact": "critical", "tags": [ "cat.aria", "wcag2a", "wcag412", "EN-301-549", "EN-9.4.1.2" ], "description": "Ensures all ARIA attributes have valid values", "help": "ARIA attributes must conform to valid values", "helpUrl": "https://dequeuniversity.com/rules/axe/4.8/aria-valid-attr-value?application=axeAPI", "nodes": [ { "any": [], "all": [ { "id": "aria-valid-attr-value", "data": [ "aria-controls=\"share-panel\"" ], "relatedNodes": [], "impact": "critical", "message": "Invalid ARIA attribute value: aria-controls=\"share-panel\"" } ], "none": [], "impact": "critical", "html": "<button role=\"tab\" data-component=\"Tab\" type=\"button\" aria-selected=\"true\" id=\"share-panel-tab\" aria-controls=\"share-panel\" class=\"focus-visible-ring transition-colors whitespace-nowrap flex items-center gap-x-1.5 px-4 py-2 font-semibold text-grey-7 rounded-t border border-transparent border-b-0 aria-selected:text-color-text aria-selected:bg-white aria-selected:border aria-selected:border-grey-3 aria-selected:border-b-0 enabled:hover:text-color-text disabled:text-grey-7/50\">", "target": [ "#share-panel-tab" ], "failureSummary": "Fix all of the following:\n Invalid ARIA attribute value: aria-controls=\"share-panel\"" } ] }
By doing a simple console log, accessibility violations were being printed like this:
With this new approach they are printed on a more human-friendly way in which errors can be inspected and more easily interpreted: