Labels are not connected to inputs in code examples

[Kolombiken]

The Problem

When using a screenreader the labels for the inputs are not announced since they are not connected to the form-fields. This means that forms are very hard to fill in for screenreader-users. I.e. one tested input filled with a label "first name" was announced as "edit text". This is a problem because people do copy/paste code examples and might not correct this in their applications.

Steps to Reproduce

Try https://codepen.io/davidkpiano/pen/yJwmEa with a screenreader. Using Mac this can be tested with VoiceOver and Safari.

Expected Behavior

Labels should be connected to inputs via the for-attribute that connects to the id on the input (explicit label) or wrapped around the input (implicit label) More info on accessible forms

Actual Behavior

Labels are missing the for-attribute and are not connected to an id on the input

Reproducible Code Example

this CodePen template is a good example :)

[davidkpiano]

Hmm, I'm wondering if the responsibility of this should fall on the developer rather than the library. It's easy enough to do this:

<label forHtml="user.name">User name</label>
<Control.text id="user.name" model="user.name" />

Or this:

<label>
  <span>User name:</span>
  <Control.text model="user.name" />
</label>

Both would solve the issue. What are your thoughts?

[davidkpiano]

Alternatively, it might be useful to have this automatically be done with a new component:

<div className="field">
  <Label model="user.name">User name:</Label>
  <Control.text model="user.name" />
</div>

^ This will also allowed it to be used in React Native, where tapping the label would "focus" the text input, much like how it works on the web. How does this look?

[Kolombiken]

Thank you for attending to this issue so quickly!
I agree. It is quite easy to do this for the developer BUT I've seen enough applications built in React to know that people do not do this. Lack of awareness/knowledge is usually the reason. So good examples in documentation are super-needed here!
I think if either of the things you suggest are implemented it would help greatly 😄