From 5b9efeef4d522b2f00a20c209360ed68a212a3a8 Mon Sep 17 00:00:00 2001
From: Classic298 <27028174+Classic298@users.noreply.github.com>
Date: Sun, 22 Feb 2026 22:24:33 +0100
Subject: [PATCH] fix(a11y): add aria-labels and structural elements to
 workspace components (#21719)

---
 src/lib/components/workspace/Knowledge.svelte              | 2 ++
 src/lib/components/workspace/Knowledge/ItemMenu.svelte     | 1 +
 .../components/workspace/Knowledge/KnowledgeBase.svelte    | 7 ++++++-
 src/lib/components/workspace/Models.svelte                 | 4 ++++
 src/lib/components/workspace/Models/ModelEditor.svelte     | 1 +
 src/lib/components/workspace/Prompts.svelte                | 4 ++++
 src/lib/components/workspace/Prompts/PromptEditor.svelte   | 4 ++++
 .../components/workspace/Prompts/PromptHistoryMenu.svelte  | 1 +
 src/lib/components/workspace/Skills.svelte                 | 3 +++
 src/lib/components/workspace/Skills/SkillEditor.svelte     | 5 +++++
 src/lib/components/workspace/Tools.svelte                  | 5 +++++
 src/lib/components/workspace/Tools/ToolkitEditor.svelte    | 4 ++++
 src/routes/(app)/workspace/+layout.svelte                  | 6 ++++++
 13 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/workspace/Knowledge.svelte b/src/lib/components/workspace/Knowledge.svelte
index 39af77a345..25b59d476c 100644
--- a/src/lib/components/workspace/Knowledge.svelte
+++ b/src/lib/components/workspace/Knowledge.svelte
@@ -197,12 +197,14 @@
 				<input
 					class=" w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
 					bind:value={query}
+					aria-label={$i18n.t('Search Knowledge')}
 					placeholder={$i18n.t('Search Knowledge')}
 				/>
 				{#if query}
 					<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
 						<button
 							class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+							aria-label={$i18n.t('Clear search')}
 							on:click={() => {
 								query = '';
 							}}
diff --git a/src/lib/components/workspace/Knowledge/ItemMenu.svelte b/src/lib/components/workspace/Knowledge/ItemMenu.svelte
index 641b77472c..35e137de2e 100644
--- a/src/lib/components/workspace/Knowledge/ItemMenu.svelte
+++ b/src/lib/components/workspace/Knowledge/ItemMenu.svelte
@@ -38,6 +38,7 @@
 			><button
 				class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 				type="button"
+				aria-label={$i18n.t('More Options')}
 				on:click={(e) => {
 					e.stopPropagation();
 					show = true;
diff --git a/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte b/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
index c85308c9e1..5f50328024 100644
--- a/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
+++ b/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
@@ -856,6 +856,7 @@
 								type="text"
 								class="text-left w-full text-lg bg-transparent outline-hidden flex-1"
 								bind:value={knowledge.name}
+								aria-label={$i18n.t('Knowledge Name')}
 								placeholder={$i18n.t('Knowledge Name')}
 								disabled={!knowledge?.write_access}
 								on:input={() => {
@@ -903,6 +904,7 @@
 							type="text"
 							class="text-left text-xs w-full text-gray-500 bg-transparent outline-hidden"
 							bind:value={knowledge.description}
+							aria-label={$i18n.t('Knowledge Description')}
 							placeholder={$i18n.t('Knowledge Description')}
 							disabled={!knowledge?.write_access}
 							on:input={() => {
@@ -925,7 +927,8 @@
 					<input
 						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
 						bind:value={query}
-						placeholder={`${$i18n.t('Search Collection')}`}
+						aria-label={$i18n.t('Search Collection')}
+						placeholder={$i18n.t('Search Collection')}
 						on:focus={() => {
 							selectedFileId = null;
 						}}
@@ -1071,6 +1074,7 @@
 										<div class="mr-2">
 											<button
 												class="w-full text-left text-sm p-1.5 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850"
+												aria-label={$i18n.t('Close')}
 												on:click={() => {
 													selectedFileId = null;
 													selectedFile = null;
@@ -1108,6 +1112,7 @@
 											class="w-full h-full text-sm outline-none resize-none px-3 py-2"
 											bind:value={selectedFileContent}
 											disabled={!knowledge?.write_access}
+											aria-label={$i18n.t('File content')}
 											placeholder={$i18n.t('Add content here')}
 										/>
 									{/key}
diff --git a/src/lib/components/workspace/Models.svelte b/src/lib/components/workspace/Models.svelte
index 3222dbd624..c997887f93 100644
--- a/src/lib/components/workspace/Models.svelte
+++ b/src/lib/components/workspace/Models.svelte
@@ -395,6 +395,7 @@
 				<input
 					class=" w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
 					bind:value={query}
+					aria-label={$i18n.t('Search Models')}
 					placeholder={$i18n.t('Search Models')}
 					maxlength="500"
 					on:input={() => {
@@ -409,6 +410,7 @@
 					<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
 						<button
 							class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+							aria-label={$i18n.t('Clear search')}
 							on:click={() => {
 								query = '';
 								getModelList();
@@ -516,6 +518,7 @@
 																	<button
 																		class="self-center w-fit text-sm p-1.5 dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 																		type="button"
+																		aria-label={model?.meta?.hidden ? $i18n.t('Show') : $i18n.t('Hide')}
 																		on:click={(e) => {
 																			e.stopPropagation();
 																			hideModelHandler(model);
@@ -533,6 +536,7 @@
 																	<button
 																		class="self-center w-fit text-sm p-1.5 dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 																		type="button"
+																		aria-label={$i18n.t('Delete')}
 																		on:click={(e) => {
 																			e.stopPropagation();
 																			deleteModelHandler(model);
diff --git a/src/lib/components/workspace/Models/ModelEditor.svelte b/src/lib/components/workspace/Models/ModelEditor.svelte
index 6a6f8d152e..904d8d2ce9 100644
--- a/src/lib/components/workspace/Models/ModelEditor.svelte
+++ b/src/lib/components/workspace/Models/ModelEditor.svelte
@@ -475,6 +475,7 @@
 										? 'bg-transparent'
 										: 'bg-white'} shadow-xl group relative"
 									type="button"
+									aria-label={$i18n.t('Upload profile image')}
 									on:click={() => {
 										filesInputElement.click();
 									}}
diff --git a/src/lib/components/workspace/Prompts.svelte b/src/lib/components/workspace/Prompts.svelte
index d5c2d9143d..605b4abf8c 100644
--- a/src/lib/components/workspace/Prompts.svelte
+++ b/src/lib/components/workspace/Prompts.svelte
@@ -331,6 +331,7 @@
 				<input
 					class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
 					bind:value={query}
+					aria-label={$i18n.t('Search Prompts')}
 					placeholder={$i18n.t('Search Prompts')}
 				/>
 
@@ -338,6 +339,7 @@
 					<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
 						<button
 							class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+							aria-label={$i18n.t('Clear search')}
 							on:click={() => {
 								query = '';
 							}}
@@ -437,6 +439,7 @@
 									<button
 										class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 										type="button"
+										aria-label={$i18n.t('Delete')}
 										on:click={() => {
 											deleteHandler(prompt);
 										}}
@@ -449,6 +452,7 @@
 									<button
 										class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 										type="button"
+										aria-label={$i18n.t('Copy Prompt')}
 										on:click={(e) => {
 											e.preventDefault();
 											e.stopPropagation();
diff --git a/src/lib/components/workspace/Prompts/PromptEditor.svelte b/src/lib/components/workspace/Prompts/PromptEditor.svelte
index 0f473d604c..e92e5936a3 100644
--- a/src/lib/components/workspace/Prompts/PromptEditor.svelte
+++ b/src/lib/components/workspace/Prompts/PromptEditor.svelte
@@ -302,6 +302,7 @@
 			<div class="text-lg font-medium">{$i18n.t('Edit Prompt')}</div>
 			<button
 				class="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg"
+				aria-label={$i18n.t('Close')}
 				on:click={() => (showEditModal = false)}
 			>
 				<XMark className="size-5" />
@@ -319,6 +320,7 @@
 						className="text-sm w-full bg-transparent outline-hidden overflow-y-hidden resize-none"
 						placeholder={$i18n.t('Write a summary in 50 words that summarizes {{topic}}.')}
 						bind:value={content}
+						aria-label={$i18n.t('Prompt Content')}
 						rows={6}
 						required
 					/>
@@ -331,6 +333,7 @@
 					<input
 						class="text-sm w-full bg-transparent outline-hidden"
 						placeholder={$i18n.t('Describe what changed...')}
+						aria-label={$i18n.t('Commit Message')}
 						bind:value={commitMessage}
 					/>
 				</div>
@@ -502,6 +505,7 @@
 					<div class="absolute top-2 right-2 z-10">
 						<button
 							class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition"
+							aria-label={$i18n.t('Copy content')}
 							on:click={copyContent}
 						>
 							{#if contentCopied}
diff --git a/src/lib/components/workspace/Prompts/PromptHistoryMenu.svelte b/src/lib/components/workspace/Prompts/PromptHistoryMenu.svelte
index 5efebdfea7..8556a08201 100644
--- a/src/lib/components/workspace/Prompts/PromptHistoryMenu.svelte
+++ b/src/lib/components/workspace/Prompts/PromptHistoryMenu.svelte
@@ -43,6 +43,7 @@
 		<slot>
 			<button
 				class="p-1 rounded-lg text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-850 transition"
+				aria-label={$i18n.t('More Options')}
 			>
 				<EllipsisHorizontal className="size-5" />
 			</button>
diff --git a/src/lib/components/workspace/Skills.svelte b/src/lib/components/workspace/Skills.svelte
index 389de69787..51dc2fb638 100644
--- a/src/lib/components/workspace/Skills.svelte
+++ b/src/lib/components/workspace/Skills.svelte
@@ -321,12 +321,14 @@
 				<input
 					class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
 					bind:value={query}
+					aria-label={$i18n.t('Search Skills')}
 					placeholder={$i18n.t('Search Skills')}
 				/>
 				{#if query}
 					<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
 						<button
 							class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+							aria-label={$i18n.t('Clear search')}
 							on:click={() => {
 								query = '';
 							}}
@@ -453,6 +455,7 @@
 											<button
 												class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 												type="button"
+												aria-label={$i18n.t('Delete')}
 												on:click={() => {
 													deleteHandler(skill);
 												}}
diff --git a/src/lib/components/workspace/Skills/SkillEditor.svelte b/src/lib/components/workspace/Skills/SkillEditor.svelte
index e14b03ffab..569809a5b6 100644
--- a/src/lib/components/workspace/Skills/SkillEditor.svelte
+++ b/src/lib/components/workspace/Skills/SkillEditor.svelte
@@ -136,6 +136,7 @@
 							<Tooltip content={$i18n.t('Back')}>
 								<button
 									class="w-full text-left text-sm py-1.5 px-1 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850"
+									aria-label={$i18n.t('Back')}
 									on:click={() => {
 										goto('/workspace/skills');
 									}}
@@ -152,6 +153,7 @@
 									class="w-full text-2xl bg-transparent outline-hidden"
 									type="text"
 									placeholder={$i18n.t('Skill Name')}
+									aria-label={$i18n.t('Skill Name')}
 									bind:value={name}
 									on:input={handleNameInput}
 									required
@@ -197,6 +199,7 @@
 									class="w-full text-sm disabled:text-gray-500 bg-transparent outline-hidden"
 									type="text"
 									placeholder={$i18n.t('Skill ID')}
+									aria-label={$i18n.t('Skill ID')}
 									bind:value={id}
 									on:input={handleIdInput}
 									required
@@ -214,6 +217,7 @@
 								class="w-full text-sm bg-transparent outline-hidden"
 								type="text"
 								placeholder={$i18n.t('Skill Description')}
+								aria-label={$i18n.t('Skill Description')}
 								bind:value={description}
 								on:input={handleDescriptionInput}
 								{disabled}
@@ -236,6 +240,7 @@
 									class="w-full flex-1 text-xs bg-transparent outline-hidden resize-none font-mono px-4 py-3"
 									bind:value={content}
 									placeholder={$i18n.t('Enter skill instructions in markdown...')}
+									aria-label={$i18n.t('Skill Instructions')}
 									required
 								/>
 							{/if}
diff --git a/src/lib/components/workspace/Tools.svelte b/src/lib/components/workspace/Tools.svelte
index 8c8ea38d09..12a62f8ff1 100644
--- a/src/lib/components/workspace/Tools.svelte
+++ b/src/lib/components/workspace/Tools.svelte
@@ -325,12 +325,14 @@
 				<input
 					class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
 					bind:value={query}
+					aria-label={$i18n.t('Search Tools')}
 					placeholder={$i18n.t('Search Tools')}
 				/>
 				{#if query}
 					<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
 						<button
 							class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+							aria-label={$i18n.t('Clear search')}
 							on:click={() => {
 								query = '';
 							}}
@@ -457,6 +459,7 @@
 											<button
 												class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 												type="button"
+												aria-label={$i18n.t('Delete')}
 												on:click={() => {
 													deleteHandler(tool);
 												}}
@@ -470,6 +473,7 @@
 												<button
 													class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 													type="button"
+													aria-label={$i18n.t('Support')}
 													on:click={() => {
 														selectedTool = tool;
 														showManifestModal = true;
@@ -484,6 +488,7 @@
 											<button
 												class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 												type="button"
+												aria-label={$i18n.t('Valves')}
 												on:click={() => {
 													selectedTool = tool;
 													showValvesModal = true;
diff --git a/src/lib/components/workspace/Tools/ToolkitEditor.svelte b/src/lib/components/workspace/Tools/ToolkitEditor.svelte
index ad356cb26c..a0f8e57281 100644
--- a/src/lib/components/workspace/Tools/ToolkitEditor.svelte
+++ b/src/lib/components/workspace/Tools/ToolkitEditor.svelte
@@ -225,6 +225,7 @@ class Tools:
 							<Tooltip content={$i18n.t('Back')}>
 								<button
 									class="w-full text-left text-sm py-1.5 px-1 rounded-lg dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-gray-850"
+									aria-label={$i18n.t('Back')}
 									on:click={() => {
 										goto('/workspace/tools');
 									}}
@@ -241,6 +242,7 @@ class Tools:
 									class="w-full text-2xl bg-transparent outline-hidden"
 									type="text"
 									placeholder={$i18n.t('Tool Name')}
+									aria-label={$i18n.t('Tool Name')}
 									bind:value={name}
 									required
 								/>
@@ -275,6 +277,7 @@ class Tools:
 									class="w-full text-sm disabled:text-gray-500 bg-transparent outline-hidden"
 									type="text"
 									placeholder={$i18n.t('Tool ID')}
+									aria-label={$i18n.t('Tool ID')}
 									bind:value={id}
 									required
 									disabled={edit}
@@ -291,6 +294,7 @@ class Tools:
 								class="w-full text-sm bg-transparent outline-hidden"
 								type="text"
 								placeholder={$i18n.t('Tool Description')}
+								aria-label={$i18n.t('Tool Description')}
 								bind:value={meta.description}
 								required
 							/>
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index fd13c91178..c28053347c 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -67,6 +67,7 @@
 							<button
 								id="sidebar-toggle-button"
 								class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
+								aria-label={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
 								on:click={() => {
 									showSidebar.set(!$showSidebar);
 								}}
@@ -86,6 +87,7 @@
 						{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models}
 							<a
 								draggable="false"
+								aria-current={$page.url.pathname.includes('/workspace/models') ? 'page' : null}
 								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/models')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
@@ -96,6 +98,7 @@
 						{#if $user?.role === 'admin' || $user?.permissions?.workspace?.knowledge}
 							<a
 								draggable="false"
+								aria-current={$page.url.pathname.includes('/workspace/knowledge') ? 'page' : null}
 								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/knowledge')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
@@ -108,6 +111,7 @@
 						{#if $user?.role === 'admin' || $user?.permissions?.workspace?.prompts}
 							<a
 								draggable="false"
+								aria-current={$page.url.pathname.includes('/workspace/prompts') ? 'page' : null}
 								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/prompts')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
@@ -118,6 +122,7 @@
 						{#if $user?.role === 'admin' || $user?.permissions?.workspace?.skills}
 							<a
 								draggable="false"
+								aria-current={$page.url.pathname.includes('/workspace/skills') ? 'page' : null}
 								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/skills')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"
@@ -130,6 +135,7 @@
 						{#if $user?.role === 'admin' || $user?.permissions?.workspace?.tools}
 							<a
 								draggable="false"
+								aria-current={$page.url.pathname.includes('/workspace/tools') ? 'page' : null}
 								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/tools')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition select-none"