Color contrast checks result in an error when axe-core is run from an extension

[thuey]

Product

axe-core

Product Version

= 4.6.0

Latest Version

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

Issue Description

Expectation

I expect it to correctly identify color contrast issues

Actual

It does not identify color contrast issues. Instead, an error message is logged to the results:

TypeError: setting getter-only property "right"

How to Reproduce

Run axe-core >= 4.6.0 in an extension. (Feel free to reach out, and I can help you get set up with an extension with axe-core >= 4.6.0)

Additional context

I have traced down the issue and am submitting a PR to fix it. The issue is axe-core is trying to set DOMRect.right here:

axe-core/lib/commons/color/get-background-color.js

Line 153 in 123b83c

nodeRect.right = nodeRect.left + nodeRect.width;

. However, DOMRect.right (and DOMRect.bottom) is a read-only property.

Unfortunately, browsers seem to enforce this inconsistently, and it is only actually enforced from the isolated world that an extension content script runs in.

[WilcoFiers]

An issue like this could easily pop up again if we don't add tests. The way I see it, we either add an eslint rule that prevents ever assigning to a .right and .bottom property, or we override the DOMRect object in our test env to have it throw when those props are assigned.

[padmavemulapati]

@straker , QA notes please.

[straker]

@padmavemulapati For this one it will be latest axe version runs in the extension without issues.

[padmavemulapati]

per steve, everything it need to work from the extension end , so validated and working as expected