The color-contrast check doesn't work in JSDOM

[thecristen]

Hi there, thanks for building this fantastic library!

I've never gotten bad color contrast to create violations when testing React components with JSDOM. It seems to always return a false passing result (well, when it's not timing out, but that's a known JSDOM issue). I've created an example based off of this project's jest+react example here.

I'm guessing it doesn't work because JSDOM has not implemented ranges as part of its DOM implementation, and the code that checks for color contrast depends on that (document.createRange()). But the false passing result is a bit concerning.

[dylanb]

@thecristen what do you mean by "false passing result"? Is it returning this in the violations array or in the incomplete array?

[marcysutton]

I would just turn off the color contrast rule in JSDOM, because you're right that it won't ever work. We don't recommend testing color contrast in JSDOM due to the lack of support.

[dylanb]

@marcysutton yes, but it should be passing the results for this rule back in the incomplete array - no?

[thecristen]

Thanks for the comments, this made me look at it a bit carefully. I shouldn't have taken the absence of violations as a "passing" indication (though, I've seen too many tests follow that pattern..). @dylanb you're right in that the results end up in the incomplete array - that's great!

[kalpeshsingh]

Thanks for the comments, this made me look at it a bit carefully. I shouldn't have taken the absence of violations as a "passing" indication (though, I've seen too many tests follow that pattern..). @dylanb you're right in that the results end up in the incomplete array - that's great!

Curious to know what was your next step here? Did you remove this from unit testing as it requires manual intervention?

[mohanraj-r]

@dylanb @marcysutton looks like the range and selection APIs were added to JSDOM in v16 (jsdom/jsdom#2719). Does this mean color contrast checks can work with axe-core in JSDOM? Does it need any updates to axe-core or should it work as is with JSDOM v16 or higher?

[straker]

@mohanraj-r I tested out jsdom 18.0.1. Looks like something about the range API is still not fully working as I get this error when running a test:

"message": "`TypeError: range.getClientRects is not a function` - feature unsupported in your environment. Skipping color-contrast rule.",
        "ruleId": "color-contrast",
        "stack": "Error\n    at new SupportError (axe-core/doc/examples/jsdom/node_modules/axe-core/axe.js:52:18)\n    at Rule.run2 [as run] (axe-core/doc/examples/jsdom/node_modules/axe-core/axe.js:19961:16)\n    at axe-core/doc/examples/jsdom/node_modules/axe-core/axe.js:20719:15\n    at pop (axe-core/doc/examples/jsdom/node_modules/axe-core/axe.js:6649:18)\n    at Object.defer (axe-core/doc/examples/jsdom/node_modules/axe-core/axe.js:6671:11)\n

[paschalidi]

Seeing the same here. Is there any known fix for this?

[straker]

Unfortunately without full support of the APIs we use, there's not much we can do for a fix. I just tested with jsom 19 and still am getting the not supported message.

`TypeError: range.getClientRects is not a function` - feature unsupported in your environment. Skipping color-contrast rule

[tounsoo]

Is this still the case? Or does anyone know another alternative library that will check for color contrast?

[ashleyfigure]

@tounsoo I'm a little late to the party but we've been using axe-core with Cypress to test color contrast. Cypress runs tests in a browser vs JSDOM.