Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to test contrast of nodes scrolled out of view

See original GitHub issue

This problem was introduced in axe-core 4.5. When an element is scrolled out of view, it is not included in the grid, which results (among other things) that it is reported as incomplete once its scrolled out of view.

Here’s how to reproduce the problem. These logs should report the same, but the second one reports incomplete instead of a violations.

<h1 style="color: #ABC">Hello World</h1>
<main style="background: #CDF; height: 800px;"></main>
<script src="/axe.js"></script>
<script>
  window.onload = async () => {
    window.scrollTo(0, 0);
    const res0 =  await axe.run({ runOnly: 'color-contrast' })
    console.log({ violations: res0.violations, incomplete: res0.incomplete })

    window.scrollTo(0, 1000);
    const res1 =  await axe.run({ runOnly: 'color-contrast' })
    console.log({ violations: res1.violations, incomplete: res1.incomplete })
  }
</script>

Issue Analytics

State:
Created 10 months ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

WilcoFierscommented, Nov 21, 2022

@dbjorge this is expected. @straker made a number of improvement that allowed us to better detect when things are off screen / clipped. It sounds like that’s what’s going on here.

0reactions

padmavemulapaticommented, Dec 5, 2022

Validated with the latest code base of axe-core develop branch, test-snippet:

<!DOCTYPE html>
<html lang="en">
  <title>Axe Playground</title>
  <!-- The playground is used for quick local host axe-core during development -->

  <main>
    <h1>Hello World</h1>
    <p style="color: lightblue;">hell world</p>
    <div style="height: 1000vh;"></div>
    <button>end of line</button>
  </main>

  <script src="/axe.js"></script>
  <script src="/test/testutils.js"></script>
  <script>
    axe.testUtils.awaitNestedLoad(
      window,
      () => {
        axe.run(
          {
            runOnly: 'color-contrast',
            elementRef: true
          },
          (err, results) => {
            console.log(err || results);
          }
        );
      },
      err => console.error(err)
    );
  </script>
</html>

even after scrolled, color-contrast rule failing in this situation, which is expected