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
+9 -9
View File
@@ -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}