Suppress pseudo-element incomplete item if descendant has opaque background

[75th]

Product

axe-core

Feature Description

I'm getting lots of Incomplete color contrast messages due to pseudo-elements. Here's a CodePen I've been playing around with. I have this markup:

<main>
  <div><span>Yo</span></div>
</main>

...and I'm putting an ::after with a background color on the div. I feel like if the span has an opaque background color, Axe should not generate an Incomplete item about color contrast due to the pseudo-element. It is possible for the ::after to be entirely on top of the span, but it is not possible, so far as I can figure out quickly, for the ::after to be between the span's text and its own background. When Axe sees that the span has an opaque background color, it should disregard all pseudo-elements attached to the span's ancestors.

Does this make sense? Am I missing something obvious? I probably am, but I'd love to know what it is.

If the worry is just about a semitransparent pseudo-element being entirely on top of the element, then I suggest changing the failure summary from

Element's background color could not be determined due to a pseudo element

to

Element's contrast ratio could not be determined due to a pseudo element

or something even better.

[straker]

Thanks for the issue. As unbelievable as it is, it's actually possible for there to be a background in between the spans text and its own background. By using negative margins and text, you can get the browser to render a background in between another elements background and text.

<style>
div {
  width: 40px;
  height: 40px;
}

#target { 
  background: blue;
  color: red;
}

#one::after {
  content: "Some Text";
  margin-top: -33px;
  background: green;
  display: block;
}
</style>

<div id="one">
  <div id="target">hello world</div>
</div>

[75th]

@straker Oh man. Well, upon further testing, it looks like axe isn't throwing the error in that case? Here's another CodePen. I took your code and changed the color combinations to be problematic with the pseudo-element overlap, and color contrast is a straight Pass here, not Incomplete or Violation. But if you add position: absolute to the pseudo-element — which creates a new stacking context and avoids the problem — then the Incomplete returns.

And, if you use position: relative on the pseudo, which in this situation seems equivalent to position: absolute, then again it passes instead of being Incomplete.

So shouldn't the logic here be to only throw Incomplete if the pseudo and the descendant are in the same stacking context, OR if no descendant has an opaque background?

[straker]

Our pseudo element detection isn't completely robust. It also fails when using pseudo elements in a grid.

The main problem we wan't to avoid is spamming the user of all pseudo elements when only a few can cause a problem with color contrast. I'll leave this ticket open for when we get around to improving our pseudo element detection.