dequelabs / dequelabs/axe-core

Suppress pseudo-element incomplete item if descendant has opaque background

Open
#3,908 3 comments 0 reactions 0 assignees View on GitHub
color contrast feat
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

### Product

axe-core

### Feature Description

I'm getting lots of Incomplete color contrast messages due to pseudo-elements. [Here's a CodePen](https://codepen.io/75th/pen/JjBQLMZ) I've been playing around with. I have this markup:

```html

Yo

```

...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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.