Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
straker opened this issue Jul 18, 2024 · 0 comments
Labels
color contrast Color contrast issues fix Bug fixes rules Issue or false result from an axe-core rule
Milestone

Comments

@straker
Copy link
Contributor

straker commented Jul 18, 2024

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 straker added fix Bug fixes rules Issue or false result from an axe-core rule color contrast Color contrast issues labels Jul 18, 2024
@straker straker changed the title Stacking-order z-index: 0 bug Stacking-order z-index: 0 bug causes color-contrast to misidentify background Jul 18, 2024
@straker straker added this to the Axe-core 4.11 milestone Jul 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
color contrast Color contrast issues fix Bug fixes rules Issue or false result from an axe-core rule
Projects
None yet
Development

No branches or pull requests

1 participant