hypothesis / frontend-testing

Common utilities for testing frontend UI code
0 stars 0 forks source link

JSON-stringify accessibility violations before console-logging them #10

Closed acelaya closed 1 year ago

acelaya commented 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\""
    }
  ]
}