dequelabs / dequelabs/axe-core

color-contrast can return needs review when text is multiline and has `white-space: pre-wrap`

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

Description

Similar to https://github.com/dequelabs/axe-core/issues/5127, however this is caused by having `white-space: pre-wrap` on the span. This causes the text to have a 3rd text rect that is just whitespace at the end of the line (4px wide). The main problem is that this whitespace rect is outside the normal bounding rect of the element and so can easily have a different background stack than the other rects.

In the following example, the text is fully within the first column and shouldn't produce different background rects, however the `pre-wrap` causes a whitespace rect to appear outside the bounding rect of the span and then be positioned on top of the 2nd `.column`, resulting in a different background stack (and the same `elmPartiallyObscuring` message). If you remove the `pre-wrap` color contrast passes without issues.

```html

main {
position: relative;
display: flex;
}
.column {
width: 390px;
height: 900px;
border: 1px solid;
}
.footer {
position: absolute;
width: 392px;
background: black;
color: white;
}





```

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.