Skip to content

Commit d01d097

Browse files
committed
fix(FileDropArea): fix aria role warning
1 parent 58b599f commit d01d097

File tree

1 file changed

+25
-26
lines changed

1 file changed

+25
-26
lines changed

components/custom/FileDropArea/FileDropArea.svelte

+25-26
Original file line numberDiff line numberDiff line change
@@ -73,36 +73,35 @@ form > * {
7373
}
7474
</style>
7575

76-
<div
76+
<form
7777
id="drop-area"
78-
class="br-8px {$$props.class || ''}"
78+
class="br-8px flex justify-between align-items-center py-1 px-1 {$$props.class || ''}"
7979
class:highlighted
8080
on:dragenter|preventDefault|stopPropagation={highlight}
8181
on:dragleave|preventDefault|stopPropagation={unhighlight}
8282
on:dragover|preventDefault|stopPropagation={highlight}
8383
on:drop|preventDefault|stopPropagation={handleDrop}
84+
class:column={!isAboveMobile()}
8485
>
85-
<form class="flex justify-between align-items-center my-1 px-1" class:column={!isAboveMobile()}>
86-
{#if !uploading}
87-
<input
88-
bind:this={fileInput}
89-
type="file"
90-
id="fileElem"
91-
multiple
92-
accept={mimeType}
93-
disabled={uploading}
94-
on:change={() => handleFiles(fileInput.files)}
95-
/>
96-
{/if}
97-
<label
98-
class="mdc-button m-8px"
99-
for="fileElem"
100-
class:custom-text-button={raised}
101-
class:mdc-button--outlined={outlined}
102-
class:disabled={uploading}
103-
class:mdc-button--raised={raised}>Choose files</label
104-
>
105-
<div class="m-8px">or drop files here</div>
106-
<i class="material-icons icon m-8px" id="upload-icon">cloud_upload</i>
107-
</form>
108-
</div>
86+
{#if !uploading}
87+
<input
88+
bind:this={fileInput}
89+
type="file"
90+
id="fileElem"
91+
multiple
92+
accept={mimeType}
93+
disabled={uploading}
94+
on:change={() => handleFiles(fileInput.files)}
95+
/>
96+
{/if}
97+
<label
98+
class="mdc-button m-8px"
99+
for="fileElem"
100+
class:custom-text-button={raised}
101+
class:mdc-button--outlined={outlined}
102+
class:disabled={uploading}
103+
class:mdc-button--raised={raised}>Choose files</label
104+
>
105+
<div class="m-8px">or drop files here</div>
106+
<i class="material-icons icon m-8px" id="upload-icon">cloud_upload</i>
107+
</form>

0 commit comments

Comments
 (0)