Proposal: Need for loading external assets in axe-core

[jeeyyy]

Load external assets in axe-core:

Requirement:

In order to support both existing rules and upcoming new WCAG2.1 rules (Eg: issue #851), there is a need to load external assets, in this case external stylesheets.

Having tried a few options as detailed in the issue to get hold of the assets, believe the best way to go ahead would be to introduce ability to load external assets in axe-core,.

Note: The assets can be loaded in parallel when axe is run against rules that are not dependent on external assets.

Considerations:

At this juncture although the need is only for the construction of CSSOM, there may be a need to support pre-fetching of external assets as support for newer rules are incorporated (Eg: AOM).

Suggestions:

• To define a list/ enumeration of possible assets that needs to be pre-fetched.

const preLoadEnumeration = Object.freeze([ 'CSSOM', 'AOM' ]);

• To introduce with in each check, an additional attribute preload: ['CSSOM'], which defines dependencies of external assets.
• To introduce a top level global configuration object on age.run, like so:

preload: {
  assets: [ 'CSSOM' ],
  timeout: 5000 // (ms) if not passed, defaults to an internal constant.
}

This will provide end-users of the library to easily control loading external assets.

Known Catches:

• Load time for assets?
• Order of loading of assets and the effect this may have on results/ false positives?

Some Preliminary Work:

• Refer commit - 7e953e1

Next steps:

• Thoughts & Ideas welcome.

[WilcoFiers]

• We shouldn't "wait" for these assets to load. We can load them, while running rules that don't require these assets. That might have been your intention, but I think this should be explicit.

• I think {preload: false} should be an option of axe.run, not of axe.configure.

• Symbol() isn't supported in IE9, so we can't really use that.

• We need a way to set the preload timeout time. We could maybe reuse the preload option, if its an int, that will be the timeout, if falsey, it's off

For clarification, there are several rules that we need this for, not just WCAG 2.1 rules. An important feature request was to have Axe test the hover / focus state of rules. We can only do that with access to the CSSOM. This is expected to cut manual audit time quite substantially.

[jeeyyy]

@WilcoFiers - updated proposal based on your comments.

[stephenmathieson]

I think {preload: false} should be an option of axe.run, not of axe.configure.

Just so everyone is on the same page, can you please elaborate on "why" here? It seems like axe.configure() is the logical place to put configuration to me (just based on verbiage alone).

[dylanb]

1. What is the output/side-effect of a call to preload? i.e. how do I access the CSSOM or the AOM after it is loaded?
2. Do we only call a check after its dependencies have all loaded?
3. What happens if there are no dependencies? e.g. there are no external CSS objects (for example we are running inside unit tests). Obviously there is no loading, but how does the dependent check get notified or made aware of this fact?

[jeeyyy]

PR - #958

[jeeyyy]

PR was merged. Hence closing the issue.
An additional issue detailing the requirement for nested CSSOM is here - #1054