From 22117e06b54ec8c962169c6a91fb2529a448aee4 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian.danielsson@proton.me>
Date: Sun, 25 Aug 2024 23:43:28 +0200
Subject: [PATCH] A11y: Buttons do not have an accessible name

---
 src/lib/components/chat/MessageInput.svelte  | 3 +++
 src/lib/components/chat/ModelSelector.svelte | 2 ++
 src/lib/components/layout/Navbar.svelte      | 3 +++
 src/routes/(app)/admin/+layout.svelte        | 1 +
 src/routes/(app)/playground/+layout.svelte   | 1 +
 src/routes/(app)/workspace/+layout.svelte    | 1 +
 6 files changed, 11 insertions(+)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 76f80f364..55daf799b 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -504,6 +504,7 @@
 										<button
 											class="bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-2 outline-none focus:outline-none"
 											type="button"
+											aria-label="More"
 										>
 											<svg
 												xmlns="http://www.w3.org/2000/svg"
@@ -720,6 +721,7 @@
 														toast.error($i18n.t('Permission denied when accessing microphone'));
 													}
 												}}
+												aria-label="Voice Input"
 											>
 												<svg
 													xmlns="http://www.w3.org/2000/svg"
@@ -779,6 +781,7 @@
 														toast.error($i18n.t('Permission denied when accessing media devices'));
 													}
 												}}
+												aria-label="Call"
 											>
 												<Headphone className="size-6" />
 											</button>
diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte
index cb80cd2f4..244754d30 100644
--- a/src/lib/components/chat/ModelSelector.svelte
+++ b/src/lib/components/chat/ModelSelector.svelte
@@ -63,6 +63,7 @@
 							on:click={() => {
 								selectedModels = [...selectedModels, ''];
 							}}
+							aria-label="Add Model"
 						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -86,6 +87,7 @@
 								selectedModels.splice(selectedModelIdx, 1);
 								selectedModels = selectedModels;
 							}}
+							aria-label="Remove Model"
 						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 8b5e94e89..000d7efa5 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -54,6 +54,7 @@
 					on:click={() => {
 						showSidebar.set(!$showSidebar);
 					}}
+					aria-label="Toggle Sidebar"
 				>
 					<div class=" m-auto self-center">
 						<MenuLines />
@@ -111,6 +112,7 @@
 						on:click={() => {
 							showControls = !showControls;
 						}}
+						aria-label="Controls"
 					>
 						<div class=" m-auto self-center">
 							<AdjustmentsHorizontal className=" size-5" strokeWidth="0.5" />
@@ -127,6 +129,7 @@
 						on:click={() => {
 							initNewChat();
 						}}
+						aria-label="New Chat"
 					>
 						<div class=" m-auto self-center">
 							<svg
diff --git a/src/routes/(app)/admin/+layout.svelte b/src/routes/(app)/admin/+layout.svelte
index 0e2ede17b..7a2fc3c11 100644
--- a/src/routes/(app)/admin/+layout.svelte
+++ b/src/routes/(app)/admin/+layout.svelte
@@ -39,6 +39,7 @@
 						on:click={() => {
 							showSidebar.set(!$showSidebar);
 						}}
+						aria-label="Toggle Sidebar"
 					>
 						<div class=" m-auto self-center">
 							<MenuLines />
diff --git a/src/routes/(app)/playground/+layout.svelte b/src/routes/(app)/playground/+layout.svelte
index 74579665c..f4e31c0ff 100644
--- a/src/routes/(app)/playground/+layout.svelte
+++ b/src/routes/(app)/playground/+layout.svelte
@@ -29,6 +29,7 @@
 					on:click={() => {
 						showSidebar.set(!$showSidebar);
 					}}
+					aria-label="Toggle Sidebar"
 				>
 					<div class=" m-auto self-center">
 						<MenuLines />
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index f64a783d8..05ab80715 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -39,6 +39,7 @@
 						on:click={() => {
 							showSidebar.set(!$showSidebar);
 						}}
+						aria-label="Toggle Sidebar"
 					>
 						<div class=" m-auto self-center">
 							<MenuLines />