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
+8 -5
View File
@@ -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} />