false positive in color contrast

[DaveTryon]

We've encountered a false positive in the color contrast tests. Expand Header contrast demo.zip, which contains an MHT file that is derived from a subset of an actual page that was scanned. Open the MHT file in your browser and run the axe-core color contrast rule on the text. It will fail because it's picking up the incorrect background color. If you remove position: relative from the h1 styling, the correct background color is reported and the color contrast pass succeeds, even though the pages are visually identical. We see the same issue in Chrome, new Edge, and FireFox.

Product: axe-core

Expectation: The background color and test result should always be reported correctly, independent of the position attribute.

Actual: The position attribute alters the background color that is reported, causing the color contrast test to fail.

Motivation: False positives

axe-core version: 4.1.1

Browser and Assistive Technology versions
Chrome 89.0.4389.90, also occurs in current versions of Edge and FireFox

[straker]

Thanks for the issue. Due to security concerns I can't open a zip file. Is it possible to move it to something like Codepen or paste the contents in a comment?

[iamrafan]

@straker here is the Codepen repro of the same issue: https://codepen.io/iamrafan/pen/ExZVobv

[straker]

Thanks, that helps a lot. I can see what's going on but I'll need to investigate it further. The root issue is that our custom element stack code is not returning the correct order of elements for this case.

[clottman]

I've narrowed it down to the commons/dom/get-rect-stack:getPositionOrder function. It returns a different value (0) if the element is statically positioned (which is the case for a div without relative positioning) than for an element with not-static positioning (returns 3).

Next step, investigate the links from the comments on that function and determine whether that's actually what we should be doing.

I can make the two code snippets (one with position: relative on the div.section--gray100, one without) give the same result if I make the first line of getPositionOrder be like this:

  if (vNode.getComputedStylePropertyValue('position') === 'static' || vNode.getComputedStylePropertyValue('position') === 'relative') {

but I don’t know that that’s actually the correct solution for all cases.

[padmavemulapati]

Validated with the latest axe-core develop branch code base,
checked in the conditions:
should return stack in DOM order of non-positioned elements with z-index
should correctly position children of positioned parents
should correctly position siblings with positioned children correctly
should correctly position children of float elements with position elements