Form elements do not have associated labels

[Aircl0wn]

Provide the steps to reproduce

1. Run LH on https://www.veenendaal.nl/

<form action="https://www.veenendaal.nl/nc/algemeen/zoeken/" method="get" class="search-bar-form">
    <label for="searchBar" class="sr-only">Doorzoek de site</label>
    <input type="search" id="searchBar" name="q" class="search-bar-input" value="" placeholder="Zoeken" title="invoerveld zoekopdracht">
    <button type="submit" class="search-bar-button" id="search-bar-button" aria-label="Start met zoeken">
        <span class="search-button-text">Zoeken</span>
    </button>
</form>

What is the current behavior?

Lighthouse (in Chrome and separate extension) returns notification of a missing label for the input field. Axe does not return this notification.

This does not happen if i test the snippet above separately so it's a combination of content on the page that's causing lighthouse to fail. So far i haven't figured out why specifically.

What is the expected behavior?

The input field has a label provided with the for attribute set to the correct id of the input field.

Environment Information

• Affected Channels: Extension, DevTools tested
• Lighthouse version: 4.3.1
• Node.js version: -
• Operating System: MacOS 10.14.4, Chrome 74.0.3729.131

Related issues

[patrickhulce]

Thanks for filing! I'm not seeing this on our 5.0 prerelease where we've updated axe, so my guess would be it was a bug in the older version of axe.

[brendankenny]

looks like the fix was in dequelabs/axe-core#1187, released in aXe 3.2.0, landed in Lighthouse in #8370, and, yah, will be in 5.0

[brendankenny]

looks like the fix was in dequelabs/axe-core#1187,

well, looks like that's actually for the issue in #8435, but the rest of the comment is correct :)

[Aircl0wn]

wonderful, thanks guys!