a11y button (ztjhz#335)

fixes issue ztjhz#333
bgill55 · Jul 20, 2023 · 5b642f0 · 5b642f0
1 parent 2b0280a
commit 5b642f0
Show file tree

Hide file tree

Showing 37 changed files with 139 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}