axe-core icon indicating copy to clipboard operation
axe-core copied to clipboard

element with 'overflow: hidden' still has children spans reported in color-contrast violations

Open karanbirsingh opened this issue 4 years ago • 1 comments

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

karanbirsingh avatar Nov 02 '21 00:11 karanbirsingh

I believe this is similar to #2806

straker avatar Nov 03 '21 15:11 straker

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

image

padmavemulapati avatar Oct 17 '22 16:10 padmavemulapati