Lighthouse: Form elements do not have associated labels (4.3.0)

[RobinZuid]

Hidden labels are still not considered associated with fields in LH 4.3.0. Using DevTools and Chrome extension, both version 4.3.0, giving the same result.

This example provided by w3.org shows how to correctly hide an element but also fails in LH:
Run LH on https://www.w3.org/WAI/tutorials/forms/labels/

I'm on MacOS 10.14.4 using the latest version of Chrome (73.0.3683.103)

[patrickhulce]

Thanks for filing @RobinZuid!

I'm not seeing this issue in the latest version of LH where we've upgraded our axe version. It's possible they've fixed it already.

If you still believe this is a problem with the accessibility results please file an issue over in axe.

[aaarichter]

@patrickhulce what version of LH did you test it? The current Canary version v4.3.1 still shows this bug to me.

the markup I have is

<label for="ls-search" class="ax-hidden">Search</label>
<input class="ls-s-input" id="ls-search" type="search" placeholder="Search" readonly>

where .ax-hidden is

.ax-hidden {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px,1px,1px,1px);
    border: 0;
    overflow: hidden
}

[brendankenny]

@patrickhulce what version of LH did you test it? The current Canary version v4.3.1 still shows this bug to me.

yes, the update (#8370, I assume) has only landed on master. It should go out to Canary very soon.

[aaarichter]

Thanks @brendankenny . I also saw the comment in https://github.com/GoogleChrome/lighthouse/issues/8839 about prerelease 5.0

[ConradSollitt]

I found this issue from Stack Overflow Post https://stackoverflow.com/questions/56257180/chrome-audit-form-elements-do-not-have-associated-labels after finding a hidden label with correct for="id" was not working on a site I created that uses a label with placeholder on a filter input:

https://awesome-web-react.js.org/

Seems that hidden associated labels are still showing as not linked in Lighthouse.

Posting the work around here in case someone else comes across the issue:

/* Original version: */
label { display: none; }

/* Fix to pass Lighthouse: */
label { position: absolute; top:-1000px; left:-1000px; }