From 6af91325e2eda7fb692d6060349622a05a9b463a Mon Sep 17 00:00:00 2001
From: Sine Jespersen <sinejespersen@gmail.com>
Date: Wed, 11 Jun 2025 13:41:26 +0200
Subject: [PATCH] add roles tablist and tab to tabs in settings modal

---
 src/lib/components/chat/SettingsModal.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 3cdba4fdb..9154ffa29 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -554,6 +554,7 @@
 
 		<div class="flex flex-col md:flex-row w-full px-4 pt-1 pb-4 md:space-x-4">
 			<div
+				role="tablist"
 				id="settings-tabs-container"
 				class="tabs flex flex-row overflow-x-auto gap-2.5 md:gap-1 md:flex-col flex-1 md:flex-none md:w-40 md:min-h-[32rem] md:max-h-[32rem] dark:text-gray-200 text-sm font-medium text-left mb-1 md:mb-0 -translate-y-1"
 			>
@@ -574,11 +575,11 @@
 						placeholder={$i18n.t('Search')}
 					/>
 				</div>
-
 				{#if visibleTabs.length > 0}
 					{#each visibleTabs as tabId (tabId)}
 						{#if tabId === 'general'}
 							<button
+								role="tab"
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'general'
@@ -611,6 +612,7 @@
 							</button>
 						{:else if tabId === 'interface'}
 							<button
+								role="tab"
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'interface'
@@ -644,6 +646,7 @@
 						{:else if tabId === 'connections'}
 							{#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)}
 								<button
+									role="tab"
 									class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'connections'
@@ -676,6 +679,7 @@
 						{:else if tabId === 'tools'}
 							{#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)}
 								<button
+									role="tab"
 									class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'tools'
@@ -709,6 +713,7 @@
 							{/if}
 						{:else if tabId === 'personalization'}
 							<button
+								role="tab"
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'personalization'
@@ -730,6 +735,7 @@
 							</button>
 						{:else if tabId === 'audio'}
 							<button
+								role="tab"
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'audio'
@@ -763,6 +769,7 @@
 							</button>
 						{:else if tabId === 'chats'}
 							<button
+								role="tab"
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'chats'
@@ -795,6 +802,7 @@
 							</button>
 						{:else if tabId === 'account'}
 							<button
+								role="tab"
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'account'
@@ -827,6 +835,7 @@
 							</button>
 						{:else if tabId === 'about'}
 							<button
+								role="tab"
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'about'
@@ -864,7 +873,6 @@
 						{$i18n.t('No results found')}
 					</div>
 				{/if}
-
 				{#if $user?.role === 'admin'}
 					<a
 						href="/admin/settings"