Как выполнить индексирование элемента с непрозрачностью 0

Question

У меня есть поле загрузки с перетаскиванием изображений, где я установил поле ввода с непрозрачностью 0, чтобы кнопка загрузки не отображалась, поэтому я могу стилизовать ее под макет. Тем не менее, я пытаюсь решить проблемы доступности, вызывая запуск функции загрузки, когда пользователь нажимает ввод.

Проблема, с которой я сталкиваюсь, заключается в том, что при установке непрозрачности на 0 устанавливается непрозрачность элемента. Я все еще могу нажать Enter, чтобы загрузить файл, и это прекрасно работает, но у пользователя нет индикатора, чтобы он знал, есть ли у него опция.

Есть ли хороший способ исправить это?

Вот небольшой пример того, что я делаю:

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;
}

Answer 1

Это должно позволить вам щелкнуть по пользовательскому кружку с текстом, чтобы открыть файл ввода. Это также позволяет вам переходить к нему, и отображается визуальный сигнал, указывающий, что элемент находится в фокусе.

.imageUploader {
    width: 120px;
    height: 122px;
    background-color: #F4F6FC;
    border-radius: 100px;
    text-align: center;
    font-size: 14px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
}

.upload {
  opacity: 0;
  position: absolute;
  width: 122px;
  height: 122px;
  border-radius: 100px;
}

.upload:focus + .imageUploader {
     border:1px solid #4D90FE;
}

<div>
    <input id="inputID" class="upload" type="file" accept="image/*">
    <label for="inputID" class="imageUploader">Drop your photo here or upload a file</label>
</div>