Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Oct 27, 2023

Conversation

acelaya
Copy link
Contributor

@acelaya acelaya commented Oct 26, 2023

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

@acelaya acelaya requested a review from robertknight October 26, 2023 15:52
@acelaya acelaya merged commit 08ec20c into main Oct 27, 2023
@acelaya acelaya deleted the pretty-print-a11y-violation branch October 27, 2023 06:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants