Rendez l'étiquette de fichier de téléchargement accessible par la barre d'espace et entrez

Question

J'essaie de créer une page de téléchargement accessible au clavier en utilisant angulaire 2. J'ai du mal à activer "Choisir un fichier à télécharger" en utilisant la barre d'espace et entrer les touches. Je suis capable de télécharger des fichiers en cliquant sur l'étiquette.

<label for="files" > Choose a file to upload </label> 
<input type="file" id="files" (click)="upload($event)"/> 

L'affichage de l'entrée est aucun et j'utilise l'étiquette pour permettre aux utilisateurs de choisir le fichier à télécharger. J'ai essayé onkeypress, keyup et keydown mais je ne suis pas capable de rendre le clavier accessible pour l'étiquette.

Answer 1

J'ai eu le même problème; Je viens d'ajouter un gestionnaire de touches à l'étiquette pour déclencher un clic si l'espace ou la touche Entrée est enfoncé.

Here's a working Plunkr.

HTML (ne pas oublier le tabindex="0"):

<label class="btn" for="files" tabindex="0" (keypress)="onUploadLabelClick($event)">Choose a file to upload</label> 
<input class="hiddenFileUpload" type="file" id="files" (click)="upload($event)"/> 

fonction pertinente:

onUploadLabelClick(evt): void { 
    var keyCode = evt.which || evt.keyCode; 
    if (keyCode === 13 || keyCode === 32) { 
     $(evt.target).click(); 
     evt.preventDefault(); 
    } 
} 

J'utilise JQuery ici, mais il est assez simple de faire la même chose avec JS pur évidemment.