HTML <label> with for=DIV-ID to focus a contenteditable div (does label <label> only support form elements?)

Question

Given that HTMLInputElement, HTMLSelectElement and HTMLTextAreaElement all directly inherit HTMLElement (and not something common, like a HTMLFormElement), I'd expect that <label> would be able to focus non-field elements such as a <div>.

However, the code example below shows a <label> correctly focusing a <textarea>, but requires a JS hack (used jQuery in the example) to focus the contenteditable <div>.

Is there a published list of elements that <label> works with? Or any documentation that discusses the usage of with contenteditable <div>s? Am I missing something, maybe JS is not needed to focus the contenteditable <div>?

<div>
  <label for="textarea-id" style="font-weight:bold;">Label Text Area</label><br>
  <textarea id="textarea-id">
Editable text
  </textarea>
</div>

<div style="margin-top:20px">
  <label for="contenteditable-id" id="label-for-div-id" style="font-weight:bold;">Label Editable Div</label><br>
  <div id="contenteditable-id" contenteditable="true" style="border:solid 1px black">
    <p>
      <span>Edtiable text</span>
    </p>
  </div>
</div>
<script>
$(function() {
  $('#label-for-div-id').on('click', function() {
    $('#' + $(this).attr('for')).focus();
  })
})
</script>

Posted at https://jsfiddle.net/jkvsd03y/5/

Answer 1

<label> elements can be associated to labelable elements.

From the label Element doc:

for

The id of a labelable form-related element in the same document as the element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. If it is not labelable then the for attribute has no effect. If there are other elements which also match the id value, later in the document, they are not considered.

From the Content Categories doc:

labelable

Elements that can be associated with <label> elements. Contains <button>, <input>, <keygen>, <meter>, <output>, <progress>, <select>, and <textarea>.

Answer 2

I was going to post about labelable elements - but was late. Though, here I'm just placing for providing it full:

labelable

Elements that can be associated with <label> elements. Contains <button>, <input>, <keygen>, <meter>, <output>, <progress>, <select>, and <textarea>.

Note that keygen is deprecated.

What's new in my answer? Well, I did a little hack:

<a href="#contenteditable-id">
  <label for="contenteditable-id" id="label-for-div-id" style="font-weight:bold;">
    Label Editable Div
  </label>
 </a>
<div id="contenteditable-id" contenteditable="true" style="border:solid 1px black">
    <p>
      <span>Edtiable text</span>
    </p>
 </div>