dequelabs / dequelabs/axe-core

color-contrast false-positives on empty text inputs

Open
#4,260 0 comments 0 reactions 0 assignees View on GitHub
color contrast fix high rules support
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

### Product

axe-core

### Product Version

4.8.2

### Latest Version

- [X] I have tested the issue with the latest version of the product

### Issue Description

#### Expectation

We saw an example today of a customer site using a text input that used event handlers to apply different classes to the input element in empty vs nonempty states. The empty state used a `color` with < 4.5:1 contrast, but the non-empty state was fine. This shouldn't be a color contrast violation.

#### Actual

This caused a `color-contrast` false positive because `axe-core` evaluates the text input contrast styling even when it contains no text:

https://github.com/dequelabs/axe-core/blob/f1af598cf3a9d0d99c05ae2e06fd203ae4936b00/lib/rules/color-contrast-matches.js#L71-L72

This gives extra-confusing results when the text input uses a `placeholder` - the contrast rule will currently ignore the placeholder text styling and instead evaluate as if the input contained a non-placeholder value, and any resulting violations will appear as if it's evaluated the placeholder text with a usually-incorrect foreground color.

Placeholder text *is* generally subject to contrast requirements, so ideally we'd evaluate the placeholder (but using its foreground color, not the input's). But that can be a separate issue vs this false positive; for the purposes of this bug, either of "incomplete" or "not matched" would be an improvement over the current behavior.

#### How to Reproduce

Suggested new `color-contrast.html` integration test cases:

```html

.placeholder-000::placeholder {
color: #000
}

.placeholder-ddd::placeholder {
color: #ddd
}

```

#### Additional context

The "match text inputs without text" behavior appears to have been introduced a few years ago in https://github.com/dequelabs/axe-core/pull/2130. The comment at the relevant line in `color-contrast-matches` suggests that it was done intentionally, but I didn't see a good explanation of *why* the intention was there in the PR or in the motivating issue

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.