daisy / ace

Ace by DAISY, an Accessibility Checker for EPUB
MIT License
76 stars 22 forks source link

Ace reporting duplicate-id incorrectly (due to JS replacement of text) #319

Closed clapierre closed 2 years ago

clapierre commented 4 years ago

1.1.1 Command line version

Received this error for a JavaScript replacement of text in our Javascript test in our Enhanced Image Description EPUBTest.org book.

Minor | WCAG 2.0 A | duplicate-idaXe | " Extended description using a progressively enhanced details and summary "Text/testDetailsEnhanced.xhtml#epubcfi(/4/10[extdesc-190]/6/2[js-test-src])Snippet:"JavaScript is enabled. This test passes." "JavaScript is enabled. This test passes."

Here is the code for this xhtml page

<section id="extdesc-190" class="test">
      <h2>
        <span class="test-title">JavaScript is enabled</span>
        <br />
        <span class="test-id">extdesc-190</span>
      </h2>
      <p class="desc">
        This test passes if the following condition is met when JavaScript is
        enabled:
      </p>
      <p>
        You see the text &quot;<b id="js-test-src">JavaScript is enabled. This test passes.</b>&quot; between
        the following two horizontal lines
      </p>

      <hr />
      <div id="js-test-dest">JavaScript is disabled. This test fails.</div>
      <hr />
      <p>
        <b>Note</b>: this test is included because subsequent tests use
        JavaScript to add accessibility affordances. If this test fails, other
        tests on this page may not work as expected.
      </p>
    </section>
<script>
  document.querySelectorAll(".overlaid").forEach(EnhancedDetails.enhance);
  // make extdesc-190 pass
  document.getElementById(
    "js-test-dest"
  ).innerHTML = document.getElementById("js-test-src").outerHTML;
</script>

Here is a link to the testBook, this is test # 190

marisademeglio commented 4 years ago

Ace performs its checks on the version of the document that a browser would see, via a "headless browser". So I believe the error is correct, because id="js-test-src" would appear on two elements after the script runs . I can think of a few different approaches that wouldn't cause this error:

  1. Use <noscript> tags <p>Javascript is <noscript>not</noscript> enabled.</p>
  2. Rather than copy the text from an element, just type it out. innerHTML='<b>JavaScript is enabled. This test passes.</b>';
    1. Change to <span id="js-test-src"><b>JavaScript is enabled...</b></span> and just copy the innerHTML.

If for some reason Ace still reports an error, then please let us know.

danielweck commented 2 years ago

Closing this issue as the behaviour is expected.