Incorrect use of <label for=FORM_ELEMENT>

[syzexecutive]

Is there an existing issue for this?

• [x] I have searched the existing issues

Have you updated FilePond and its plugins?

• [x] I have updated FilePond and its plugins

Describe the bug

Incorrect use of label for=FORM_ELEMENT

Chrome Issues shows this error. I think it's because FilePond creates a DIV with "filepond--drop-label" class and puts the label for the file input inside it. Shouldn't the label and input be together?

Reproduction

FilePond sets file input class to filepond--browser and sets random id for it and creates a DIV with "filepond--drop-label" class and puts the label for the file input inside it.

Issues tab on Chrome:

Environment

- Device: PC
- OS: Windows 11
- Browser: Chrome 116

[rikschennink]

It points to an input, I don't see what's wrong with that?

[syzexecutive]

Yes, it points, but Chrome issues tab shows this error! How can I solve this? I have nothing special in FilePond config and configured with basics.

[rikschennink]

@syzexecutive Perhaps it's a Chrome bug, I wouldn't worry about it.

[CelticParser]

It is not a Chrome bug. form and id need to match and they do not. This error (recently) shows differently in various browsers.

This causes uploading reliability and accessibility issues.

[rikschennink]

@CelticParser But they do seem to match up?

[simonmaass]

very weird... I get the same error... but not everytime...

[rikschennink]

Seems like a bug in Chrome? The id is clearly there.