Possibility to set 'id' attribute

[smelamud]

It is not possible currently to set the id attribute of Combobox, NumberPicker etc. Because of that, it is not possible to link a <label> to them using htmlFor attribute.

[jquense]

Why is it not possible? It should be possible, are you staying that passing an I'd doesn't end up anywhere?

[smelamud]

Exactly.

[JohnAlbin]

This is a critical accessibility bug. If we set a id value on a widget, we expect that value to be used in an id attribute in its outputted HTML.

Setting the id of a DropdownList to myID produces the following initial HTML:

<div
  role="combobox"
  id="myID_input"
  aria-owns="myID_listbox"
  aria-controls="myID_listbox"
  aria-expanded="false"
  aria-haspopup="listbox"
  aria-busy="false"
  aria-autocomplete="list" 
  aria-disabled="false" 
  aria-readonly="false" 
  tabindex="-1" 
  data-intent="mouse" 
  class="rw-dropdown-list rw-widget"
>
  <div tabindex="-1" class="rw-widget-input rw-widget-picker rw-widget-container">
    <div class="rw-dropdown-list-input">
      <input name="myName" tabindex="-1" aria-hidden="true" class="rw-detect-autofill rw-sr" value="">
      <input class="rw-dropdownlist-search" autocomplete="off" size="2" value="">
      <span class="rw-dropdown-list-value"></span>
    </div>
    <span aria-hidden="true" class="rw-btn rw-picker-caret"></span>
  </div>
</div>

As you can see it uses a id="myID_input" on the wrapping div. And it uses id="myID_listbox" on the dropdown (once it appears), but no HTML element uses id="myID".

[JohnAlbin]

If you look at how labels behave on built-in HTML inputs, you'll see that clicking on the label will shift the user focus to the input element. For example, clicking a checkbox's label will check the checkbox and make it focused and clicking a text input's label will make the text input focused.

That means the proper fix for the DropdownList is for the <input class="rw-dropdownlist-search" autocomplete="off" size="2" value=""> element to get the DropdownList's id attribute.