Add default gatherer replacement doc example

[Westbrook]

Summary

As seen in https://github.com/dequelabs/axe-core/issues/4259 there are a number of important accessibility APIs that axe-core does not currently, and may not for a while, cover, like roles applies via elementInternals. The means that it is easy on an element that is give a role in this manner to receive this output:

❌ `aria-prohibited-attr` failure for `minScore` assertion (Elements use prohibited ARIA attributes: https://dequeuniversity.com/rules/axe/4.9/aria-prohibited-attr )
Expected >= 0.9, but found 0

Other than moving aria-prohibited-attr at large to a "warn" is there more nuanced configuartion that can be applied to prevent this false negative? For instances, some integrations of axe-core allow for ignoredTags to be listed or ignoredRules. For my cases, I think I really need a ignoredRulesByTag sort of thing, which I'm not sure is actually possible at the axe-core level, but am seeing what's possible.

[connorjclark]

https://github.com/dequelabs/axe-core/blob/develop/lib/checks/aria/aria-prohibited-attr-evaluate.js

The check uses the standards object, which can be overriden via axe.configure({standards}) to provide your own role.

On the Lighthouse side, we don't have any way to pass options to gatherers (mentioned in https://github.com/GoogleChrome/lighthouse/issues/10247), so the only way to utilize your own axe configuration today is to create a custom Lighthouse config with your own Accessibility gatherer. I don't know if we have an example of what that would look like - @adamraine do we?

[Westbrook]

Oooh, this is quite useful! An example as to where I might be able to inject that would be super help. Many thanks, in advance 🙇🏼

[adamraine]

I don't know if we have an example of what that would look like - @adamraine do we?

We don't have an example of replacing a default gatherer with a custom one, although such an example would be useful for use cases like this.

Here is a quick example config file that replaces the gatherer with one that throws an error:

import {Gatherer} from 'lighthouse';

class CustomAccessibility extends Gatherer {
  meta = {
    supportedModes: ['navigation'],
  };

  getArtifact() {
    throw new Error('Test');
  }
}

/** @type {import('lighthouse').Config} */
const config = {
  extends: 'lighthouse:default',
  artifacts: [
    {id: 'Accessibility', gatherer: CustomAccessibility},
  ],
};

export default config;