fix(a11y): add aria-labels to chat core components (#21709)

Add aria-labels to close, back, and action buttons across:
- Controls/Controls.svelte: close chat controls button
- ChatControls/Embeds.svelte: close embed button
- Overview/Node.svelte: favorite toggle button
- Overview/View.svelte: back and close overview buttons
- ShortcutsModal.svelte: close button
- ShareChatModal.svelte: close button
- ToolServersModal.svelte: close button
- Placeholder/FolderTitle.svelte: folder icon picker, folder options menu

WCAG: 4.1.2 (Name, Role, Value)

src/lib/components/chat/ChatControls/Embeds.svelte

@@ -57,6 +57,7 @@
 
 			<button
 				class="self-center pointer-events-auto p-1 rounded-full bg-white dark:bg-gray-850"
+				aria-label="Close embed"
 				on:click={() => {
 					showControls.set(false);
 					showEmbeds.set(false);

src/lib/components/chat/Controls/Controls.svelte

@@ -22,6 +22,7 @@
 		<div class=" text-lg font-medium self-center font-primary">{$i18n.t('Chat Controls')}</div>
 		<button
 			class="self-center"
+			aria-label={$i18n.t('Close chat controls')}
 			on:click={() => {
 				dispatch('close');
 			}}

src/lib/components/chat/Overview/Node.svelte

@@ -56,6 +56,7 @@
 
 						<button
 							class={data?.message?.favorite ? '' : 'invisible group-hover:visible'}
+							aria-label={data?.message?.favorite ? $i18n.t('Remove from favorites') : $i18n.t('Add to favorites')}
 							on:click={() => {
 								data.message.favorite = !(data?.message?.favorite ?? false);
 							}}

src/lib/components/chat/Overview/View.svelte

@@ -176,6 +176,7 @@
 		<div class="flex items-center gap-2.5">
 			<button
 				class="self-center p-0.5"
+				aria-label={$i18n.t('Back')}
 				on:click={() => {
 					showOverview.set(false);
 				}}
@@ -186,6 +187,7 @@
 		</div>
 		<button
 			class="self-center p-0.5"
+			aria-label={$i18n.t('Close overview')}
 			on:click={() => {
 				onClose();
 				showOverview.set(false);

src/lib/components/chat/Placeholder/FolderTitle.svelte

@@ -173,6 +173,7 @@
 				}}
 			>
 				<button
+					aria-label={$i18n.t('Change folder icon')}
 					class=" rounded-full bg-gray-50 dark:bg-gray-800 size-11 flex justify-center items-center"
 				>
 					{#if folder?.meta?.icon}
@@ -201,7 +202,7 @@
 					exportHandler();
 				}}
 			>
-				<button class="p-1.5 dark:hover:bg-gray-850 rounded-full touch-auto" on:click={(e) => {}}>
+				<button class="p-1.5 dark:hover:bg-gray-850 rounded-full touch-auto" aria-label={$i18n.t('Folder options')} on:click={(e) => {}}>
 					<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
 				</button>
 			</FolderMenu>

src/lib/components/chat/ShareChatModal.svelte

@@ -87,6 +87,7 @@
 			<div class=" text-lg font-medium self-center">{$i18n.t('Share Chat')}</div>
 			<button
 				class="self-center"
+				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}

src/lib/components/chat/ShortcutsModal.svelte

@@ -47,7 +47,7 @@
 	<div class="text-gray-700 dark:text-gray-100 px-5 py-4">
 		<div class="flex justify-between dark:text-gray-300 pb-2">
 			<div class="text-lg font-medium self-center">{$i18n.t('Keyboard Shortcuts')}</div>
-			<button class="self-center" on:click={() => (show = false)}>
+			<button class="self-center" aria-label={$i18n.t('Close')} on:click={() => (show = false)}>
 				<XMark className={'size-5'} />
 			</button>
 		</div>

src/lib/components/chat/ToolServersModal.svelte

@@ -27,6 +27,7 @@
 			<div class=" text-lg font-medium self-center">{$i18n.t('Available Tools')}</div>
 			<button
 				class="self-center"
+				aria-label={$i18n.t('Close')}
 				on:click={() => {
 					show = false;
 				}}