From 54819e288a7c6d01aca424105c101241a9b22597 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 13 Jan 2025 04:53:50 +0530
Subject: [PATCH] (feat:accessibility) add missing labels, alt text and
 contrast

---
 frontend/src/conversation/Conversation.tsx |  4 +--
 frontend/src/locale/en.json                | 12 +++++++--
 frontend/src/settings/Documents.tsx        | 11 ++++----
 frontend/src/settings/Logs.tsx             |  7 +++--
 frontend/src/settings/Tools.tsx            | 30 ++++++++++++++++------
 5 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index e1888e25..f4511fc3 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -387,7 +387,7 @@ export default function Conversation() {
           className="flex w-full items-center rounded-[40px] border border-silver bg-white dark:bg-raisin-black"
         >
           <label htmlFor="file-upload" className="sr-only">
-            {t('modals.uploadDoc.upload')}
+            {t('modals.uploadDoc.label')}
           </label>
           <input {...getInputProps()} id="file-upload" />
           <label htmlFor="message-input" className="sr-only">
@@ -398,7 +398,7 @@ export default function Conversation() {
             ref={inputRef}
             tabIndex={1}
             placeholder={t('inputPlaceholder')}
-            className={`inputbox-style w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-transparent py-5 text-base leading-tight opacity-100 focus:outline-none dark:bg-transparent dark:text-bright-gray`}
+            className={`inputbox-style w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-transparent py-5 text-base leading-tight opacity-100 focus:outline-none dark:bg-transparent dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50`}
             onInput={handleInput}
             onKeyDown={(e) => {
               if (e.key === 'Enter' && !e.shiftKey) {
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
index 9f9cbb21..79fa1097 100644
--- a/frontend/src/locale/en.json
+++ b/frontend/src/locale/en.json
@@ -70,7 +70,8 @@
         "daily": "Daily",
         "weekly": "Weekly",
         "monthly": "Monthly"
-      }
+      },
+      "actions": "Actions"
     },
     "apiKeys": {
       "label": "Chatbots",
@@ -91,7 +92,14 @@
       "apiGeneratedConversations": "API generated / chatbot conversations"
     },
     "tools": {
-      "label": "Tools"
+      "label": "Tools",
+      "searchPlaceholder": "Search tools...",
+      "addTool": "Add Tool",
+      "noToolsFound": "No tools found",
+      "settingsIconAlt": "Settings icon",
+      "configureToolAria": "Configure {toolName}",
+      "toggleToolAria": "Toggle {toolName}",
+      "selectToolSetup": "Select a tool to set up"
     }
   },
   "modals": {
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 71ba63f6..cdde16fe 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -151,6 +151,9 @@ 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={t('settings.documents.searchPlaceholder')}
@@ -161,10 +164,7 @@ 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
@@ -225,8 +225,9 @@ 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"
+                          aria-label={t('settings.documents.actions')}
                         >
-                          {' '}
+                          {t('settings.documents.actions')}
                         </th>
                       </tr>
                     </thead>
diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx
index 0f452e97..f1ebfe72 100644
--- a/frontend/src/settings/Logs.tsx
+++ b/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 />
           ) : (
diff --git a/frontend/src/settings/Tools.tsx b/frontend/src/settings/Tools.tsx
index f58487a3..3dc31e35 100644
--- a/frontend/src/settings/Tools.tsx
+++ b/frontend/src/settings/Tools.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 import userService from '../api/services/userService';
 import CogwheelIcon from '../assets/cogwheel.svg';
@@ -18,6 +19,7 @@ export default function Tools() {
     React.useState<ActiveState>('INACTIVE');
   const [userTools, setUserTools] = React.useState<UserTool[]>([]);
   const [selectedTool, setSelectedTool] = React.useState<UserTool | null>(null);
+  const { t } = useTranslation();
 
   const getUserTools = () => {
     userService
@@ -70,12 +72,15 @@ 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="Search..."
-                  name="Document-search-input"
+                  placeholder={t('settings.tools.searchPlaceholder')}
+                  name="tool-search-input"
                   type="text"
-                  id="document-search-input"
+                  id="tool-search-input"
                   value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
                 />
@@ -86,7 +91,7 @@ export default function Tools() {
                   setAddToolModalState('ACTIVE');
                 }}
               >
-                Add Tool
+                {t('settings.tools.addTool')}
               </button>
             </div>
             <div className="grid grid-cols-2 lg:grid-cols-3 gap-6">
@@ -98,10 +103,10 @@ 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="No tools found"
+                    alt={t('settings.tools.noToolsFound')}
                     className="h-24 w-24 mx-auto mb-2"
                   />
-                  No tools found
+                  {t('settings.tools.noToolsFound')}
                 </div>
               ) : (
                 userTools
@@ -119,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>
@@ -146,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}`}
@@ -164,7 +178,7 @@ export default function Tools() {
             </div>
           </div>
           <AddToolModal
-            message="Select a tool to set up"
+            message={t('settings.tools.selectToolSetup')}
             modalState={addToolModalState}
             setModalState={setAddToolModalState}
             getUserTools={getUserTools}