Delivered
Fix invalid for attribute on label tag in forms so that the labels are clickable and accessible
The HTML generated by the form builder is invalid and therefore the labels for checkboxes aren't clickable by the user. This is also bad for accessibility.
The mistake is that the for attribute of the label references the name of the target input instead of its id. It appears that the label for input[type=text] on the page is correct so it's possible this is only an issue with checkbox labels.
Here's an example of a label that was generated:
The mistake is that the for attribute of the label references the name of the target input instead of its id. It appears that the label for input[type=text] on the page is correct so it's possible this is only an issue with checkbox labels.
Here's an example of a label that was generated:
<label for="unsubscribeArticles" class="mktoLabel mktoHasWidth" style="width: 440px;"> <div class="mktoAsterix">*</div> Unsubscribe from Articles:</label>It's supposed to point to the following input, therefore the for attribute should be mktoCheckbox_95_0 instead of unsubscribedArticles.
<input name="unsubscribedArticles" id="mktoCheckbox_95_0" type="checkbox" value="yes" class="mktoField">As a workaround, here's some jQuery to reassign the for attribute of any label that points to an id that doesn't exist. However, it would be good if we didn't have to use JavaScript to fix a bug ;)
$('label').each(function() {
$label = $(this);
var labelFor = $label.attr('for');
if (!$('#' + labelFor).length) {
$label.attr('for', $('[name="' + labelFor + '"]').attr('id'));
}
});