From bf0fb1c449777d2276fd2cb8bf8022b705b18854 Mon Sep 17 00:00:00 2001
From: Classic298 <27028174+Classic298@users.noreply.github.com>
Date: Sun, 22 Feb 2026 21:18:19 +0100
Subject: [PATCH] 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     | 1 +
 src/lib/components/chat/Controls/Controls.svelte       | 1 +
 src/lib/components/chat/Overview/Node.svelte           | 1 +
 src/lib/components/chat/Overview/View.svelte           | 2 ++
 src/lib/components/chat/Placeholder/FolderTitle.svelte | 3 ++-
 src/lib/components/chat/ShareChatModal.svelte          | 1 +
 src/lib/components/chat/ShortcutsModal.svelte          | 2 +-
 src/lib/components/chat/ToolServersModal.svelte        | 1 +
 8 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/ChatControls/Embeds.svelte b/src/lib/components/chat/ChatControls/Embeds.svelte
index 126124bc69..2f9dd6dae7 100644
--- a/src/lib/components/chat/ChatControls/Embeds.svelte
+++ b/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);
diff --git a/src/lib/components/chat/Controls/Controls.svelte b/src/lib/components/chat/Controls/Controls.svelte
index c8280aa2dc..180b40225a 100644
--- a/src/lib/components/chat/Controls/Controls.svelte
+++ b/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');
 			}}
diff --git a/src/lib/components/chat/Overview/Node.svelte b/src/lib/components/chat/Overview/Node.svelte
index 9e6cf356a4..521ad1188b 100644
--- a/src/lib/components/chat/Overview/Node.svelte
+++ b/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);
 							}}
diff --git a/src/lib/components/chat/Overview/View.svelte b/src/lib/components/chat/Overview/View.svelte
index b3164e6e78..157f7f7b20 100644
--- a/src/lib/components/chat/Overview/View.svelte
+++ b/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);
diff --git a/src/lib/components/chat/Placeholder/FolderTitle.svelte b/src/lib/components/chat/Placeholder/FolderTitle.svelte
index c28504a0de..80a214ddd7 100644
--- a/src/lib/components/chat/Placeholder/FolderTitle.svelte
+++ b/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>
diff --git a/src/lib/components/chat/ShareChatModal.svelte b/src/lib/components/chat/ShareChatModal.svelte
index f9f0f723ea..1c02f6481d 100644
--- a/src/lib/components/chat/ShareChatModal.svelte
+++ b/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;
 				}}
diff --git a/src/lib/components/chat/ShortcutsModal.svelte b/src/lib/components/chat/ShortcutsModal.svelte
index 4db85ec06d..89bef8d43e 100644
--- a/src/lib/components/chat/ShortcutsModal.svelte
+++ b/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>
diff --git a/src/lib/components/chat/ToolServersModal.svelte b/src/lib/components/chat/ToolServersModal.svelte
index 5b9276541e..ddedba3c2c 100644
--- a/src/lib/components/chat/ToolServersModal.svelte
+++ b/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;
 				}}