From 2a6e3c019734c52c73468ddaf1040fffac150eae Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Wed, 21 Oct 2026 15:36:51 -0400
Subject: [PATCH] fix(a11y): the info button under a reply is named and reads
 its usage details (#32855)

---
 .../chat/Messages/ResponseMessage.svelte      | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index de6b815b73..356df182d6 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -1190,22 +1190,21 @@
 								{/if}
 
 								{#if message.usage}
+									{@const usage = JSON.stringify(message.usage, null, 2)
+										.replace(/"([^(")"]+)":/g, '$1:')
+										.slice(1, -1)
+										.split('\n')
+										.map((line) => line.slice(2))
+										.map((line) => (line.endsWith(',') ? line.slice(0, -1) : line))
+										.join('\n')}
+									<span id="usage-{message.id}" hidden>{usage}</span>
 									<Tooltip
-										content={message.usage
-											? `<pre>${sanitizeResponseContent(
-													JSON.stringify(message.usage, null, 2)
-														.replace(/"([^(")"]+)":/g, '$1:')
-														.slice(1, -1)
-														.split('\n')
-														.map((line) => line.slice(2))
-														.map((line) => (line.endsWith(',') ? line.slice(0, -1) : line))
-														.join('\n')
-												)}</pre>`
-											: ''}
+										content={`<pre>${sanitizeResponseContent(usage)}</pre>`}
 										placement="bottom"
 									>
 										<button
-											aria-hidden="true"
+											aria-label={$i18n.t('Info')}
+											aria-describedby="usage-{message.id}"
 											class=" {isLastMessage || ($settings?.highContrastMode ?? false)
 												? 'visible'
 												: 'hover-reveal'} inline-flex size-7 shrink-0 items-center justify-center p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-gray-400 hover:text-gray-600 transition whitespace-pre-wrap"