[a11y] Form elements do not have associated labels

[pdehaan]

Description

Google Lighthouse audit reports "Form elements do not have associated labels" on the language switcher <select> element.

Steps to reproduce

Install Chrome and run an audit on mozilla.org (I randomly used https://www.mozilla.org/en-US/technology/browser-history/, but I've seen it on other pages too).

Expected result

No warnings/errors.

Actual result

Environment

macOS w/ latest release Chrome/Lighthouse.

[alexgibson]

I'm not 100% clear if this is a bug in our page, or a bug in Google's parser. The form control does have an assosiated label:

<form id="lang_form" class="mzp-c-language-switcher mzp-t-dark" method="get" action="#">
  <a class="mzp-c-language-switcher-link" href="/locales/">Language</a>
  <label for="page-language-select">Language</label>
  <select id="page-language-select" class="mzp-js-language-switcher-select" name="lang" dir="ltr" data-previous-language="en-US">
      <option value="de" lang="de">Deutsch</option>
      <option value="en-CA" lang="en-CA">English (Canadian)</option>
      <option value="en-GB" lang="en-GB">English (British)</option>
      <option value="en-US" selected="" lang="en-US">English</option>
      <option value="fr" lang="fr">Français</option>
  </select>
  <button type="submit">Go</button>
 </form>

The <label> in question is visually hidden though (i.e. hidden on-screen, but not from screen readers).

Moving this issue to Protocol, as it's not strictly bedrock related.

[maureenlholland]

This appears to have been an error with Google's parser. The language switcher label issue no longer shows in Lighthouse or WAVE audits.