[5.1] [A11y] incorrect use of label for attribute

[hans2103]

Steps to reproduce the issue

When declaring a field with type = radio and layout = joomla.form.field.radio.switcher you end up with an inproper use of the for attribute in the label.

The following block of code is the copied HTML of the Featured toggle on the edit page of an com_content item.

<div class="control-group">
    <div class="control-label">
        <label id="jform_featured-lbl" for="jform_featured">
            Featured
        </label>
    </div>
    <div class="controls">
        <fieldset id="jform_featured">
            <legend class="visually-hidden">
                Featured
            </legend>
            <div class="switcher">
                <input type="radio" id="jform_featured0" name="jform[featured]" value="0" checked="" class="active ">
                <label for="jform_featured0">No</label>
                <input type="radio" id="jform_featured1" name="jform[featured]" value="1">
                <label for="jform_featured1">Yes</label>
                <span class="toggle-outside">
                    <span class="toggle-inside"></span>
                </span>
            </div>
        </fieldset>
    </div>
</div>

Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>.

According to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Expected result

In this case the legend fills the need for an accessible label so I think you could just remove the label element and leave it as a div or span.

Actual result

System information (as much as possible)

Additional comments

[brianteeman]

If I remember correctly the control-label element (which includes the label) exists because of the way that we often render fields without using a layout so it was maintained in the layout otherwise the page layout is broken.

badly explained but I hope that helps

[hans2103]

If I remember correctly the control-label element (which includes the label) exists because of the way that we often render fields without using a layout so it was maintained in the layout otherwise the page layout is broken.

badly explained but I hope that helps

correct... think we have to add PHP logic to conditional use <label> or just a <div> instead. Adding complexity to solve invalid use of HTML.

[brianteeman]

Adding complexity to solve invalid use of HTML.

is it worth it?

[hans2103]

Good question. Only worth if we want 100% proper HTML. This issue does not cause any harm if we leave it as is.

[dgrammatiko]

FWIW browsers rolling a new element 'switch', more info here: https://webkit.org/blog/15054/an-html-switch-control/

[hans2103]

FWIW browsers rolling a new element 'switch', more info here: https://webkit.org/blog/15054/an-html-switch-control/

That's a nice new attribution. From which % of global users, according to caniuse.com, will Joomla make the jump?

[chmst]

Only worth if we want 100% proper HTML. This issue does not cause any harm if we leave it as is.

Just got the error when checking a form with WAVE and IBM accessibility assessment, both mark it as Error. Probably a screnreader will read the label twice. EDIT: I used an own overlay for a checkbox, so this is not relevant here.

But we should keep an eye on this.