feat(*): Improve accessibility

src/lib/components/AssessmentHistory.svelte

@@ -13,14 +13,14 @@
   <section class="mt-12">
     <h2 class="text-lg font-bold mb-4 text-gray-700">Assessment History</h2>
     <div class="overflow-x-auto">
-      <table class="min-w-full border text-sm rounded">
+      <table class="min-w-full border text-sm rounded" aria-label="Assessment history table">
         <thead class="bg-gray-100">
           <tr>
-            <th class="py-2 px-3 border-b text-left">Date</th>
-            <th class="py-2 px-3 border-b text-left">Task/Assignment</th>
-            <th class="py-2 px-3 border-b text-left">Grade</th>
-            <th class="py-2 px-3 border-b text-left">Actions</th>
-            <th class="py-2 px-3 border-b text-left">Delete</th>
+            <th scope="col" class="py-2 px-3 border-b text-left">Date</th>
+            <th scope="col" class="py-2 px-3 border-b text-left">Task/Assignment</th>
+            <th scope="col" class="py-2 px-3 border-b text-left">Grade</th>
+            <th scope="col" class="py-2 px-3 border-b text-left">Actions</th>
+            <th scope="col" class="py-2 px-3 border-b text-left">Delete</th>
           </tr>
         </thead>
         <tbody>
@@ -31,7 +31,7 @@
               <td class="py-1 px-3">{entry.grade}</td>
               <td class="py-1 px-3">
                 <details>
-                  <summary class="cursor-pointer text-blue-600 hover:underline">View</summary>
+                  <summary class="cursor-pointer text-blue-600 hover:underline" aria-label="View details for assessment on {new Date(entry.timestamp).toLocaleString()}">View</summary>
                   <div class="mt-2 p-2 bg-gray-50 rounded">
                     <div class="mb-1"><span class="font-semibold">Submission:</span> <span class="whitespace-pre-line">{entry.submission}</span></div>
                     <div class="mb-1"><span class="font-semibold">Strengths:</span> {entry.strengths}</div>
@@ -40,14 +40,14 @@
                     <div class="mb-1"><span class="font-semibold">Reflection Question:</span> {entry.reflection_question}</div>
                     <div class="mb-1"><span class="font-semibold">Teacher Suggestion:</span> {entry.teacher_suggestion}</div>
                     <details class="mt-2">
-                      <summary class="cursor-pointer font-semibold text-gray-600">Show AI Reasoning</summary>
+                      <summary class="cursor-pointer font-semibold text-gray-600" aria-label="Show AI reasoning for this assessment">Show AI Reasoning</summary>
                       <div class="mt-1 text-gray-700 whitespace-pre-line">{entry.reasoning}</div>
                     </details>
                   </div>
                 </details>
               </td>
               <td class="py-1 px-3 text-center">
-                <button class="bg-red-100 text-red-700 px-2 py-1 rounded hover:bg-red-200 transition text-xs" on:click={() => dispatch('delete', entry.timestamp)}>Delete</button>
+                <button class="bg-red-100 text-red-700 px-2 py-1 rounded hover:bg-red-200 transition text-xs" on:click={() => dispatch('delete', entry.timestamp)} aria-label={`Delete assessment from ${new Date(entry.timestamp).toLocaleString()}`}>Delete</button>
               </td>
             </tr>
           {/each}

src/routes/results/+page.svelte

@@ -30,21 +30,24 @@ onMount(() => {
 });
 </script>
 
-<section class="max-w-xl mx-auto py-12">
+<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 bg-blue-100 text-blue-700 px-2 py-1 rounded">Skip to main content</a>
+<section id="main-content" class="max-w-xl mx-auto py-12">
   <div class="flex justify-between items-center mb-4">
     <h1 class="text-2xl font-bold">Assessment Results</h1>
-    <a href="/upload" class="bg-blue-100 text-blue-700 px-3 py-1 rounded hover:bg-blue-200 transition">Back to Upload</a>
+    <a href="/upload" class="bg-blue-100 text-blue-700 px-3 py-1 rounded hover:bg-blue-200 transition" aria-label="Back to upload page">Back to Upload</a>
   </div>
   <p class="mb-6">View detailed feedback and recommendations for each student submission.</p>
   {#if feedback}
-    <AssessmentFeedback {...feedback} />
+    <div aria-live="polite" role="region">
+      <AssessmentFeedback {...feedback} />
+    </div>
   {/if}
   {#if !feedback && (!history || history.length === 0)}
-    <div class="border rounded p-6 text-gray-500">No results yet. Upload submissions to see feedback here.</div>
+    <div class="border rounded p-6 text-gray-500" aria-live="polite" role="status">No results yet. Upload submissions to see feedback here.</div>
   {/if}
   {#if history.length > 0}
     <div class="flex justify-end mt-6">
-      <button class="bg-red-100 text-red-700 px-3 py-1 rounded hover:bg-red-200 transition" on:click={confirmClearHistory}>Clear History</button>
+      <button class="bg-red-100 text-red-700 px-3 py-1 rounded hover:bg-red-200 transition" on:click={confirmClearHistory} aria-label="Clear all assessment history">Clear History</button>
     </div>
   {/if}
   <AssessmentHistory {history} hideIfEmpty={true} on:delete={deleteEntry} />

src/routes/upload/+page.svelte

@@ -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>