fix(a11y): the info button under a reply is named and reads its usage details (#32855)

This commit is contained in:
G30 2026-10-21 15:36:51 -04:00 • committed by GitHub
parent 3e0564d11a
commit 2a6e3c0197
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

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