feat(*): Improve accessibility

This commit is contained in:
Josh Creek
2025-04-17 00:00:36 +01:00
parent 9e5a79f024
commit f7ce48ded0
3 changed files with 22 additions and 18 deletions
+5 -4
View File
@@ -104,23 +104,24 @@ async function handleSubmit(event: Event) {
<h1 class="text-2xl font-bold mb-4">Upload Student Submissions</h1>
<p class="mb-6">Upload student assignments for instant AI-powered assessment and feedback.</p>
{#if errorMsg}
<div class="mb-4 p-3 border border-red-300 bg-red-50 text-red-700 rounded">
<div class="mb-4 p-3 border border-red-300 bg-red-50 text-red-700 rounded" aria-live="assertive" role="alert">
<strong>Error:</strong> {errorMsg}
</div>
{/if}
{#if submitting}
<div class="absolute inset-0 flex flex-col items-center justify-center bg-white bg-opacity-80 z-20">
<svg class="animate-spin h-10 w-10 text-blue-600 mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" role="status">
<div class="absolute inset-0 flex flex-col items-center justify-center bg-white bg-opacity-80 z-20" role="status" aria-busy="true" aria-live="polite" tabindex="-1">
<svg class="animate-spin h-10 w-10 text-blue-600 mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
</svg>
<span class="sr-only">Loading...</span>
<span class="text-blue-700 font-semibold">Grading in progress...</span>
</div>
{/if}
<form class="space-y-6" on:submit|preventDefault={handleSubmit}>
<div class="mb-4">
<label class="block mb-1 font-semibold" for="task">Task/Assignment Description <span class="text-red-500">*</span></label>
<textarea id="task" class="w-full border rounded p-2" rows="2" bind:value={taskDescription} required disabled={submitting}></textarea>
<textarea id="task" class="w-full border rounded p-2" rows="2" bind:value={taskDescription} required aria-required="true" aria-label="Task or Assignment Description" disabled={submitting}></textarea>
</div>
<div class="mb-4">
<label class="block font-semibold mb-1" for="file">Upload a file (PDF, DOCX, TXT):</label>