Я хочу обрабатывать как щелчки мыши, так и ввод клавиатуры / пробела на клавиатуре, содержащей невидимый ввод файла

Question

В целях стилизации я обернул элемент ввода файла внутри метки и сделал элемент ввода невидимым с помощью display: none.

Я хочу, чтобы оба:

1. Be возможность щелкнуть метку, чтобы открыть диалоговое окно выбора файла.
2. иметь возможность перейти на метку и нажать клавиши «пробел» или «ввод», чтобы открыть диалоговое окно выбора файла.
3. I Я также хочу иметь возможность перетаскивать файлы и текст, но у меня это работает, и я опущу это из этого вопроса для простоты.

(1) работает, если я использую label wrapper, но не делает, если я использую button оболочку. С другой стороны, (2) работает с оболочкой button, но не с оболочкой label.

Я понимаю, что могу просто использовать label и добавить keydown слушателей. Точно так же я мог бы использовать button и добавить click слушателя. Но это похоже на хаки. Поэтому мне интересно, есть ли более чистый способ передачи событий от оболочки к невидимому input.

let $ = document.querySelector.bind(document);

$('label').addEventListener('keypress', e => 
  [' ', 'Enter'].includes(e.key) && $('label input').click());

$('button').addEventListener('click', () => 
  $('button input').click());

input {
  display: none;
}

<div>
  <label tabindex="0">
    <input type=file>
    File input inside a label.
  </label>
</div>

<div>
  <button>
    <input type=file>
    File input inside a button.
  </button>
</div>