[Bug Report] Lighthouse a11y issue: Form elements do not have associated labels

Pierre Mage

• October 07, 2021 16:35
• Edited

label's for attribute uses the input's name value instead of the id value in the html generated by Brizy Cloud's Form element.

psgpkyeitgkqcegvfjdnlqwxqjnxairmiqrr instead of czukjygsiogfonwfkdaskdivjzjziuvfmovw in the example below:

<label class="brz-label brz-forms2__field-label" for="psgpkyeitgkqcegvfjdnlqwxqjnxairmiqrr">Name*</label>
<input type="text" id="czukjygsiogfonwfkdaskdivjzjziuvfmovw" name="psgpkyeitgkqcegvfjdnlqwxqjnxairmiqrr" placeholder="" required="" data-type="Text" data-label="Name*" data-placeholder="" class="brz-input brz-forms2__field brz-forms2__field-text">

For this reason, Lighthouse reports a "Form elements do not have associated labels" error.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attr-for

The value of the for attribute must be a single id for a labelable form-related element in the same document as the <label> element.

0

• 

  Alex

  • October 07, 2021 19:53

  Hi,

  thank you for your message. I have forwarded it to the devs.

  0

Please sign in to leave a comment.