{#each value as fileObj, index (index)}
handleDragStart(e, index)}
on:dragover={handleDragOver}
on:drop={(e) => handleSquareDrop(e, index)}
on:dragend={handleDragEnd}
on:keydown={(e) => {
if ((e.key === 'Enter' || e.key === ' ') && interactive && fileObj) {
e.preventDefault();
// Handle keyboard activation (same as click)
console.log('File activated via keyboard:', getFileName(fileObj));
}
}}
role="button"
tabindex={interactive && fileObj ? 0 : -1}
aria-label={`Audio file ${index + 1}: ${getFileName(fileObj)}`}
>
{#if interactive}
{/if}
{getFileName(fileObj)}
{#if interactive}
{/if}
{/each}
{#if interactive}
handleFileDrop(e)}
>
handleFileChange(e)}
/>
{/if}
{#if value.length === 0}
{interactive ? "Drag & drop audio files or click to browse" : "No audio files"}
{/if}