Select: clicking <label> should focus associated widget

[[email protected]…]

Solution for #18471 ticket is not what I expected.

I was demonstrating missing focus functionality. If user click on the label, it must focus the select field. This functionality is missing because id is assigned to the widget, not to the select element.

Correct HTML behaviour.

        <label for="foo_label">Label</label>
        <select id="foo_label" >
            <option selected value="1">Item 1</option>
            <option value="2">Item 2</option>
        </select> 

[bill]

OK, you didn't write that at all in the summary or description of #18471. For the future, please use the "summary" field to list a summary of the problem, not just keywords.

As I wrote in #18471, the correct markup to label a Select is:

<span id="foo_label">Label</span>
<select id="foo" data-dojo-type="dijit/form/Select" aria-labelledby="foo_label">
   ...
</select>

I suppose we (or you) could set up a global listener to notice clicks on nodes associated with aria-labelledby nodes. Not sure if it's worth it. Deliteful/Combobox? has similar code for catching clicks on <label> nodes:

// The fact that deliteful/Checkbox is not an HTMLInputElement seems not being compatible with the default
// "<label for" behavior of the browser. So it needs to explicitly listen to click on associated
// <label for=...> elements.
if (!labelClickHandler) {
        // set a global listener that listens to click events on label elt
        labelClickHandler = function (e) {
                var forId;
                if (/label/i.test(e.target.tagName) && (forId = e.target.getAttribute("for"))) {
                        var elt = document.getElementById(forId);
                        if (elt && elt.render && elt._lbl4 !== undefined) { //_lbl4: to check it's a checkbox
                                // call click() on the input instead of this.toggle() to get the 'change' event for free
                                elt.focusNode.click();
                        }
                }
        };
        this.ownerDocument.addEventListener("click", labelClickHandler);
}

[[email protected]…]

I was testing your solution before and it didnt work. If I clicked on label, no focus was set to select and I wasn't able to use keys as navigation in select.

[dylan]

Given that no one has shown interest in creating a patch in more than a year, I'm closing this as patchwelcome. Please let us know if you would like to get involved in helping make this change to Dojo!