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/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
-					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"
+				<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 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 !== ''
-							? '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 self-center"
-						on:click={() => {
-							onRegenerate(inputValue);
-							show = false;
-						}}
+					aria-label={$i18n.t('Submit suggestion')}
+					class="{inputValue !== ''
+						? '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 self-center"
+					on:click={() => {
+						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>