scriptoriumadmin/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-10-29 06:32:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix(a11y): keyboard users can sort the Evaluations feedback list and open a feedback from it (#33162)

Browse source
This commit is contained in:
G30 2026-10-25 03:44:55 -04:00 • committed by GitHub
parent d61bdfb791
commit 1bb76d7950
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 58 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/lib/components/admin/Evaluations/Feedbacks.svelte
View file

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