Incomplete color-contrast check

Reference: #1539 and #1185.

We are observing a flaky color-contrast check that gets triggered due to viewport size changes. Initially we were using v3.1.2, and got the error in #1185.

I have now created a reproduction case with v3.3.1, see https://html-is.glitch.me/axe-core-color-contrast.html. In Chrome, these are the results I am getting:

When viewport width is 800px, 1 incomplete check is reported.

When viewport width is 850px, 1 violation and 1 incomplete color-contrast check are reported.

When viewport width is < 760px or > 900px, 1 color-contrast violation is reported.

The expected result is there should always be 1 color-contrast violation reported on this page.

I tried to debug this, and it comes down to the scrollIntoView call.

When axe-core calls scrollIntoView on the sidebar <span> element at 800px & 850px, nothing happens, because the element is partially visible already. This breaks the check because the element contains a child element which is outside the viewport. Changing the scrollIntoView call to (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView):

elm.scrollIntoView({block: alignToTop ? 'start' : 'end', inline: 'end'});

fixes the issue, as it will ensure that the element is always scrolled fully into view if possible.

I’m not sure what browser compatibility is required of this check for axe-core, and in Safari I actually consistently get Element's background color could not be determined because it partially overlaps other elements regardless of viewport size. So the fix would definitely require a deeper look.

[haonliu]

we’ve experienced the same issue and tried the fix suggested by @muan and it works!

[straker]

So it looks like there’s two different problems. The first is as you identified in that we need to scroll the element fully into view before we check for it (including horizontal scrolling). The second seems to be that Safari does not add the span parent tag of the button from the elementsFromPoint API, thus making it seem like there’s a span overlapping the button in our checks.