isIconLigature fails on leading invisible character #3913
Labels
color contrast
Color contrast issues
commons
Issues in the common code (lib/commons)
fix
Bug fixes
pr
A pr has been created for the issue
Milestone
Product
axe-core
Product Version
4.6.3
Latest Version
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 aSupportError
being thrown.How to Reproduce
Project which reproduces the issue:
axe-core-invisible-issue.zip
Steps:
npm install
html-server
npm package, for example) or simply open the html file in a browsernode_modules/axe-core/axe.js
) to observe the exact source of the issue, on the following lines:var compareData = new Uint32Array(canvasContext.getImageData(0, 0, width, fontSize).data.buffer);
if (!compareData.some(function(pixel) {
reject(new SupportError({
After hitting the break point right before
isIconLigature
callscanvasContext.getImageData
, you'll be able to see thatwidth
andfontSize
have been determined to beNaN
andInfinity
which are invalid parameters for this function, causing it to throw an exception and result in theSupportError
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...The text was updated successfully, but these errors were encountered: