final-form / final-form/react-final-form
The <label> elements in examples are not connected to their fields
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
In the example in the readme, as well as some (all?) codesandbox examples (such as https://codesandbox.io/s/yk1zx56y5j), use markup like this:
```
Label
```
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:
```
Label
```
Or nesting (might require slightly changing styles):
```
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.)
Contributor guide
Research direction
Start with the example in the README and inspect the linked CodeSandbox example for label and Field markup. Update the examples so each label is connected to its field, then verify that clicking the label focuses the field and that the examples no longer demonstrate inaccessible form markup.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, documentation, frontend
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100