Product

axe-core

Product Version

4.6.3

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Expectation

Expected axe-core to be able to handle any valid HTML (the HTML in this case is 100% valid according to the W3C validator)

Actual

The isIconLigature function fails to consider invisible characters at the start of the input, resulting in a SupportError being thrown.

How to Reproduce

Project which reproduces the issue:
axe-core-invisible-issue.zip

Steps:

1. Run npm install
2. Start a server to serve the html file (I used the html-server npm package, for example) or simply open the html file in a browser
3. Optionally put some breakpoints (in node_modules/axe-core/axe.js) to observe the exact source of the issue, on the following lines:
   • 11378 var compareData = new Uint32Array(canvasContext.getImageData(0, 0, width, fontSize).data.buffer);
   • 11379 if (!compareData.some(function(pixel) {
   • 22005 reject(new SupportError({

After hitting the break point right before isIconLigature calls canvasContext.getImageData, you'll be able to see that width and fontSize have been determined to be NaN and Infinity which are invalid parameters for this function, causing it to throw an exception and result in the SupportError being generated. This happens because the first character in the link content of my HTML in this case is [U+2069] which is an invisible character relating to the left-to-right or right-to-left nature of the text (we ran into this issue when checking one of our Arabic-translated files).

Would it be possible to change isIconLigature to look for the first visible character? I suppose there would also need to be a case to handle if there isn't any visible characters in the span as well...