From 5b642f043f14f02c9dd812146f247c61cf4b4720 Mon Sep 17 00:00:00 2001
From: Jing Hua <59118459+ztjhz@users.noreply.github.com>
Date: Wed, 19 Jul 2023 20:48:08 -0700
Subject: [PATCH] a11y button (#335)

fixes issue #333
---
 src/components/ApiMenu/ApiMenu.tsx            |  1 +
 src/components/Chat/ChatContent/CloneChat.tsx |  6 ++++-
 .../Chat/ChatContent/DownloadChat.tsx         |  4 ++++
 .../Chat/ChatContent/Message/CodeBlock.tsx    |  1 +
 .../Message/CommandPrompt/CommandPrompt.tsx   |  4 ++--
 .../ChatContent/Message/NewMessageButton.tsx  |  6 ++++-
 .../Chat/ChatContent/Message/RoleSelector.tsx |  1 +
 .../Message/View/Button/BaseButton.tsx        |  3 +++
 .../Message/View/Button/CopyButton.tsx        |  1 +
 .../Message/View/Button/DeleteButton.tsx      |  6 ++++-
 .../Message/View/Button/DownButton.tsx        |  8 ++++++-
 .../Message/View/Button/EditButton.tsx        |  8 ++++++-
 .../View/Button/MarkdownModeButton.tsx        |  1 +
 .../Message/View/Button/RefreshButton.tsx     |  8 ++++++-
 .../Message/View/Button/UpButton.tsx          |  1 +
 .../ChatContent/Message/View/ContentView.tsx  |  7 +++++-
 .../ChatContent/Message/View/EditView.tsx     |  4 ++++
 .../Chat/ChatContent/ScrollToBottomButton.tsx |  1 +
 src/components/Chat/ChatInput.tsx             |  5 +++-
 .../ChatConfigMenu/ChatConfigMenu.tsx         |  6 ++++-
 src/components/ConfigMenu/ConfigMenu.tsx      |  1 +
 .../GoogleSync/GoogleSyncButton.tsx           | 12 ++++++++--
 .../ImportExportChat/ExportChat.tsx           |  1 +
 .../ImportExportChat/ImportChat.tsx           |  1 +
 .../ImportExportChat/ImportChatOpenAI.tsx     |  1 +
 .../LanguageSelector/LanguageSelector.tsx     |  1 +
 src/components/Menu/ChatFolder.tsx            | 23 ++++++++++++++++---
 src/components/Menu/ChatHistory.tsx           | 14 +++++++++--
 .../Menu/MenuOptions/ClearConversation.tsx    |  4 +++-
 .../Menu/MenuOptions/ThemeSwitcher.tsx        |  1 +
 src/components/MobileBar/MobileBar.tsx        |  2 ++
 src/components/PopupModal/PopupModal.tsx      |  3 +++
 .../PromptLibraryMenu/ExportPrompt.tsx        |  1 +
 .../PromptLibraryMenu/ImportPrompt.tsx        |  1 +
 .../PromptLibraryMenu/PromptLibraryMenu.tsx   |  6 ++++-
 src/components/ShareGPT/ShareGPT.tsx          |  1 +
 .../StopGeneratingButton.tsx                  |  5 +++-
 37 files changed, 139 insertions(+), 21 deletions(-)

diff --git a/src/components/ApiMenu/ApiMenu.tsx b/src/components/ApiMenu/ApiMenu.tsx
index 12a3b5d..23a99d1 100644
--- a/src/components/ApiMenu/ApiMenu.tsx
+++ b/src/components/ApiMenu/ApiMenu.tsx
@@ -132,6 +132,7 @@ const ApiEndpointSelector = ({
       <button
         className='btn btn-neutral btn-small flex justify-between w-full'
         type='button'
+        aria-label='expand api menu'
         onClick={() => setDropDown((prev) => !prev)}
       >
         <span className='truncate'>{_apiEndpoint}</span>
diff --git a/src/components/Chat/ChatContent/CloneChat.tsx b/src/components/Chat/ChatContent/CloneChat.tsx
index 36c199c..e05e097 100644
--- a/src/components/Chat/ChatContent/CloneChat.tsx
+++ b/src/components/Chat/ChatContent/CloneChat.tsx
@@ -44,7 +44,11 @@ const CloneChat = React.memo(() => {
   };
 
   return (
-    <button className='btn btn-neutral flex gap-1' onClick={cloneChat}>
+    <button
+      className='btn btn-neutral flex gap-1'
+      aria-label={t('cloneChat') as string}
+      onClick={cloneChat}
+    >
       {cloned ? (
         <>
           <TickIcon /> {t('cloned')}
diff --git a/src/components/Chat/ChatContent/DownloadChat.tsx b/src/components/Chat/ChatContent/DownloadChat.tsx
index e7da03a..9824346 100644
--- a/src/components/Chat/ChatContent/DownloadChat.tsx
+++ b/src/components/Chat/ChatContent/DownloadChat.tsx
@@ -24,6 +24,7 @@ const DownloadChat = React.memo(
       <>
         <button
           className='btn btn-neutral'
+          aria-label={t('downloadChat') as string}
           onClick={() => {
             setIsModalOpen(true);
           }}
@@ -39,6 +40,7 @@ const DownloadChat = React.memo(
             <div className='p-6 border-b border-gray-200 dark:border-gray-600 flex gap-4'>
               <button
                 className='btn btn-neutral gap-2'
+                aria-label='image'
                 onClick={async () => {
                   if (saveRef && saveRef.current) {
                     const imgData = await htmlToImg(saveRef.current);
@@ -82,6 +84,7 @@ const DownloadChat = React.memo(
               </button> */}
               <button
                 className='btn btn-neutral gap-2'
+                aria-label='markdown'
                 onClick={async () => {
                   if (saveRef && saveRef.current) {
                     const chats = useStore.getState().chats;
@@ -106,6 +109,7 @@ const DownloadChat = React.memo(
               </button>
               <button
                 className='btn btn-neutral gap-2'
+                aria-label='json'
                 onClick={async () => {
                   const chats = useStore.getState().chats;
                   if (chats) {
diff --git a/src/components/Chat/ChatContent/Message/CodeBlock.tsx b/src/components/Chat/ChatContent/Message/CodeBlock.tsx
index f40f41e..a277350 100644
--- a/src/components/Chat/ChatContent/Message/CodeBlock.tsx
+++ b/src/components/Chat/ChatContent/Message/CodeBlock.tsx
@@ -38,6 +38,7 @@ const CodeBar = React.memo(
         <span className=''>{lang}</span>
         <button
           className='flex ml-auto gap-2'
+          aria-label='copy codeblock'
           onClick={async () => {
             const codeString = codeRef.current?.textContent;
             if (codeString)
diff --git a/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx b/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
index 3ea628f..e61ba00 100644
--- a/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
+++ b/src/components/Chat/ChatContent/Message/CommandPrompt/CommandPrompt.tsx
@@ -20,14 +20,13 @@ const CommandPrompt = ({
 
   const [dropDown, setDropDown, dropDownRef] = useHideOnOutsideClick();
 
-
   useEffect(() => {
     if (dropDown && inputRef.current) {
       // When dropdown is visible, focus the input
       inputRef.current.focus();
     }
   }, [dropDown]);
-  
+
   useEffect(() => {
     const filteredPrompts = matchSorter(useStore.getState().prompts, input, {
       keys: ['name'],
@@ -44,6 +43,7 @@ const CommandPrompt = ({
     <div className='relative max-wd-sm' ref={dropDownRef}>
       <button
         className='btn btn-neutral btn-small'
+        aria-label='prompt library'
         onClick={() => setDropDown(!dropDown)}
       >
         /
diff --git a/src/components/Chat/ChatContent/Message/NewMessageButton.tsx b/src/components/Chat/ChatContent/Message/NewMessageButton.tsx
index 4c9fd83..2dd034d 100644
--- a/src/components/Chat/ChatContent/Message/NewMessageButton.tsx
+++ b/src/components/Chat/ChatContent/Message/NewMessageButton.tsx
@@ -46,7 +46,11 @@ const NewMessageButton = React.memo(
     };
 
     return (
-      <div className='h-0 w-0 relative' key={messageIndex}>
+      <div
+        className='h-0 w-0 relative'
+        key={messageIndex}
+        aria-label='insert message'
+      >
         <div
           className='absolute top-0 right-0 translate-x-1/2 translate-y-[-50%] text-gray-600 dark:text-white cursor-pointer bg-gray-200 dark:bg-gray-600/80 rounded-full p-1 text-sm hover:bg-gray-300 dark:hover:bg-gray-800/80 transition-bg duration-200'
           onClick={addMessage}
diff --git a/src/components/Chat/ChatContent/Message/RoleSelector.tsx b/src/components/Chat/ChatContent/Message/RoleSelector.tsx
index 8e3ac67..196331a 100644
--- a/src/components/Chat/ChatContent/Message/RoleSelector.tsx
+++ b/src/components/Chat/ChatContent/Message/RoleSelector.tsx
@@ -28,6 +28,7 @@ const RoleSelector = React.memo(
       <div className='prose dark:prose-invert relative'>
         <button
           className='btn btn-neutral btn-small flex gap-1'
+          aria-label={t(role) as string}
           type='button'
           onClick={() => setDropDown((prev) => !prev)}
         >
diff --git a/src/components/Chat/ChatContent/Message/View/Button/BaseButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/BaseButton.tsx
index 59afd4e..cba1211 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/BaseButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/BaseButton.tsx
@@ -3,15 +3,18 @@ import React from 'react';
 const BaseButton = ({
   onClick,
   icon,
+  buttonProps,
 }: {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   icon: React.ReactElement;
+  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }) => {
   return (
     <div className='text-gray-400 flex self-end lg:self-center justify-center gap-3 md:gap-4  visible'>
       <button
         className='p-1 rounded-md hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible'
         onClick={onClick}
+        {...buttonProps}
       >
         {icon}
       </button>
diff --git a/src/components/Chat/ChatContent/Message/View/Button/CopyButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/CopyButton.tsx
index 76ae6c6..6d2f177 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/CopyButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/CopyButton.tsx
@@ -15,6 +15,7 @@ const CopyButton = ({
   return (
     <BaseButton
       icon={isCopied ? <TickIcon /> : <CopyIcon />}
+      buttonProps={{ 'aria-label': 'copy message' }}
       onClick={(e) => {
         onClick(e);
         setIsCopied(true);
diff --git a/src/components/Chat/ChatContent/Message/View/Button/DeleteButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/DeleteButton.tsx
index 4853fd8..235e6d1 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/DeleteButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/DeleteButton.tsx
@@ -11,7 +11,11 @@ const DeleteButton = memo(
     setIsDelete: React.Dispatch<React.SetStateAction<boolean>>;
   }) => {
     return (
-      <BaseButton icon={<DeleteIcon />} onClick={() => setIsDelete(true)} />
+      <BaseButton
+        icon={<DeleteIcon />}
+        buttonProps={{ 'aria-label': 'delete message' }}
+        onClick={() => setIsDelete(true)}
+      />
     );
   }
 );
diff --git a/src/components/Chat/ChatContent/Message/View/Button/DownButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/DownButton.tsx
index 8310be5..b42d836 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/DownButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/DownButton.tsx
@@ -9,7 +9,13 @@ const DownButton = ({
 }: {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
 }) => {
-  return <BaseButton icon={<DownChevronArrow />} onClick={onClick} />;
+  return (
+    <BaseButton
+      icon={<DownChevronArrow />}
+      buttonProps={{ 'aria-label': 'shift message down' }}
+      onClick={onClick}
+    />
+  );
 };
 
 export default DownButton;
diff --git a/src/components/Chat/ChatContent/Message/View/Button/EditButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/EditButton.tsx
index 449b0d4..a1715e9 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/EditButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/EditButton.tsx
@@ -10,7 +10,13 @@ const EditButton = memo(
   }: {
     setIsEdit: React.Dispatch<React.SetStateAction<boolean>>;
   }) => {
-    return <BaseButton icon={<EditIcon2 />} onClick={() => setIsEdit(true)} />;
+    return (
+      <BaseButton
+        icon={<EditIcon2 />}
+        buttonProps={{ 'aria-label': 'edit message' }}
+        onClick={() => setIsEdit(true)}
+      />
+    );
   }
 );
 
diff --git a/src/components/Chat/ChatContent/Message/View/Button/MarkdownModeButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/MarkdownModeButton.tsx
index 402116b..60d6cbb 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/MarkdownModeButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/MarkdownModeButton.tsx
@@ -14,6 +14,7 @@ const MarkdownModeButton = () => {
   return (
     <BaseButton
       icon={markdownMode ? <MarkdownIcon /> : <FileTextIcon />}
+      buttonProps={{ 'aria-label': 'toggle markdown mode' }}
       onClick={() => {
         setMarkdownMode(!markdownMode);
       }}
diff --git a/src/components/Chat/ChatContent/Message/View/Button/RefreshButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/RefreshButton.tsx
index b294478..a270cd4 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/RefreshButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/RefreshButton.tsx
@@ -9,7 +9,13 @@ const RefreshButton = ({
 }: {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
 }) => {
-  return <BaseButton icon={<RefreshIcon />} onClick={onClick} />;
+  return (
+    <BaseButton
+      icon={<RefreshIcon />}
+      buttonProps={{ 'aria-label': 'regenerate message' }}
+      onClick={onClick}
+    />
+  );
 };
 
 export default RefreshButton;
diff --git a/src/components/Chat/ChatContent/Message/View/Button/UpButton.tsx b/src/components/Chat/ChatContent/Message/View/Button/UpButton.tsx
index bc40941..e8470d9 100644
--- a/src/components/Chat/ChatContent/Message/View/Button/UpButton.tsx
+++ b/src/components/Chat/ChatContent/Message/View/Button/UpButton.tsx
@@ -12,6 +12,7 @@ const UpButton = ({
   return (
     <BaseButton
       icon={<DownChevronArrow className='rotate-180' />}
+      buttonProps={{ 'aria-label': 'shift message up' }}
       onClick={onClick}
     />
   );
diff --git a/src/components/Chat/ChatContent/Message/View/ContentView.tsx b/src/components/Chat/ChatContent/Message/View/ContentView.tsx
index d0d4724..ad4c415 100644
--- a/src/components/Chat/ChatContent/Message/View/ContentView.tsx
+++ b/src/components/Chat/ChatContent/Message/View/ContentView.tsx
@@ -158,11 +158,16 @@ const ContentView = memo(
             <>
               <button
                 className='p-1 hover:text-white'
+                aria-label='cancel'
                 onClick={() => setIsDelete(false)}
               >
                 <CrossIcon />
               </button>
-              <button className='p-1 hover:text-white' onClick={handleDelete}>
+              <button
+                className='p-1 hover:text-white'
+                aria-label='confirm'
+                onClick={handleDelete}
+              >
                 <TickIcon />
               </button>
             </>
diff --git a/src/components/Chat/ChatContent/Message/View/EditView.tsx b/src/components/Chat/ChatContent/Message/View/EditView.tsx
index 9b91791..656e7ba 100644
--- a/src/components/Chat/ChatContent/Message/View/EditView.tsx
+++ b/src/components/Chat/ChatContent/Message/View/EditView.tsx
@@ -189,6 +189,7 @@ const EditViewButtons = memo(
                 generating ? 'cursor-not-allowed opacity-40' : ''
               }`}
               onClick={handleSaveAndSubmit}
+              aria-label={t('saveAndSubmit') as string}
             >
               <div className='flex items-center justify-center gap-2'>
                 {t('saveAndSubmit')}
@@ -205,6 +206,7 @@ const EditViewButtons = memo(
                 : 'btn-primary'
             }`}
             onClick={handleSave}
+            aria-label={t('save') as string}
           >
             <div className='flex items-center justify-center gap-2'>
               {t('save')}
@@ -217,6 +219,7 @@ const EditViewButtons = memo(
               onClick={() => {
                 !generating && setIsModalOpen(true);
               }}
+              aria-label={t('saveAndSubmit') as string}
             >
               <div className='flex items-center justify-center gap-2'>
                 {t('saveAndSubmit')}
@@ -228,6 +231,7 @@ const EditViewButtons = memo(
             <button
               className='btn relative btn-neutral'
               onClick={() => setIsEdit(false)}
+              aria-label={t('cancel') as string}
             >
               <div className='flex items-center justify-center gap-2'>
                 {t('cancel')}
diff --git a/src/components/Chat/ChatContent/ScrollToBottomButton.tsx b/src/components/Chat/ChatContent/ScrollToBottomButton.tsx
index cd31f26..cb366f2 100644
--- a/src/components/Chat/ChatContent/ScrollToBottomButton.tsx
+++ b/src/components/Chat/ChatContent/ScrollToBottomButton.tsx
@@ -12,6 +12,7 @@ const ScrollToBottomButton = React.memo(() => {
       className={`cursor-pointer absolute right-6 bottom-[60px] md:bottom-[60px] z-10 rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200 ${
         atBottom ? 'hidden' : ''
       }`}
+      aria-label='scroll to bottom'
       onClick={scrollToBottom}
     >
       <DownArrow />
diff --git a/src/components/Chat/ChatInput.tsx b/src/components/Chat/ChatInput.tsx
index 9edc276..8cd4ff4 100644
--- a/src/components/Chat/ChatInput.tsx
+++ b/src/components/Chat/ChatInput.tsx
@@ -24,7 +24,10 @@ const TextField = () => {
         className='m-0 w-full resize-none border-0 bg-transparent p-0 pl-2 pr-7 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-0'
         style={{ maxHeight: '200px', height: '24px', overflowY: 'hidden' }}
       ></textarea>
-      <button className='absolute p-1 rounded-md text-gray-500 bottom-1.5 right-1 md:bottom-2.5 md:right-2 hover:bg-gray-100 dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent'>
+      <button
+        className='absolute p-1 rounded-md text-gray-500 bottom-1.5 right-1 md:bottom-2.5 md:right-2 hover:bg-gray-100 dark:hover:text-gray-400 dark:hover:bg-gray-900 disabled:hover:bg-transparent dark:disabled:hover:bg-transparent'
+        aria-label='submit'
+      >
         <SendIcon />
       </button>
     </div>
diff --git a/src/components/ChatConfigMenu/ChatConfigMenu.tsx b/src/components/ChatConfigMenu/ChatConfigMenu.tsx
index 8bef767..cc9e049 100644
--- a/src/components/ChatConfigMenu/ChatConfigMenu.tsx
+++ b/src/components/ChatConfigMenu/ChatConfigMenu.tsx
@@ -20,7 +20,11 @@ const ChatConfigMenu = () => {
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   return (
     <div>
-      <button className='btn btn-neutral' onClick={() => setIsModalOpen(true)}>
+      <button
+        className='btn btn-neutral'
+        onClick={() => setIsModalOpen(true)}
+        aria-label={t('defaultChatConfig') as string}
+      >
         {t('defaultChatConfig')}
       </button>
       {isModalOpen && <ChatConfigPopup setIsModalOpen={setIsModalOpen} />}
diff --git a/src/components/ConfigMenu/ConfigMenu.tsx b/src/components/ConfigMenu/ConfigMenu.tsx
index f8ad002..52f5c39 100644
--- a/src/components/ConfigMenu/ConfigMenu.tsx
+++ b/src/components/ConfigMenu/ConfigMenu.tsx
@@ -86,6 +86,7 @@ export const ModelSelector = ({
         className='btn btn-neutral btn-small flex gap-1'
         type='button'
         onClick={() => setDropDown((prev) => !prev)}
+        aria-label='model'
       >
         {_model}
         <DownChevronArrow />
diff --git a/src/components/GoogleSync/GoogleSyncButton.tsx b/src/components/GoogleSync/GoogleSyncButton.tsx
index 69d21ec..3a1c43f 100644
--- a/src/components/GoogleSync/GoogleSyncButton.tsx
+++ b/src/components/GoogleSync/GoogleSyncButton.tsx
@@ -52,11 +52,19 @@ const GoogleSyncButton = ({ loginHandler }: { loginHandler?: () => void }) => {
 
   return (
     <div className='flex gap-4 flex-wrap justify-center'>
-      <button className='btn btn-primary' onClick={() => login()}>
+      <button
+        className='btn btn-primary'
+        onClick={() => login()}
+        aria-label={t('button.sync') as string}
+      >
         {t('button.sync')}
       </button>
       {cloudSync && (
-        <button className='btn btn-neutral' onClick={logout}>
+        <button
+          className='btn btn-neutral'
+          onClick={logout}
+          aria-label={t('button.stop') as string}
+        >
           {t('button.stop')}
         </button>
       )}
diff --git a/src/components/ImportExportChat/ExportChat.tsx b/src/components/ImportExportChat/ExportChat.tsx
index c4ef881..f451533 100644
--- a/src/components/ImportExportChat/ExportChat.tsx
+++ b/src/components/ImportExportChat/ExportChat.tsx
@@ -26,6 +26,7 @@ const ExportChat = () => {
           };
           downloadFile(fileData, getToday());
         }}
+        aria-label={t('export') as string}
       >
         {t('export')}
       </button>
diff --git a/src/components/ImportExportChat/ImportChat.tsx b/src/components/ImportExportChat/ImportChat.tsx
index 6562dd5..eb6a736 100644
--- a/src/components/ImportExportChat/ImportChat.tsx
+++ b/src/components/ImportExportChat/ImportChat.tsx
@@ -152,6 +152,7 @@ const ImportChat = () => {
       <button
         className='btn btn-small btn-primary mt-3'
         onClick={handleFileUpload}
+        aria-label={t('import') as string}
       >
         {t('import')}
       </button>
diff --git a/src/components/ImportExportChat/ImportChatOpenAI.tsx b/src/components/ImportExportChat/ImportChatOpenAI.tsx
index 734aadb..b3022dc 100644
--- a/src/components/ImportExportChat/ImportChatOpenAI.tsx
+++ b/src/components/ImportExportChat/ImportChatOpenAI.tsx
@@ -68,6 +68,7 @@ const ImportChatOpenAI = ({
       <button
         className='btn btn-small btn-primary mt-3'
         onClick={handleFileUpload}
+        aria-label={t('import') as string}
       >
         {t('import')}
       </button>
diff --git a/src/components/LanguageSelector/LanguageSelector.tsx b/src/components/LanguageSelector/LanguageSelector.tsx
index f5f5d23..fab1268 100644
--- a/src/components/LanguageSelector/LanguageSelector.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.tsx
@@ -14,6 +14,7 @@ const LanguageSelector = () => {
         className='btn btn-neutral btn-small w-36 flex justify-between'
         type='button'
         onClick={() => setDropDown((prev) => !prev)}
+        aria-label='language selector'
       >
         {languageCodeToName[i18n.language as keyof typeof languageCodeToName] ??
           i18n.language}
diff --git a/src/components/Menu/ChatFolder.tsx b/src/components/Menu/ChatFolder.tsx
index 383e7c2..42b144c 100644
--- a/src/components/Menu/ChatFolder.tsx
+++ b/src/components/Menu/ChatFolder.tsx
@@ -211,10 +211,18 @@ const ChatFolder = ({
         >
           {isDelete || isEdit ? (
             <>
-              <button className='p-1 hover:text-white' onClick={handleTick}>
+              <button
+                className='p-1 hover:text-white'
+                onClick={handleTick}
+                aria-label='confirm'
+              >
                 <TickIcon />
               </button>
-              <button className='p-1 hover:text-white' onClick={handleCross}>
+              <button
+                className='p-1 hover:text-white'
+                onClick={handleCross}
+                aria-label='cancel'
+              >
                 <CrossIcon />
               </button>
             </>
@@ -229,6 +237,7 @@ const ChatFolder = ({
                   onClick={() => {
                     setShowPalette((prev) => !prev);
                   }}
+                  aria-label='folder color'
                 >
                   <ColorPaletteIcon />
                 </button>
@@ -243,12 +252,14 @@ const ChatFolder = ({
                           onClick={() => {
                             updateColor(c);
                           }}
+                          aria-label={c}
                         />
                       ))}
                       <button
                         onClick={() => {
                           updateColor();
                         }}
+                        aria-label='default color'
                       >
                         <RefreshIcon />
                       </button>
@@ -260,16 +271,22 @@ const ChatFolder = ({
               <button
                 className='p-1 hover:text-white md:hidden group-hover/folder:md:inline'
                 onClick={() => setIsEdit(true)}
+                aria-label='edit folder title'
               >
                 <EditIcon />
               </button>
               <button
                 className='p-1 hover:text-white md:hidden group-hover/folder:md:inline'
                 onClick={() => setIsDelete(true)}
+                aria-label='delete folder'
               >
                 <DeleteIcon />
               </button>
-              <button className='p-1 hover:text-white' onClick={toggleExpanded}>
+              <button
+                className='p-1 hover:text-white'
+                onClick={toggleExpanded}
+                aria-label='expand folder'
+              >
                 <DownChevronArrow
                   className={`${
                     isExpanded ? 'rotate-180' : ''
diff --git a/src/components/Menu/ChatHistory.tsx b/src/components/Menu/ChatHistory.tsx
index e109a3c..f36eff6 100644
--- a/src/components/Menu/ChatHistory.tsx
+++ b/src/components/Menu/ChatHistory.tsx
@@ -131,10 +131,18 @@ const ChatHistory = React.memo(
           <div className='absolute flex right-1 z-10 text-gray-300 visible'>
             {isDelete || isEdit ? (
               <>
-                <button className='p-1 hover:text-white' onClick={handleTick}>
+                <button
+                  className='p-1 hover:text-white'
+                  onClick={handleTick}
+                  aria-label='confirm'
+                >
                   <TickIcon />
                 </button>
-                <button className='p-1 hover:text-white' onClick={handleCross}>
+                <button
+                  className='p-1 hover:text-white'
+                  onClick={handleCross}
+                  aria-label='cancel'
+                >
                   <CrossIcon />
                 </button>
               </>
@@ -143,12 +151,14 @@ const ChatHistory = React.memo(
                 <button
                   className='p-1 hover:text-white'
                   onClick={() => setIsEdit(true)}
+                  aria-label='edit chat title'
                 >
                   <EditIcon />
                 </button>
                 <button
                   className='p-1 hover:text-white'
                   onClick={() => setIsDelete(true)}
+                  aria-label='delete chat'
                 >
                   <DeleteIcon />
                 </button>
diff --git a/src/components/Menu/MenuOptions/ClearConversation.tsx b/src/components/Menu/MenuOptions/ClearConversation.tsx
index 0926998..7ce1d60 100644
--- a/src/components/Menu/MenuOptions/ClearConversation.tsx
+++ b/src/components/Menu/MenuOptions/ClearConversation.tsx
@@ -21,10 +21,12 @@ const ClearConversation = () => {
 
   return (
     <>
-      <button className='btn btn-neutral'
+      <button
+        className='btn btn-neutral'
         onClick={() => {
           setIsModalOpen(true);
         }}
+        aria-label={t('clearConversation') as string}
       >
         <DeleteIcon />
         {t('clearConversation')}
diff --git a/src/components/Menu/MenuOptions/ThemeSwitcher.tsx b/src/components/Menu/MenuOptions/ThemeSwitcher.tsx
index 01befc0..f9d6c61 100644
--- a/src/components/Menu/MenuOptions/ThemeSwitcher.tsx
+++ b/src/components/Menu/MenuOptions/ThemeSwitcher.tsx
@@ -29,6 +29,7 @@ const ThemeSwitcher = () => {
     <button
       className='items-center gap-3 btn btn-neutral'
       onClick={switchTheme}
+      aria-label='toggle dark/light mode'
     >
       {theme === 'dark' ? <SunIcon /> : <MoonIcon />}
       {t(getOppositeTheme(theme) + 'Mode')}
diff --git a/src/components/MobileBar/MobileBar.tsx b/src/components/MobileBar/MobileBar.tsx
index 7ad8c6c..52c3c60 100644
--- a/src/components/MobileBar/MobileBar.tsx
+++ b/src/components/MobileBar/MobileBar.tsx
@@ -27,6 +27,7 @@ const MobileBar = () => {
         onClick={() => {
           setHideSideMenu(false);
         }}
+        aria-label='open sidebar'
       >
         <span className='sr-only'>Open sidebar</span>
         <MenuIcon />
@@ -44,6 +45,7 @@ const MobileBar = () => {
         onClick={() => {
           if (!generating) addChat();
         }}
+        aria-label='new chat'
       >
         <PlusIcon className='h-6 w-6' />
       </button>
diff --git a/src/components/PopupModal/PopupModal.tsx b/src/components/PopupModal/PopupModal.tsx
index 55fac05..dbe91a3 100644
--- a/src/components/PopupModal/PopupModal.tsx
+++ b/src/components/PopupModal/PopupModal.tsx
@@ -49,6 +49,7 @@ const PopupModal = ({
                 type='button'
                 className='text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white'
                 onClick={_handleClose}
+                aria-label='close modal'
               >
                 <CrossIcon2 />
               </button>
@@ -70,6 +71,7 @@ const PopupModal = ({
                   type='button'
                   className='btn btn-primary'
                   onClick={handleConfirm}
+                  aria-label='confirm'
                 >
                   {t('confirm')}
                 </button>
@@ -79,6 +81,7 @@ const PopupModal = ({
                   type='button'
                   className='btn btn-neutral'
                   onClick={_handleClose}
+                  aria-label='cancel'
                 >
                   {t('cancel')}
                 </button>
diff --git a/src/components/PromptLibraryMenu/ExportPrompt.tsx b/src/components/PromptLibraryMenu/ExportPrompt.tsx
index ef2b1cd..f4856e9 100644
--- a/src/components/PromptLibraryMenu/ExportPrompt.tsx
+++ b/src/components/PromptLibraryMenu/ExportPrompt.tsx
@@ -17,6 +17,7 @@ const ExportPrompt = () => {
         onClick={() => {
           exportPrompts(prompts);
         }}
+        aria-label={t('export') as string}
       >
         {t('export')}
       </button>
diff --git a/src/components/PromptLibraryMenu/ImportPrompt.tsx b/src/components/PromptLibraryMenu/ImportPrompt.tsx
index 080f2de..23fdc7e 100644
--- a/src/components/PromptLibraryMenu/ImportPrompt.tsx
+++ b/src/components/PromptLibraryMenu/ImportPrompt.tsx
@@ -63,6 +63,7 @@ const ImportPrompt = () => {
       <button
         className='btn btn-small btn-primary mt-3'
         onClick={handleFileUpload}
+        aria-label={t('import') as string}
       >
         {t('import')}
       </button>
diff --git a/src/components/PromptLibraryMenu/PromptLibraryMenu.tsx b/src/components/PromptLibraryMenu/PromptLibraryMenu.tsx
index 61ec6fe..9d4f183 100644
--- a/src/components/PromptLibraryMenu/PromptLibraryMenu.tsx
+++ b/src/components/PromptLibraryMenu/PromptLibraryMenu.tsx
@@ -15,7 +15,11 @@ const PromptLibraryMenu = () => {
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   return (
     <div>
-      <button className='btn btn-neutral' onClick={() => setIsModalOpen(true)}>
+      <button
+        className='btn btn-neutral'
+        onClick={() => setIsModalOpen(true)}
+        aria-label={t('promptLibrary') as string}
+      >
         {t('promptLibrary')}
       </button>
       {isModalOpen && (
diff --git a/src/components/ShareGPT/ShareGPT.tsx b/src/components/ShareGPT/ShareGPT.tsx
index 12e4593..f9b4cc8 100644
--- a/src/components/ShareGPT/ShareGPT.tsx
+++ b/src/components/ShareGPT/ShareGPT.tsx
@@ -45,6 +45,7 @@ const ShareGPT = React.memo(() => {
         onClick={() => {
           setIsModalOpen(true);
         }}
+        aria-label={t('postOnShareGPT.title') as string}
       >
         {t('postOnShareGPT.title')}
       </button>
diff --git a/src/components/StopGeneratingButton/StopGeneratingButton.tsx b/src/components/StopGeneratingButton/StopGeneratingButton.tsx
index e3c7fba..295c0fd 100644
--- a/src/components/StopGeneratingButton/StopGeneratingButton.tsx
+++ b/src/components/StopGeneratingButton/StopGeneratingButton.tsx
@@ -10,7 +10,10 @@ const StopGeneratingButton = () => {
       className='absolute bottom-6 left-0 right-0 m-auto flex md:w-full md:m-auto gap-0 md:gap-2 justify-center'
       onClick={() => setGenerating(false)}
     >
-      <button className='btn relative btn-neutral border-0 md:border'>
+      <button
+        className='btn relative btn-neutral border-0 md:border'
+        aria-label='stop generating'
+      >
         <div className='flex w-full items-center justify-center gap-2'>
           <svg
             stroke='currentColor'