axe-core icon indicating copy to clipboard operation
axe-core copied to clipboard

Stacking-order z-index: 0 bug causes color-contrast to misidentify background

Open straker opened this issue 1 year ago • 0 comments

There's a bug in our getStackLevel code where we treat a declared z-index: 0 as having a stacking context but not a z-index.

For example, the correct stack order of the following code should be [#parent, #child, body, html] but instead it comes out to [#parent, body, html, #child]

<div id="parent" style="position: relative: z-index: 0">
  <div id="child" style="position: relative; z-index: -1; background: red"></div>
</div>

Instead we need to allow z-index: 0 to be treated as a valid z-index value and allow the stacking level to equal 0. However doing so creates another problem though as we made the ROOT_LEVEL z-index equal 0 and then remove root level elements when we encounter a real stack (a positioned stacking context that declares a non-auto z-index).

We'll also need to update our visuallySort function as it treats the -1 z-index of a child context as being higher in the visual stack than the parent element, when in reality the parent should be on top.

straker avatar Jul 18 '24 16:07 straker