(sync:locales) with static content

frontend/src/settings/APIKeys.tsx

@@ -115,12 +115,20 @@ export default function APIKeys() {
                     <table className="min-w-full divide-y divide-silver dark:divide-silver/40 ">
                       <thead>
                         <tr className="text-start text-sm font-medium text-gray-700 dark:text-gray-50 uppercase">
-                          <th className="p-2">{t('settings.apiKeys.name')}</th>
-                          <th className="p-2">
+                          <th scope="col" className="p-2">
+                            {t('settings.apiKeys.name')}
+                          </th>
+                          <th scope="col" className="p-2">
                             {t('settings.apiKeys.sourceDoc')}
                           </th>
-                          <th className="p-2">{t('settings.apiKeys.key')}</th>
-                          <th></th>
+                          <th scope="col" className="p-2">
+                            {t('settings.apiKeys.key')}
+                          </th>
+                          <th
+                            scope="col"
+                            className="p-2"
+                            aria-label="Actions"
+                          ></th>
                         </tr>
                       </thead>
                       <tbody className="divide-y divide-gray-200 dark:divide-neutral-700">
@@ -146,7 +154,7 @@ export default function APIKeys() {
                               <td>
                                 <img
                                   src={Trash}
-                                  alt="Delete"
+                                  alt={`Delete ${element.name}`}
                                   className="h-4 w-4 cursor-pointer hover:opacity-50"
                                   id={`img-${index}`}
                                   onClick={() => handleDeleteKey(element.id)}

frontend/src/settings/Analytics.tsx

@@ -215,6 +215,7 @@ export default function Analytics() {
             }
             rounded="3xl"
             border="border"
+            borderColor="gray-700"
           />
         </div>
 

frontend/src/settings/Documents.tsx

@@ -54,10 +54,10 @@ const Documents: React.FC<DocumentsProps> = ({
   const [totalPages, setTotalPages] = useState<number>(1);
   const currentDocuments = paginatedDocuments ?? [];
   const syncOptions = [
-    { label: 'Never', value: 'never' },
-    { label: 'Daily', value: 'daily' },
-    { label: 'Weekly', value: 'weekly' },
-    { label: 'Monthly', value: 'monthly' },
+    { label: t('settings.documents.syncFrequency.never'), value: 'never' },
+    { label: t('settings.documents.syncFrequency.daily'), value: 'daily' },
+    { label: t('settings.documents.syncFrequency.weekly'), value: 'weekly' },
+    { label: t('settings.documents.syncFrequency.monthly'), value: 'monthly' },
   ];
 
   const refreshDocs = useCallback(
@@ -151,9 +151,12 @@ const Documents: React.FC<DocumentsProps> = ({
         <div className="z-10 w-full overflow-x-auto">
           <div className="my-3 flex justify-between items-center">
             <div className="p-1">
+              <label htmlFor="document-search-input" className="sr-only">
+                {t('settings.documents.searchPlaceholder')}
+              </label>
               <Input
                 maxLength={256}
-                placeholder="Search..."
+                placeholder={t('settings.documents.searchPlaceholder')}
                 name="Document-search-input"
                 type="text"
                 id="document-search-input"
@@ -161,21 +164,18 @@ const Documents: React.FC<DocumentsProps> = ({
                 onChange={(e) => {
                   setSearchTerm(e.target.value);
                   setCurrentPage(1);
-                  // refreshDocs(sortField, 1, rowsPerPage);
-                  // do not call refreshDocs here the state is async
-                  // so it will not have the updated value
-                }} // Handle search input change
+                }}
               />
             </div>
             <button
               className="rounded-full w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
-              title="Add New Document"
+              title={t('settings.documents.addNew')}
               onClick={() => {
-                setIsOnboarding(false); // Set onboarding flag if needed
-                setModalState('ACTIVE'); // Open the upload modal
+                setIsOnboarding(false);
+                setModalState('ACTIVE');
               }}
             >
-              Add New
+              {t('settings.documents.addNew')}
             </button>
           </div>
           {loading ? (
@@ -224,9 +224,10 @@ const Documents: React.FC<DocumentsProps> = ({
                         */}
                         <th
                           scope="col"
-                          className="px-6 py-2 text-start font-medium text-gray-700 dark:text-gray-50 uppercase"
+                          className="px-6 py-2 text-start font-medium text-gray-700 dark:text-gray-50 uppercase sr-only"
+                          aria-label={t('settings.documents.actions')}
                         >
-                          {' '}
+                          {t('settings.documents.actions')}
                         </th>
                       </tr>
                     </thead>
@@ -270,7 +271,7 @@ const Documents: React.FC<DocumentsProps> = ({
                                 {document.type !== 'remote' && (
                                   <img
                                     src={Trash}
-                                    alt="Delete"
+                                    alt={t('convTile.delete')}
                                     className="h-4 w-4 cursor-pointer opacity-60 hover:opacity-100"
                                     id={`img-${index}`}
                                     onClick={(event) => {
@@ -282,7 +283,7 @@ const Documents: React.FC<DocumentsProps> = ({
                                 {document.syncFrequency && (
                                   <div className="ml-2">
                                     <DropdownMenu
-                                      name="Sync"
+                                      name={t('settings.documents.sync')}
                                       options={syncOptions}
                                       onSelect={(value: string) => {
                                         handleManageSync(document, value);

frontend/src/settings/General.tsx

@@ -27,30 +27,12 @@ export default function General() {
   ];
 
   const languageOptions = [
-    {
-      label: 'English',
-      value: 'en',
-    },
-    {
-      label: 'Spanish',
-      value: 'es',
-    },
-    {
-      label: 'Japanese',
-      value: 'jp',
-    },
-    {
-      label: 'Mandarin',
-      value: 'zh',
-    },
-    {
-      label: 'Traditional Chinese',
-      value: 'zhTW',
-    },
-    {
-      label: 'Russian',
-      value: 'ru',
-    },
+    { label: 'English', value: 'en' },
+    { label: 'Español', value: 'es' },
+    { label: '日本語', value: 'jp' },
+    { label: '普通话', value: 'zh' },
+    { label: '繁體中文（臺灣）', value: 'zhTW' },
+    { label: 'Русский', value: 'ru' },
   ];
   const chunks = ['0', '2', '4', '6', '8', '10'];
   const token_limits = new Map([
@@ -102,9 +84,9 @@ export default function General() {
   return (
     <div className="mt-12">
       <div className="mb-5">
-        <p className="font-bold text-jet dark:text-bright-gray">
+        <label className="block font-bold text-jet dark:text-bright-gray">
           {t('settings.general.selectTheme')}
-        </p>
+        </label>
         <Dropdown
           options={themes}
           selectedValue={
@@ -120,9 +102,9 @@ export default function General() {
         />
       </div>
       <div className="mb-5">
-        <p className="mb-2 font-bold text-jet dark:text-bright-gray">
+        <label className="block mb-2 font-bold text-jet dark:text-bright-gray">
           {t('settings.general.selectLanguage')}
-        </p>
+        </label>
         <Dropdown
           options={languageOptions.filter(
             (languageOption) =>
@@ -138,9 +120,9 @@ export default function General() {
         />
       </div>
       <div className="mb-5">
-        <p className="font-bold text-jet dark:text-bright-gray">
+        <label className="block font-bold text-jet dark:text-bright-gray">
           {t('settings.general.chunks')}
-        </p>
+        </label>
         <Dropdown
           options={chunks}
           selectedValue={selectedChunks}
@@ -151,9 +133,9 @@ export default function General() {
         />
       </div>
       <div className="mb-5">
-        <p className="mb-2 font-bold text-jet dark:text-bright-gray">
+        <label className="mb-2 block font-bold text-jet dark:text-bright-gray">
           {t('settings.general.convHistory')}
-        </p>
+        </label>
         <Dropdown
           options={Array.from(token_limits, ([value, desc]) => ({
             value: value,
@@ -186,16 +168,14 @@ export default function General() {
         />
       </div>
       <div className="w-56">
-        <p className="font-bold text-jet dark:text-bright-gray">
+        <label className="block font-bold text-jet dark:text-bright-gray">
           {t('settings.general.deleteAllLabel')}
-        </p>
+        </label>
         <button
-          className="mt-2 flex w-full cursor-pointer items-center justify-between rounded-3xl  border border-solid border-red-500 px-5 py-3 text-red-500 hover:bg-red-500 hover:text-white"
+          className="mt-2 flex w-full cursor-pointer items-center justify-between rounded-3xl border border-solid border-red-700 px-5 py-3 text-red-700 transition-colors hover:bg-red-700 hover:text-white dark:border-red-600 dark:text-red-600 dark:hover:bg-red-600 dark:hover:text-white"
           onClick={() => dispatch(setModalStateDeleteConv('ACTIVE'))}
         >
-          <span className="overflow-hidden text-ellipsis ">
-            {t('settings.general.deleteAllBtn')}
-          </span>
+          {t('settings.general.deleteAllBtn')}
         </button>
       </div>
     </div>

frontend/src/settings/Logs.tsx

@@ -67,9 +67,12 @@ export default function Logs() {
     <div className="mt-12">
       <div className="flex flex-col items-start">
         <div className="flex flex-col gap-3">
-          <p className="font-bold text-jet dark:text-bright-gray">
+          <label
+            id="chatbot-filter-label"
+            className="font-bold text-jet dark:text-bright-gray"
+          >
             {t('settings.logs.filterByChatbot')}
-          </p>
+          </label>
           {loadingChatbots ? (
             <SkeletonLoader />
           ) : (

frontend/src/settings/Prompts.tsx

@@ -168,7 +168,7 @@ export default function Prompts({
             />
           </div>
           <button
-            className="mt-[24px] rounded-3xl border border-solid border-purple-30 px-5 py-3 text-purple-30 hover:bg-purple-30 hover:text-white"
+            className="mt-[24px] rounded-3xl border border-solid border-purple-700 px-5 py-3 text-purple-700 transition-colors hover:bg-purple-700 hover:text-white dark:border-purple-400 dark:text-purple-400 dark:hover:bg-purple-400 dark:hover:text-white"
             onClick={() => {
               setModalType('ADD');
               setModalState('ACTIVE');

frontend/src/settings/Tools.tsx

@@ -72,18 +72,21 @@ export default function Tools() {
           <div className="flex flex-col relative">
             <div className="my-3 flex justify-between items-center gap-1">
               <div className="p-1">
+                <label htmlFor="tool-search-input" className="sr-only">
+                  {t('settings.tools.searchPlaceholder')}
+                </label>
                 <Input
                   maxLength={256}
                   placeholder={t('settings.tools.searchPlaceholder')}
                   name="Document-search-input"
                   type="text"
-                  id="document-search-input"
+                  id="tool-search-input"
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
                 />
               </div>
               <button
-                className="rounded-full w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1] text-nowrap"
+                className="rounded-full min-w-[160px] bg-purple-30 px-6 py-3 text-white hover:bg-[#6F3FD1] text-nowrap"
                 onClick={() => {
                   setAddToolModalState('ACTIVE');
                 }}
@@ -100,7 +103,7 @@ export default function Tools() {
                 <div className="mt-24 col-span-2 lg:col-span-3 text-center text-gray-500 dark:text-gray-400">
                   <img
                     src={isDarkTheme ? NoFilesDarkIcon : NoFilesIcon}
-                    alt={t('settings.tools.noToolsAlt')}
+                    alt="No tools found"
                     className="h-24 w-24 mx-auto mb-2"
                   />
                   {t('settings.tools.noToolsFound')}
@@ -121,15 +124,19 @@ export default function Tools() {
                         <div className="w-full flex items-center justify-between">
                           <img
                             src={`/toolIcons/tool_${tool.name}.svg`}
+                            alt={`${tool.displayName} icon`}
                             className="h-8 w-8"
                           />
                           <button
                             className="absolute top-3 right-3 cursor-pointer"
                             onClick={() => handleSettingsClick(tool)}
+                            aria-label={t('settings.tools.configureToolAria', {
+                              toolName: tool.displayName,
+                            })}
                           >
                             <img
                               src={CogwheelIcon}
-                              alt="settings"
+                              alt={t('settings.tools.settingsIconAlt')}
                               className="h-[19px] w-[19px]"
                             />
                           </button>
@@ -148,6 +155,11 @@ export default function Tools() {
                           htmlFor={`toolToggle-${index}`}
                           className="relative inline-block h-6 w-10 cursor-pointer rounded-full bg-gray-300 dark:bg-[#D2D5DA33]/20 transition [-webkit-tap-highlight-color:_transparent] has-[:checked]:bg-[#0C9D35CC] has-[:checked]:dark:bg-[#0C9D35CC]"
                         >
+                          <span className="sr-only">
+                            {t('settings.tools.toggleToolAria', {
+                              toolName: tool.displayName,
+                            })}
+                          </span>
                           <input
                             type="checkbox"
                             id={`toolToggle-${index}`}

frontend/src/settings/index.tsx

@@ -91,8 +91,8 @@ export default function Settings() {
       case 'Widgets':
         return (
           <Widgets
-            widgetScreenshot={widgetScreenshot} // Add this line
-            onWidgetScreenshotChange={updateWidgetScreenshot} // Add this line
+            widgetScreenshot={widgetScreenshot}
+            onWidgetScreenshotChange={updateWidgetScreenshot}
           />
         );
       case t('settings.apiKeys.label'):