final-form / final-form/react-final-form

The <label> elements in examples are not connected to their fields

Open
#401 7 comments 7 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.