From 1bb76d79503cc5a4b377897debf4c5fc0ff98b81 Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Sun, 25 Oct 2026 03:44:55 -0400
Subject: [PATCH] fix(a11y): keyboard users can sort the Evaluations feedback
 list and open a feedback from it (#33162)

---
 .../admin/Evaluations/Feedbacks.svelte        | 80 ++++++++++++++-----
 1 file changed, 58 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/admin/Evaluations/Feedbacks.svelte b/src/lib/components/admin/Evaluations/Feedbacks.svelte
index b63a655499..eeb0ea13b9 100644
--- a/src/lib/components/admin/Evaluations/Feedbacks.svelte
+++ b/src/lib/components/admin/Evaluations/Feedbacks.svelte
@@ -320,10 +320,18 @@
 						<tr class=" border-b-[1.5px] border-gray-50 dark:border-gray-850/30">
 							<th
 								scope="col"
-								class="px-2.5 py-2 font-normal cursor-pointer select-none w-3"
-								on:click={() => setSortKey('username')}
+								class="font-normal select-none w-3"
+								aria-sort={orderBy === 'username'
+									? direction === 'asc'
+										? 'ascending'
+										: 'descending'
+									: 'none'}
 							>
-								<div class="flex gap-1.5 items-center justify-end">
+								<button
+									type="button"
+									class="flex w-full cursor-pointer gap-1.5 items-center justify-end px-2.5 py-2 uppercase"
+									on:click={() => setSortKey('username')}
+								>
 									{$i18n.t('User')}
 									{#if orderBy === 'username'}
 										<span class="font-normal">
@@ -338,15 +346,23 @@
 											<ChevronUp className="size-2" />
 										</span>
 									{/if}
-								</div>
+								</button>
 							</th>
 
 							<th
 								scope="col"
-								class="px-2.5 py-2 font-normal cursor-pointer select-none"
-								on:click={() => setSortKey('model_id')}
+								class="font-normal select-none"
+								aria-sort={orderBy === 'model_id'
+									? direction === 'asc'
+										? 'ascending'
+										: 'descending'
+									: 'none'}
 							>
-								<div class="flex gap-1.5 items-center">
+								<button
+									type="button"
+									class="flex w-full cursor-pointer gap-1.5 items-center px-2.5 py-2 uppercase"
+									on:click={() => setSortKey('model_id')}
+								>
 									{$i18n.t('Models')}
 									{#if orderBy === 'model_id'}
 										<span class="font-normal">
@@ -361,15 +377,23 @@
 											<ChevronUp className="size-2" />
 										</span>
 									{/if}
-								</div>
+								</button>
 							</th>
 
 							<th
 								scope="col"
-								class="px-2.5 py-2 font-normal text-right cursor-pointer select-none w-fit"
-								on:click={() => setSortKey('rating')}
+								class="font-normal text-right select-none w-fit"
+								aria-sort={orderBy === 'rating'
+									? direction === 'asc'
+										? 'ascending'
+										: 'descending'
+									: 'none'}
 							>
-								<div class="flex gap-1.5 items-center justify-end">
+								<button
+									type="button"
+									class="flex w-full cursor-pointer gap-1.5 items-center justify-end px-2.5 py-2 uppercase"
+									on:click={() => setSortKey('rating')}
+								>
 									{$i18n.t('Result')}
 									{#if orderBy === 'rating'}
 										<span class="font-normal">
@@ -384,15 +408,23 @@
 											<ChevronUp className="size-2" />
 										</span>
 									{/if}
-								</div>
+								</button>
 							</th>
 
 							<th
 								scope="col"
-								class="px-2.5 py-2 font-normal text-right cursor-pointer select-none w-0"
-								on:click={() => setSortKey('updated_at')}
+								class="font-normal text-right select-none w-0"
+								aria-sort={orderBy === 'updated_at'
+									? direction === 'asc'
+										? 'ascending'
+										: 'descending'
+									: 'none'}
 							>
-								<div class="flex gap-1.5 items-center justify-end">
+								<button
+									type="button"
+									class="flex w-full cursor-pointer gap-1.5 items-center justify-end px-2.5 py-2 uppercase"
+									on:click={() => setSortKey('updated_at')}
+								>
 									{$i18n.t('Updated At')}
 									{#if orderBy === 'updated_at'}
 										<span class="font-normal">
@@ -407,7 +439,7 @@
 											<ChevronUp className="size-2" />
 										</span>
 									{/if}
-								</div>
+								</button>
 							</th>
 
 							<th
@@ -442,11 +474,13 @@
 										<div class="flex flex-col h-full">
 											{#if feedback.data?.sibling_model_ids}
 												<Tooltip content={feedback.data?.model_id} placement="top-start">
-													<div
-														class="font-normal text-gray-600 dark:text-gray-400 flex-1 line-clamp-1"
+													<button
+														type="button"
+														class="cursor-pointer text-left font-normal text-gray-600 dark:text-gray-400 flex-1 line-clamp-1"
+														on:click={() => openFeedbackModal(feedback)}
 													>
 														{feedback.data?.model_id}
-													</div>
+													</button>
 												</Tooltip>
 
 												<Tooltip content={feedback.data.sibling_model_ids.join(', ')}>
@@ -466,11 +500,13 @@
 												</Tooltip>
 											{:else}
 												<Tooltip content={feedback.data?.model_id} placement="top-start">
-													<div
-														class="text-sm font-normal text-gray-600 dark:text-gray-400 flex-1 py-1.5 line-clamp-1"
+													<button
+														type="button"
+														class="cursor-pointer text-left text-sm font-normal text-gray-600 dark:text-gray-400 flex-1 py-1.5 line-clamp-1"
+														on:click={() => openFeedbackModal(feedback)}
 													>
 														{feedback.data?.model_id}
-													</div>
+													</button>
 												</Tooltip>
 											{/if}
 										</div>