Passed react component is failing on accessibility unit test for form label?

Home / Uncategorized / Passed react component is failing on accessibility unit test for form label?

Question:
my reusable component looks like this `jsx
return


works perfectly fine, but the problem is the its failing tests for accessibility

Its saying I am missing a label
Sniffybara::PageNotAccessibleError:Form elements must have labels

Elements: Answer:
for needs the id, not the name, of the input. So if you’re setting the id via id={id || name} on the input, you need to set htmlFor the same way: htmlFor={id || name} on the label.

Of course, you have the other option: Putting the input inside the label. Then you don’t need for or an id on the input (for this; you may need the id for something else). But whether you can do that depends on your styling.
Read more

Leave a Reply

Your email address will not be published. Required fields are marked *