search

KarimMokhtar / react-drag-drop-files

Light and simple Reactjs drag and drop files library to use with very flexible options to change, so you put whatever the design you want for your drop-area. Users can drag and drop or even select the file anywhere in the window.
MIT License
248 stars 91 forks source link

Incorrect use of <label for=FORM_ELEMENT> warning #122

Closed Entropiks closed 2 weeks ago

Entropiks commented 1 year ago

Problem It seems that the input returned by the <FileUploader /> does not have a matching id to it's parent label prompting a warning from issues on chrome. Since the input and label are not exposed, this change should be a global fix in the repo.

react-drag-drop-bug

Error Message ( Chrome Issues Tab ) Incorrect use of

Browser Chrome Version 113.0.5672.127 (Official Build) (64-bit)

Fix The label returned from should have a for="file" prop that matches the labels input id="file" property.

Resource https://www.w3schools.com/tags/att_label_for.asp https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for

picasocro1 commented 1 year ago

I confirm the bug - I tried to write tests using Testing Library and finished with the following error:

Found a label with the text of: Upload files, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.

KarimMokhtar commented 2 weeks ago

solved in https://github.com/KarimMokhtar/react-drag-drop-files/pull/131 you can use v. 2.3.11