isIconLigature fails on leading invisible character

[SirUppyPancakes]

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...

[straker]

Thanks for the issue. For security reasons I can't open a zip file. However, thanks to the description I can reproduce this on my end using the HTML string ⁩Hello World.

Note for future self. We should be able to fix this by passing the string through removeUnicode first before trying to get the first character. We should also add a guard against 0 for width so we don't throw an error.

[SirUppyPancakes]

Thanks! For future reference for myself, what would have been a preferable way to share a test project? A gist maybe?

[straker]

A gist or HTML snippet work best.

[padmavemulapati]

Validated with the latest axe-core develop branch code base, not seeing any failure with the ligature icon on invisible charecters,
for ex: <main> <a href="https://www.google.com">⁩البطاطس</a > </main>