Skip to content

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

Description

@straker

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    QA: Passedcolor contrastColor contrast issuesfixBug fixesrulesIssue or false result from an axe-core rule

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions