I have created a drag and drop image upload field with a hidden input element to style the upload button according to the design. However, I am concerned about accessibility and want the upload functionality to trigger when the user presses 'Enter' key.
The issue I'm facing is that due to setting opacity to 0, the field does not focus when tabbed to. While pressing 'Enter' still uploads the file, there is no visual indicator for users to see the option available to them.
Is there a solution to address this usability concern?
Below is a brief example of my setup:
HTML:
<div class="imageUploader">
<input class="upload" type="file" accept="image/*">
<p class="text"> Drop your photo here or upload a file</p>
</div>
CSS:
.imageUploader {
width: 120px;
height: 122px;
background-color: #F4F6FC;
display: inline-block;
border-radius: 100px;
vertical-align: bottom;
text-align: center;
position: relative;
}
.image {
opacity:0;
width: 100%
height: 120px;
cursor: pointer;
position: absolute;
left: 0;
}
.text {
position: absolute;
top: 30%;
font-size: 14px;
}