Jelajahi Sumber

add aria-selected to tabs

Sine Jespersen 4 bulan lalu
induk
melakukan
aee60add1d
1 mengubah file dengan 9 tambahan dan 0 penghapusan
  1. 9 0
      src/lib/components/chat/SettingsModal.svelte

+ 9 - 0
src/lib/components/chat/SettingsModal.svelte

@@ -580,6 +580,7 @@
 						{#if tabId === 'general'}
 							<button
 								role="tab"
+								aria-selected={selectedTab === 'general'}
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'general'
@@ -613,6 +614,7 @@
 						{:else if tabId === 'interface'}
 							<button
 								role="tab"
+								aria-selected={selectedTab === 'interface'}
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'interface'
@@ -647,6 +649,7 @@
 							{#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)}
 								<button
 									role="tab"
+									aria-selected={selectedTab === 'connections'}
 									class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'connections'
@@ -680,6 +683,7 @@
 							{#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)}
 								<button
 									role="tab"
+									aria-selected={selectedTab === 'tools'}
 									class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'tools'
@@ -714,6 +718,7 @@
 						{:else if tabId === 'personalization'}
 							<button
 								role="tab"
+								aria-selected={selectedTab === 'personalization'}
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'personalization'
@@ -736,6 +741,7 @@
 						{:else if tabId === 'audio'}
 							<button
 								role="tab"
+								aria-selected={selectedTab === 'audio'}
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'audio'
@@ -770,6 +776,7 @@
 						{:else if tabId === 'chats'}
 							<button
 								role="tab"
+								aria-selected={selectedTab === 'chats'}
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'chats'
@@ -803,6 +810,7 @@
 						{:else if tabId === 'account'}
 							<button
 								role="tab"
+								aria-selected={selectedTab === 'account'}
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'account'
@@ -836,6 +844,7 @@
 						{:else if tabId === 'about'}
 							<button
 								role="tab"
+								aria-selected={selectedTab === 'about'}
 								class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
 								${
 									selectedTab === 'about'