[reporter-cli] Feature request: add runner to the reporter’s output for each issue

[thibaudcolas]

Now that Pa11y supports Axe, most of the times I use it with both the axe and htmlcs runners. This is generally a big plus for me, as both tools have their strengths – but one drawback is that it’s not always clear in the output which runner is responsible for each reported issue.

For example:

 • Error: Elements must have sufficient color contrast (https://dequeuniversity.com/rules/axe/3.5/color-contrast?application=axeAPI)
   ├── color-contrast
   ├── #main-content > div > div > h2
   └── <h2 class="highlighted-content__title heading heading--xl">Help test our new website</h2>

 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1.98:1. Recommendation:  change text colour to #5d8200.
   ├── WCAG2AAA.Principle1.Guideline1_4.1_4_6.G18.Fail
   ├── #main-content > div > div > h2
   └── <h2 class="highlighted-content__title heading heading--xl">Help test our new website</h2>

Comparing these two items, I know both tools fairly well so I can infer which is which based on the error code’s contents, and the fact that Axe has a Deque URL in its error message. However it takes quite a bit of mental effort to do this over the tens/hundreds of errors I’ll look at while using Pa11y, and it breaks down quickly as you add more runners (not there yet but I’d like to!).

How about adding the runner to the error code instead?

 • Error: Elements must have sufficient color contrast (https://dequeuniversity.com/rules/axe/3.5/color-contrast?application=axeAPI)
   ├── axe: color-contrast
   ├── #main-content > div > div > h2
   └── <h2 class="highlighted-content__title heading heading--xl">Help test our new website</h2>

 • Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1.98:1. Recommendation:  change text colour to #5d8200.
   ├── htmlcs: WCAG2AAA.Principle1.Guideline1_4.1_4_6.G18.Fail
   ├── #main-content > div > div > h2
   └── <h2 class="highlighted-content__title heading heading--xl">Help test our new website</h2>

[josebolos]

Thanks for creating this issue, this is an excellent idea!

[thibaudcolas]

Thanks @josebolos, I gave it a go in pa11y/pa11y-reporter-cli#12, and also stumbled upon pa11y/pa11y-reporter-cli#11 along the way.