From ed45b6e54510d8dc659c550cb391d200e47fead7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Fri, 11 Nov 2022 10:40:32 -0300
Subject: [PATCH] Make dropzone accesible through tab nav

---
 src/lib/Counter.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/lib/Counter.svelte b/src/lib/Counter.svelte
index c090a9c..dc2d4b7 100644
--- a/src/lib/Counter.svelte
+++ b/src/lib/Counter.svelte
@@ -76,7 +76,9 @@ function handleOnClick(evt) {
 }
 
 function handleOnKeydown(evt) {
-  console.log(evt)
+  if (evt.key === "Enter") {
+    document.getElementById("file-input").click();
+  }
 }
 </script>
 
@@ -88,7 +90,8 @@ function handleOnKeydown(evt) {
   <h2>Upload files</h2>
   <p>Max file size is <strong>{maxFileSize/1000}kb</strong>. Accepted formats: <strong>{acceptedFiles.join(",")}</strong>.</p>
 
-  <div id="dropzone" on:keydown={handleOnKeydown} on:click={handleOnClick} on:dragover={handleDragOver} on:drop={onDropHandler}>
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div id="dropzone" tabindex={0} on:keydown={handleOnKeydown} on:click={handleOnClick} on:dragover={handleDragOver} on:drop={onDropHandler}>
     <label id="file-label" for="file-input">Drag and drop files here or click to upload.</label>
     <input id="file-input" type="file" name="files[]" accept={acceptedFiles.join(",")} multiple on:change={onChangeFileHandler} bind:files />
   </div>