Accessibility for customized file input

I have this kind of customized file input:

#file-uploader {
  display: none
  }

<input type="file" id="file-uploader" multiple accept=".stl"/>
<label for="file-uploader" role="button" aria-labelledby="drop-file-instructions" tabIndex=0>
  Add files
</label>

I simplified this a lot for the sake of readability, but the problem remains: In this accessibility tree, the label is well detected as a button and focusable but the only way to trigger the file selector is by clicking on the button.

Does anyone have a solution to trigger this by keyboard ?

edit: this is a from a react project, so any react solution is fine with me too

You need to sign in to view this answers