Accessibility issues with <Dropzone> ?

[bradenmacdonald]

When using the Dropzone component in tests, its internal <input type="file"> control does not appear to JSDom as an element with a role, and cannot be selected for testing using the getByRole() selector. I would expect it could be selected with something like getByRole('button', { name: "Choose file" }).

In Chrome, the internal input gets a role=button and implicit name Choose File supplied by the browser.

In Firefox, the internal input gets a role=button and implicit name Browse… … supplied by the browser.

Should these be standardized by giving our internal input an explicit accessible name (e.g. aria-label) and role=button ? That would likely resolve the issue where JSdom isn't giving it a role, and allow us to use proper accessible queries in test code.

⚠️ Also, Firefix is giving a11y warnings on both the input ("Interactive elements must be focusable") and the parent div ("Focusable elements should have interactive semantics").