JedWatson / JedWatson/react-select
Incorrect user of <label for=FORM_ELEMENT>
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Dependencies:
- "react": "^18.2.0"
- "react-dom": "^18.2.0"
- "react-hook-form": "^7.51.5"
- "react-router-dom": "^6.22.3"
- "react-select": "^5.8.0"
I use the element label with the Select component. In the log I read:
The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.
To fix this issue, make sure the label's for attribute references the correct id of a form field.
Then I found that the Select component has an id and an inputId property. The first is set to the container, the latter to the search input (?).
Is there a way to fix this issue?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the warning with a label and the Select component, comparing the component's id and inputId props with the rendered form field. Confirm which prop should correspond to the label's for value, then verify that the warning disappears and accessibility behavior is preserved.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100