axe-core
axe-core copied to clipboard
element with 'overflow: hidden' still has children spans reported in color-contrast violations
Product: axe-core
Expectation: If a span is visually hidden because its parent specifies "overflow: hidden", the span should be excluded from color contrast results.
Actual: axe-core reports color-contrast violations on hidden spans in the following codepen: https://codepen.io/karansin/pen/QWMOKbj
Motivation: We (Accessibility Insights) received a report from a user whose website looks something like the codepen. The color-contrast result is correct in one sense (the foreground & background are too close), but the elements are hidden. The reporting user expects the hidden spans to be excluded from color-contrast results. Does this seem like a false positive? Thanks!
axe-core version: 4.3.2, and a locally built axe.min.js from develop
commit 112b960ee95b6a6abfb38a15b7092d9847512f0f
Browser and Assistive Technology versions
Chrome 95.0.4638.54
Windows
I believe this is similar to #2806
Validated with the latest develop branch axe-core code base, the test script:
<style>
.container {
width: 200px;
height: 200px;
overflow: hidden;
}
.foo * {
width: 200px;
height: 200px;
}
#two {
color: #eee;
}
</style>
<div class="container">
<div class="foo" id="foo">
<div id="one">hello</div>
<div id="two">goodbye</div>
</div>
</div>
is passing color-contrast rule