I have a file input, with a label. I wish to be able to open the file browser in four different ways:
- Clicking the file input button
- Tabbing to the file input button and hitting enter
- Clicking the file input label
- Tabbing to the file input label and hitting enter
However, only options 1-3 work out of the box? Is this a bug, or an intended feature? I’m currently working on FireFox v106.0.5
Are there any solutions out there that rely solely on HTML/CSS, or is JS required to fix the issue?
<label for="file_input" tabindex="0"> Label </label> <input type="file" id="file_input">
Advertisement
Answer
Naturally, the input
opens a dialog when it receives click or enter.
The label
itself does not open a dialog, but when clicked (or tapped), it can passes the focus to its associated input, and a dialog is opened as a result.
It does not do the same when it receives enter, thus the situation 4 in your question does not work.
This is because the purpose of this design is to increase the hit size for the associated input
, especially for user on a touch-screen device.
So to answer the question, it is an intended feature.