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

fix(a11y): screen readers announce the suggested prompts on a new chat as buttons (#33094)

Browse source
This commit is contained in:
G30 2026-10-24 16:04:25 -04:00 • committed by GitHub
parent 74fb7a8c56
commit 5d6bef683f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 33 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/lib/components/chat/Suggestions.svelte
View file

@ -90,41 +90,41 @@
class="max-h-36 overflow-auto scrollbar-none items-start {className}"
>
{#each filteredPrompts as prompt, idx (prompt.id || `${prompt.content}-${idx}`)}
<!-- svelte-ignore a11y-no-interactive-element-to-noninteractive-role -->
<button
role="listitem"
class="waterfall flex flex-col flex-1 shrink-0 w-full justify-between
<div role="listitem" class="contents">
<button
class="waterfall flex flex-col flex-1 shrink-0 w-full justify-between
px-2.5 py-1.5 rounded-lg bg-transparent transition-colors
hover:text-gray-950 dark:hover:text-white group"
style="animation-delay: {idx * 45}ms"
on:click={() => onSelect({ type: 'prompt', data: prompt.content })}
>
<div class="flex flex-col text-left leading-snug">
{#if prompt.title && prompt.title[0] !== ''}
<div
class="text-sm font-normal group-hover:text-gray-950 dark:text-gray-300 dark:group-hover:text-white transition line-clamp-1"
>
{prompt.title[0]}
</div>
<div
class="text-xs text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100 font-normal line-clamp-1"
>
{prompt.title[1]}
</div>
{:else}
<div
class="text-sm font-normal group-hover:text-gray-950 dark:text-gray-300 dark:group-hover:text-white transition line-clamp-1"
>
{prompt.content}
</div>
<div
class="text-xs text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100 font-normal line-clamp-1"
>
{$i18n.t('Prompt')}
</div>
{/if}
</div>
</button>
style="animation-delay: {idx * 45}ms"
on:click={() => onSelect({ type: 'prompt', data: prompt.content })}
>
<div class="flex flex-col text-left leading-snug">
{#if prompt.title && prompt.title[0] !== ''}
<div
class="text-sm font-normal group-hover:text-gray-950 dark:text-gray-300 dark:group-hover:text-white transition line-clamp-1"
>
{prompt.title[0]}
</div>
<div
class="text-xs text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100 font-normal line-clamp-1"
>
{prompt.title[1]}
</div>
{:else}
<div
class="text-sm font-normal group-hover:text-gray-950 dark:text-gray-300 dark:group-hover:text-white transition line-clamp-1"
>
{prompt.content}
</div>
<div
class="text-xs text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100 font-normal line-clamp-1"
>
{$i18n.t('Prompt')}
</div>
{/if}
</div>
</button>
</div>
{/each}
</div>
{/if}