leomurca/embroidery-viewer
leomurca/embroidery-viewer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make dropzone accesible through tab nav

Browse source
This commit is contained in:
Leonardo Murça 2022-11-11 10:40:32 -03:00
parent a0da45792a
commit ed45b6e545
1 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/lib/Counter.svelte
View file

@ -76,7 +76,9 @@ function handleOnClick(evt) {
} }
function handleOnKeydown(evt) { function handleOnKeydown(evt) {
console.log(evt) if (evt.key === "Enter") {
document.getElementById("file-input").click();
}
} }
</script> </script>
@ -88,7 +90,8 @@ function handleOnKeydown(evt) {
<h2>Upload files</h2> <h2>Upload files</h2>
<p>Max file size is <strong>{maxFileSize/1000}kb</strong>. Accepted formats: <strong>{acceptedFiles.join(",")}</strong>.</p> <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> <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 /> <input id="file-input" type="file" name="files[]" accept={acceptedFiles.join(",")} multiple on:change={onChangeFileHandler} bind:files />
</div> </div>