axe-core Error: Cannot read property 'filter' of undefined

[amiralitaheri]

Running Lighthouse accessibility on this url, fails due axe-core error.

Actual:

Expectation: Stop failing!!

My runtime settings

[straker]

Can reproduce this. Seems the issue is with color contrast and the very long horizontal scroll of the Burp captured package output. We try to calculate the rect of the long string of text and calculate it using the full width and not the width of the container, causing our code to think it's much further to the right than it is.

[patrickhulce]

This error also occurs on https://www.nrk.no/sorlandet/fargesvake-ser-ikke-rod-t--onsker-seg-gul-1.15125048 if you need another repro case :)

ref GoogleChrome/lighthouse#11384

[BogdanCerovac]

For https://www.nrk.no/sorlandet/fargesvake-ser-ikke-rod-t--onsker-seg-gul-1.15125048

Raw Lighthouse CLI JSON report: https://pastebin.pl/view/a1fa102e
Raw aXe core CLI JSON report: https://pastebin.pl/view/339da0f9

Did not get any errors in the terminal (verbose mode).

[akinhwan]

I'm also seeing this error on my website when trying to run a lighthouse a11y test on desktop or mobile https://soceng.netlify.app/

[jferragut]

This is also present on our company website: Alkemy

Reproduction:

• Test Mobile in lighthouse
• Accessibility fails

Screenshot:

[straker]

I have tested both https://www.nrk.no/sorlandet/fargesvake-ser-ikke-rod-t--onsker-seg-gul-1.15125048 and https://www.alkemydev.com/ and found that the current axe version (v4.0.2) does not produce the error. Looking deeper it looks like both these issues were fixed in v4.0.0, specifically with a fix to handle text truncation (which appear in both sites in the mobile views).

For Lighthouse this means they will need to update to v4.0.0 to resolve these issues. As for the original issue, it is not caused by text truncation and will be fixed in v4.1.0.

[padmavemulapati]

Verified in the latest develop code (v4.0.2)- and for the test snippet:
<pre id="1" style="width: 400px; overflow: auto;"> <span id="target" style="display: flex; with: 400px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et sollicitudin quam. Fusce mi odio, egestas pulvinar erat eget, vehicula tempus est. Proin vitae ullamcorper velit. Donec sagittis est justo, mattis iaculis arcu facilisis id. Proin pulvinar ornare arcu a fermentum. Quisque et dignissim nulla, sit amet consectetur ipsum. Donec in libero porttitor, dapibus neque imperdiet, aliquam est. Vivamus blandit volutpat fringilla. In mi magna, mollis sit amet imperdiet eu, rutrum ut tellus. Mauris vel condimentum nibh, quis ultricies nisi. Vivamus accumsan quam mauris, id iaculis quam fringilla ac. Curabitur pulvinar dolor ac magna vehicula, non auctor ligula dignissim. Nam ac nibh porttitor, malesuada tortor varius, feugiat turpis. Mauris dapibus, tellus ut viverra porta, ipsum turpis bibendum ligula, at tempor felis ante non libero. Donec dapibus, diam sit amet posuere commodo, magna orci hendrerit ipsum, eu egestas mauris nulla ut ipsum. Sed luctus, orci in fringilla finibus, odio leo porta dolor, eu dignissim risus eros eget erat. </span> </pre>
I am still seeing the issue.
Confirmed with @straker , as per discussion, moving back to "Inprogress"

[padmavemulapati]

Verified with the fix, from the develop branch code: (dated 11/11/2020 - with commit changes (3c2429b)
Not seeing any failure on color-contrast
Verified for test snippet:
<pre id="1" style="width: 400px; overflow: auto;"> <span id="target" style="display: flex; with: 400px;">\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et sollicitudin quam. Fusce mi odio, egestas pulvinar erat eget, vehicula tempus est. Proin vitae ullamcorper velit. Donec sagittis est justo, mattis iaculis arcu facilisis id. Proin pulvinar ornare arcu a fermentum. Quisque et dignissim nulla, sit amet consectetur ipsum. Donec in libero porttitor, dapibus neque imperdiet, aliquam est. Vivamus blandit volutpat fringilla. In mi magna, mollis sit amet imperdiet eu, rutrum ut tellus. Mauris vel condimentum nibh, quis ultricies nisi. Vivamus accumsan quam mauris, id iaculis quam fringilla ac. Curabitur pulvinar dolor ac magna vehicula, non auctor ligula dignissim. Nam ac nibh porttitor, malesuada tortor varius, feugiat turpis. Mauris dapibus, tellus ut viverra porta, ipsum turpis bibendum ligula, at tempor felis ante non libero. Donec dapibus, diam sit amet posuere commodo, magna orci hendrerit ipsum, eu egestas mauris nulla ut ipsum. Sed luctus, orci in fringilla finibus, odio leo porta dolor, eu dignissim risus eros eget erat. </span> </pre>

[bnbabu55]

I am still getting this error using chrome/edge version 90, please help me get this taken care of.

[patrickhulce]

@bnbabu55 try with Chrome 91. If you're still seeing the issue then, it's a different root cause.