Fixed Labels for custom fields are not associated with their inputs

[36degrees]

Affected version

v2.2.4

The labels for custom fields are not associated with their inputs using the for attribute.

For example, this is the markup for a custom field for a user's country:

<dl class="formRow formRow--customField formRow--input" data-field="country">
    <dt>
        <div class="formRow-labelWrapper">
        <label class="formRow-label">Country</label></div>
    </dt>
    <dd>
        <select name="custom_fields[country]" class="field_country input">
            <option value="" selected="selected">&nbsp;</option>
            <!-- Options omitted for brevity -->
        </select>
    </dd>
</dl>

Compare this to the markup for the 'built in' location field, which does include the for attribute (for="_xfUid-8-1618071982"):

<dl class="formRow formRow--input">
    <dt>
        <div class="formRow-labelWrapper">
        <label class="formRow-label" for="_xfUid-8-1618071982">Location</label>
        <dfn class="formRow-hint">Required</dfn></div>
    </dt>
    <dd>
        <input type="text" class="input" name="location" required="true" id="_xfUid-8-1618071982">
    </dd>
</dl>

This means that custom fields do not have an accessible name. This seems to affect custom fields for (at least) users, threads and XMFG media fields.

 

[XF Bug Bot]

Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.2.5).

Change log:

When editing custom field values, ensure that labels are associated with the related input for accessibility purposes.

There may be a delay before changes are rolled out to the XenForo Community.