add aria-controls and ids to connect tabs to content

src/lib/components/chat/Settings/About.svelte

@@ -42,7 +42,7 @@
 	});
 </script>
 
-<div class="flex flex-col h-full justify-between space-y-3 text-sm mb-6">
+<div id="tab-about" class="flex flex-col h-full justify-between space-y-3 text-sm mb-6">
 	<div class=" space-y-3 overflow-y-scroll max-h-[28rem] lg:max-h-full">
 		<div>
 			<div class=" mb-2.5 text-sm font-medium flex space-x-2 items-center">

src/lib/components/chat/Settings/Account.svelte

@@ -86,7 +86,7 @@
 	});
 </script>
 
-<div class="flex flex-col h-full justify-between text-sm">
+<div id="tab-account" class="flex flex-col h-full justify-between text-sm">
 	<div class=" overflow-y-scroll max-h-[28rem] lg:max-h-full">
 		<input
 			id="profile-image-input"

src/lib/components/chat/Settings/Audio.svelte

@@ -154,6 +154,7 @@
 </script>
 
 <form
+	id="tab-audio"
 	class="flex flex-col h-full justify-between space-y-3 text-sm"
 	on:submit|preventDefault={async () => {
 		saveSettings({

src/lib/components/chat/Settings/Chats.svelte

@@ -107,7 +107,7 @@
 
 <ArchivedChatsModal bind:show={showArchivedChatsModal} onUpdate={handleArchivedChatsChange} />
 
-<div class="flex flex-col h-full justify-between space-y-3 text-sm">
+<div id="tab-chats" class="flex flex-col h-full justify-between space-y-3 text-sm">
 	<div class=" space-y-2 overflow-y-scroll max-h-[28rem] lg:max-h-full">
 		<div class="flex flex-col">
 			<input

src/lib/components/chat/Settings/Connections.svelte

@@ -70,6 +70,7 @@
 <AddConnectionModal direct bind:show={showConnectionModal} onSubmit={addConnectionHandler} />
 
 <form
+	id="tab-connections"
 	class="flex flex-col h-full justify-between text-sm"
 	on:submit|preventDefault={() => {
 		updateHandler();

src/lib/components/chat/Settings/General.svelte

@@ -187,7 +187,7 @@
 	};
 </script>
 
-<div class="flex flex-col h-full justify-between text-sm">
+<div class="flex flex-col h-full justify-between text-sm" id="tab-general">
 	<div class="  overflow-y-scroll max-h-[28rem] lg:max-h-full">
 		<div class="">
 			<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Settings')}</div>

src/lib/components/chat/Settings/Interface.svelte

@@ -348,6 +348,7 @@
 </script>
 
 <form
+	id="tab-interface"
 	class="flex flex-col h-full justify-between space-y-3 text-sm"
 	on:submit|preventDefault={() => {
 		updateInterfaceHandler();

src/lib/components/chat/Settings/Personalization.svelte

@@ -24,6 +24,7 @@
 <ManageModal bind:show={showManageModal} />
 
 <form
+	id="tab-personalization"
 	class="flex flex-col h-full justify-between space-y-3 text-sm"
 	on:submit|preventDefault={() => {
 		dispatch('save');

src/lib/components/chat/Settings/Tools.svelte

@@ -42,6 +42,7 @@
 <AddServerModal bind:show={showConnectionModal} onSubmit={addConnectionHandler} direct />
 
 <form
+	id="tab-tools"
 	class="flex flex-col h-full justify-between text-sm"
 	on:submit|preventDefault={() => {
 		updateHandler();