Accessibility issues with <Dropzone> ?

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").

Locate the Dropzone component from the linked documentation and reproduce its file-input behavior in JSDOM using the reported getByRole query. Check the input and parent div in Firefox for the reported accessibility warnings; done means the control has a stable accessible name and appropriate semantics, with tests covering the accessible query.