color-contrast false negative with nested combination of stacking contexts

[dbjorge]

Product

axe-core

Product Version

4.10.2

Latest Version

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

Issue Description

We received a customer report recently of a color-contrast false-negative where it reported a bgOverlap incomplete for a case that it ought to have been able to detect as a violation. This happens due to axe's grid machinery calculating an incorrect stacking order for the elements in question; it incorrectly determines that one of the ancestor container elements is being rendered on top of the leaf descendant element, which is inconsistent with the actual browser paint order (and the order reported by document.elementsFromPoint).

The specific customer repro is private, but the test cases below represent minimal repros of the same underlying issue. In the motivating example, this pattern was part of a more complicated interactive grid control.

Expectation

The suggested new test cases below should all be satisfied

Actual

The test cases are not satisfied; the integration tests incomplete with bgOverlap and the unit test shows an incorrect stack order calculation:

1) should correctly order deeply nested stacking contexts
     dom.getElementStack stack order
     AssertionError: expected [ '2', 'target', '3', '1', 'fixture' ] to deeply equal [ 'target', '3', '2', '1', 'fixture' ]
    at Context.<anonymous> (test/commons/dom/get-element-stack.js:434:14)

How to Reproduce

Suggested new case for test/commons/dom/get-element-stack.js

    it('should correctly order nested combinations of positioning and stacking contexts', () => {
      fixture.innerHTML = `
        <div id="1" style="position: relative; z-index: 4; width: 200px; height: 200px;">
          <div id="2" style="position: absolute;">
            <div id="3" style="transform: translate3d(0px, 0px, 0px);">
              <span id="target">text</span>
            </div>
          </div>
        </div>
      `;
      axe.testUtils.flatTreeSetup(fixture);
      const target = fixture.querySelector('#target');
      const stack = mapToIDs(getElementStack(target));
      // matches browsers' document.elementsFromPoint behavior
      assert.deepEqual(stack, ['target', '3', '2', '1', 'fixture']);
    });

Suggested new cases for test/integration/rules/color-contrast/color-contrast.html

Updating color-contrast.json with #fail13, #fail14, #pass24, #pass25:

<div style="position: relative; z-index: 1; width: 200px; height: 200px;">
  <div style="position: absolute;">
    <div style="transform: translate3d(0px, 0px, 0px);">
      <span id="fail13" style="background-color: #111; color: #000">low contrast</span>
      <span id="pass24" style="background-color: #fff; color: #000">ok contrast</span>
    </div>
  </div>
</div>

<div style="position: relative; z-index: 1; width: 200px; height: 200px;">
  <div style="position: absolute;">
    <div style="opacity: 0.99;">
      <span id="fail14" style="background-color: #111; color: #000">low contrast</span>
      <span id="pass25" style="background-color: #fff; color: #000">ok contrast</span>
    </div>
  </div>
</div>

Additional context

We think this is probably the same root cause as #4350 (where it causes a target-size false positive instead of this color-contrast false negative). We started working on this in #4351 but didn't complete before hitting our timebox.