The <label> elements in examples are not connected to their fields
See original GitHub issueIn the example in the readme, as well as some (all?) codesandbox examples (such as https://codesandbox.io/s/yk1zx56y5j), use markup like this:
<div>
<label>Label</label>
<Field />
</div>
But that doesn’t connect the label to the field. Most notably, it’s not possible to click the label text to focus the field. And I guess screen readers won’t announce what the fields are for.
To connect a label to a field, you can either use IDs:
<div>
<label for="myfield">Label</label>
<Field id="myfield" />
</div>
Or nesting (might require slightly changing styles):
<label>
<span>Label</span>
<Field />
</label>
People often copy-paste from examples, so I think it would be nice if they don’t include this mistake.
Thanks!
(This is probably a good first issue for aspiring contributors.)
Issue Analytics
- State:
- Created 5 years ago
- Reactions:7
- Comments:7 (4 by maintainers)
Top Results From Across the Web
15. Label is not connected to a form control | Accessibility at UH
How to fix it: When using the 'label' it must be explicitly connected to a form control, such as an input field, a...
Read more >The Label element - HTML: HyperText Markup Language | MDN
The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that ......
Read more >Labeling Controls | Web Accessibility Initiative (WAI) - W3C
Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by...
Read more >Form <input> elements must have labels | Axe Rules
Lastly a placeholder attribute may be used to give text inputs an accessible name. This is not a recommended solution as the visual...
Read more >Explicit and Implicit Form Labels - CCC Accessibility Center
For example, the Button element uses the content of the button as a label. The input type equals hidden requires no label, as...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
First issue I hit when I came to final-form. Is there a way to “auto-id” and set the “for” to be that?
What I did was
useMemo
with an empty array so it never recalculates the id - https://stackoverflow.com/q/55309140/1828637I don’t like it. I hoped that the form lib would take care of this for us.