[BUG] Using Dropzone with an interactive element inside causes accessibility violation

Describe the bug If you use the Dropzone component with an interactive element inside of it, such as a button used in the “Opening File Dialog Programmatically” example, it will cause an a11y issue because you have nested interactive elements. In the case of this example, it’s a <div role="button"> around a <button> but the same will be true if you use a link instead.

To Reproduce Steps to reproduce the behavior:

1. The react-dropzone doc site and go to the Opening File Dialog Programmatically example.
2. Right click the “Open File Dialog” button in the example and inspect the element.

Alternatively, you can run Axe (https://www.deque.com/axe/browser-extensions/) on the same example.

Expected behavior There are no nested interactive elements and no accessibility violations.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome, but it’ll be the same in any browser
• Version: 99.0.4844.51

[emilyuhde]

A possible solution would be adding a valid override to this example, if having the default role of “button” is the most common case.

<div {...getRootProps({role: 'presentation'})}>

[github-actions[bot]]

🎉 This issue has been resolved in version 14.0.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀