fix(a11y): add aria-labels to chat message components (#21708)

Add aria-labels, aria-expanded, and semantic improvements to:
- RateComment: close button, rating scale, feedback textarea
- Citations: toggle button with count, source item buttons
- Source/SourceToken: contextual aria-labels for citation buttons
- StatusHistory: toggle button with expanded state
- WebSearchResults: descriptive favicon alt text
- FollowUps: convert div to button element
- RegenerateMenu: submit suggestion button
- FloatingButtons: action buttons, input field, submit button
- CitationModal: close button

WCAG: 4.1.2 (Name, Role, Value), 2.1.1 (Keyboard), 1.1.1 (Non-text Content)

src/lib/components/chat/ContentRenderer/FloatingButtons.svelte

@@ -254,6 +254,7 @@
 			>
 				{#each actions as action}
 					<button
+						aria-label={action.label}
 						class="px-1.5 py-[1px] hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl flex items-center gap-1 min-w-fit transition"
 						on:click={async () => {
 							selectedText = window.getSelection().toString();
@@ -291,6 +292,7 @@
 					id="floating-message-input"
 					class="ml-5 bg-transparent outline-hidden w-full flex-1 text-sm"
 					placeholder={$i18n.t('Ask a question')}
+					aria-label={$i18n.t('Ask a question')}
 					bind:value={floatingInputValue}
 					on:keydown={(e) => {
 						if (e.key === 'Enter') {
@@ -301,6 +303,7 @@
 
 				<div class="ml-1 mr-1">
 					<button
+						aria-label={$i18n.t('Submit question')}
 						class="{floatingInputValue !== ''
 							? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
 							: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1.5 m-0.5 self-center"

src/lib/components/chat/Messages/Citations.svelte

@@ -163,6 +163,8 @@
 	<div class=" py-1 -mx-0.5 w-full flex gap-1 items-center flex-wrap">
 		<button
 			class="text-xs font-medium text-gray-600 dark:text-gray-300 px-3.5 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition flex items-center gap-1 border border-gray-50 dark:border-gray-850/30"
+			aria-label={citations.length === 1 ? $i18n.t('Toggle 1 source') : $i18n.t('Toggle {{COUNT}} sources', { COUNT: citations.length })}
+			aria-expanded={showCitations}
 			on:click={() => {
 				showCitations = !showCitations;
 			}}
@@ -197,6 +199,7 @@
 			{#each citations as citation, idx}
 				<button
 					id={`source-${id}-${idx + 1}`}
+					aria-label={$i18n.t('View source: {{name}}', { name: decodeString(citation.source.name) })}
 					class="no-toggle outline-hidden flex dark:text-gray-300 bg-transparent text-gray-600 rounded-xl gap-1.5 items-center"
 					on:click={() => {
 						showCitationModal = true;

src/lib/components/chat/Messages/Citations/CitationModal.svelte

@@ -130,6 +130,7 @@
 			</div>
 			<button
 				class="self-center"
+				aria-label={$i18n.t('Close citation modal')}
 				on:click={() => {
 					show = false;
 				}}

src/lib/components/chat/Messages/Markdown/Source.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
 	import { decodeString } from '$lib/utils';
 
+	const i18n = getContext('i18n');
+
 	export let id;
 
 	export let title: string = 'N/A';
@@ -37,6 +40,7 @@
 
 {#if title !== 'N/A'}
 	<button
+		aria-label={$i18n.t('View source: {{title}}', { title: formattedTitle(decodeString(title)) })}
 		class="text-[10px] w-fit translate-y-[2px] px-2 py-0.5 dark:bg-white/5 dark:text-white/80 dark:hover:text-white bg-gray-50 text-black/80 hover:text-black transition rounded-xl"
 		on:click={() => {
 			onClick(id);

src/lib/components/chat/Messages/Markdown/SourceToken.svelte

@@ -48,6 +48,7 @@
 		<LinkPreview.Root openDelay={0} bind:open={openPreview}>
 			<LinkPreview.Trigger>
 				<button
+					aria-label={`${getDisplayTitle(formattedTitle(decodeString(sourceIds[token.ids[0] - 1])))} +${(token?.ids ?? []).length - 1} more sources`}
 					class="text-[10px] w-fit translate-y-[2px] px-2 py-0.5 dark:bg-white/5 dark:text-white/80 dark:hover:text-white bg-gray-50 text-black/80 hover:text-black transition rounded-xl"
 					on:click={() => {
 						openPreview = !openPreview;

src/lib/components/chat/Messages/RateComment.svelte

@@ -121,6 +121,7 @@
 		<!-- <div class=" text-sm">{$i18n.t('Tell us more:')}</div> -->
 
 		<button
+			aria-label={$i18n.t('Close feedback')}
 			on:click={() => {
 				show = false;
 			}}
@@ -135,6 +136,7 @@
 				<!-- 1-10 scale -->
 				{#each Array.from({ length: 10 }).map((_, i) => i + 1) as rating}
 					<button
+						aria-label={$i18n.t('Rate {{rating}} out of 10', { rating })}
 						class="size-7 text-sm border border-gray-100/30 dark:border-gray-850/30 hover:bg-gray-50 dark:hover:bg-gray-850 {detailedRating ===
 						rating
 							? 'bg-gray-100 dark:bg-gray-800'
@@ -218,6 +220,7 @@
 			bind:value={comment}
 			class="w-full text-sm px-1 py-2 bg-transparent outline-hidden resize-none rounded-xl"
 			placeholder={$i18n.t('Feel free to add specific details')}
+			aria-label={$i18n.t('Additional feedback comments')}
 			rows="3"
 		/>
 	</div>

src/lib/components/chat/Messages/ResponseMessage/FollowUps.svelte

@@ -15,18 +15,16 @@
 
 	<div class="flex flex-col text-left gap-1 mt-1.5">
 		{#each followUps as followUp, idx (idx)}
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<Tooltip content={followUp} placement="top-start" className="line-clamp-1">
-				<div
+				<button
-					class=" py-1.5 bg-transparent text-left text-sm flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white transition cursor-pointer"
+					class=" py-1.5 bg-transparent text-left text-sm flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white transition cursor-pointer w-full"
 					on:click={() => onClick(followUp)}
-					aria-label={followUp}
+					aria-label={$i18n.t('Follow up: {{question}}', { question: followUp })}
 				>
 					<div class="line-clamp-1">
 						{followUp}
 					</div>
-				</div>
+				</button>
 			</Tooltip>
 
 			{#if idx < followUps.length - 1}

src/lib/components/chat/Messages/ResponseMessage/RegenerateMenu.svelte

@@ -53,13 +53,14 @@
 
 				<div class="ml-2 self-center flex items-center">
 					<button
-						class="{inputValue !== ''
+					aria-label={$i18n.t('Submit suggestion')}
-							? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
+					class="{inputValue !== ''
-							: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1 self-center"
+						? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
-						on:click={() => {
+						: 'text-white bg-gray-200 dark:text-gray-900 dark:bg-gray-700 disabled'} transition rounded-full p-1 self-center"
-							onRegenerate(inputValue);
+					on:click={() => {
-							show = false;
+						onRegenerate(inputValue);
-						}}
+						show = false;
+					}}
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"

src/lib/components/chat/Messages/ResponseMessage/StatusHistory.svelte

@@ -31,6 +31,8 @@
 		<div class="text-sm flex flex-col w-full">
 			<button
 				class="w-full"
+				aria-label={$i18n.t('Toggle status history')}
+				aria-expanded={showHistory}
 				on:click={() => {
 					showHistory = !showHistory;
 				}}

src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte

@@ -67,7 +67,7 @@
 						<div class="w-fit">
 							<img
 								src="https://www.google.com/s2/favicons?sz=32&domain={item.link}"
-								alt="favicon"
+								alt="{item?.title ?? item.link} favicon"
 								class="size-3.5"
 							/>
 						</div>
@@ -107,7 +107,7 @@
 						<div class="w-fit">
 							<img
 								src="https://www.google.com/s2/favicons?sz=32&domain={url}"
-								alt="favicon"
+								alt="{url} favicon"
 								class="size-3.5"
 							/>
 						</div>