dequelabs / dequelabs/axe-core
color-contrast false-positives on empty text inputs
- 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
Assessment
This issue has not been assessed yet.