feat: add required prop & dropzone keyboard focus indicator (#93) - Githubissues

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

245 stars 86 forks source link

feat: add required prop & dropzone keyboard focus indicator (#93) #94

Closed KieranGreenwood closed 1 year ago

KieranGreenwood commented 1 year ago

Summary

Improved keyboard support for accessibility. And added basic required support.

I use the FileUploader component to push multiple files into an array. If users don't submit any files, I want the form to be invalid.

Example:

<FileUploader required={filesArray.length === 0} />

When no files are submitted into the array, length is 0, mark the field as required and prevent progression (the input field itself has no value).
When there are files in the array, remove the required attribute allowing progression.

Key Changes

ability to toggle input required attribute
improves accessibility by allowing the drop-zone to receive keyboard focus and show a visible focus indicator.

Check List

[x] The changes to the "Readme" file(if needed)
[x] The changes not breaking any old rule of the library or usage