Hidden form label: failure message not clearly identifying the problem

axe incorrectly reports that an element within the following HTML does not have a label (when embedded within a larger HTML file):

        <form class="search" action="/" data-gp-element="search">
          <label class="gp-offline-disable" for="s">Search</label>
          <input class="gp-offline-disable" type="search" name="s" id="s" placeholder="Search" value="">
          <button type="submit">Go</button>
        </form>

The input is correctly detected if the entire HTML file is as above; it’s only a problem if embedded within a larger file.

To reproduce, first load https://cdn.rawgit.com/ithinkihaveacat/8577d6d00eb08f48b4a6e3fd015c379d/raw/f943193a01bff03ea7df37b9bf4ef206d9f2486c/index.html, then paste the following in the JS console to run the accessibility tests:

function loadScript(src) {
  return new Promise(resolve => {
    const e = document.createElement("script");
    e.src = src;
    e.onload = resolve; 
    document.head.appendChild(e);
  });
}

loadScript("https://unpkg.com/axe-core/axe.min.js").then(() => {;
  axe.a11yCheck(document, r => console.log(r.violations[2]));
});

Actual output:

A Form elements must have labels error on the element <input class="gp-offline-disable" type="search" name="s" id="s" placeholder="Search" value="">.

Expected output:

No error report (on this element; there are other accessibility errors in the HTML).

[dylanb]

@paulirish that is a valid point, I think we could improve this.

Note to implementor: we would probably want to create a separate “fail” check that looks for a hidden explicit label and flags this while simultaneously changing the explicit label check to allow hidden labels to pass

[paulirish]

I think that it’d be slightly more clear if the error message indicated the label is hidden.