From 5d6bef683fe79f51d9c7e839cb9f4c451e52a9ee Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Sat, 24 Oct 2026 16:04:25 -0400
Subject: [PATCH] fix(a11y): screen readers announce the suggested prompts on a
 new chat as buttons (#33094)

---
 src/lib/components/chat/Suggestions.svelte | 66 +++++++++++-----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/chat/Suggestions.svelte b/src/lib/components/chat/Suggestions.svelte
index 1d58d5b337..b3afa53b37 100644
--- a/src/lib/components/chat/Suggestions.svelte
+++ b/src/lib/components/chat/Suggestions.svelte
@@ -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}