Changes between Initial Version and Version 1 of Ticket #18550


Ignore:
Timestamp:
Apr 9, 2015, 10:39:58 PM (5 years ago)
Author:
bill
Comment:

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);
}

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #18550

    • Property Type changed from defect to enhancement
    • Property Summary changed from 18471 opened to Select: clicking <label> should focus associated widget
  • Ticket #18550 – Description

    initial v1  
    1 Solution for 18471 ticket is not what I expected.
     1Solution for #18471 ticket is not what I expected.
     2
    23I 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.
    34
    45Correct HTML behaviour.
    56
     7{{{
    68        <label for="foo_label">Label</label>
    79        <select id="foo_label" >
    810            <option selected value="1">Item 1</option>
    911            <option value="2">Item 2</option>
    10         </select>   
     12        </select>
     13}}}