Localize titleAccess

CruGlobal · Sep 19, 2024 · c1aa776 · c1aa776
1 parent 6fdeaf7
commit c1aa776
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 18 deletions.
diff --git a/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx b/src/components/Contacts/ContactDetails/ContactDetailsHeader/ContactDetailsHeader.tsx
@@ -110,7 +110,7 @@ export const ContactDetailsHeader: React.FC<Props> = ({
                 aria-label={t('Edit Partnership Info')}
               >
                 <EditIcon
-                  titleAccess="Edit Partnership Info"
+                  titleAccess={t('Edit Partnership Info')}
                   sx={{ width: '24px', height: '24px' }}
                 />
               </IconButton>

diff --git a/...ntactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx b/...ntactDetails/ContactDetailsHeader/ContactDetailsMoreActions/ContactDetailsMoreActions.tsx
@@ -265,7 +265,7 @@ export const ContactDetailsMoreAcitions: React.FC<
         aria-haspopup="true"
         onClick={(event) => setAnchorEl(event.currentTarget)}
       >
-        <MoreButtonIcon titleAccess="More Actions" />
+        <MoreButtonIcon titleAccess={t('More Actions')} />
       </IconButton>
       <MenuContainer
         id="add-menu"

diff --git a/...nents/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/HandshakeIcon.tsx b/...nents/Contacts/ContactDetails/ContactDetailsHeader/ContactHeaderSection/HandshakeIcon.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import { SvgIcon } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import theme from '../../../../../theme';
 
 const SwapIconSvg = styled(SvgIcon)(({}) => ({
@@ -10,8 +11,11 @@ const SwapIconSvg = styled(SvgIcon)(({}) => ({
   color: theme.palette.text.secondary,
 }));
 
-export const HandshakeIcon = (): ReactElement => (
-  <SwapIconSvg titleAccess="Partner">
-    <path d="M20.7097 7.70993C21.9597 6.45993 21.3897 4.99993 20.7097 4.28993L17.7097 1.28993C16.4497 0.039929 14.9997 0.609929 14.2897 1.28993L12.5897 2.99993H9.99969C8.09969 2.99993 6.99968 3.99993 6.43968 5.14993L1.99968 9.58993V13.5899L1.28968 14.2899C0.0396849 15.5499 0.609685 16.9999 1.28968 17.7099L4.28968 20.7099C4.82968 21.2499 5.40968 21.4499 5.95968 21.4499C6.66968 21.4499 7.31968 21.0999 7.70968 20.7099L10.4097 17.9999H13.9997C15.6997 17.9999 16.5597 16.9399 16.8697 15.8999C17.9997 15.5999 18.6197 14.7399 18.8697 13.8999C20.4197 13.4999 20.9997 12.0299 20.9997 10.9999V7.99993H20.4097L20.7097 7.70993ZM18.9997 10.9999C18.9997 11.4499 18.8097 11.9999 17.9997 11.9999H16.9997V12.9999C16.9997 13.4499 16.8097 13.9999 15.9997 13.9999H14.9997V14.9999C14.9997 15.4499 14.8097 15.9999 13.9997 15.9999H9.58969L6.30968 19.2799C5.99968 19.5699 5.81968 19.3999 5.70968 19.2899L2.71968 16.3099C2.42968 15.9999 2.59968 15.8199 2.70968 15.7099L3.99968 14.4099V10.4099L5.99968 8.40993V9.99993C5.99968 11.2099 6.79969 12.9999 8.99969 12.9999C11.1997 12.9999 11.9997 11.2099 11.9997 9.99993H18.9997V10.9999ZM19.2897 6.28993L17.5897 7.99993H9.99969V9.99993C9.99969 10.4499 9.80969 10.9999 8.99969 10.9999C8.18969 10.9999 7.99968 10.4499 7.99968 9.99993V6.99993C7.99968 6.53993 8.16969 4.99993 9.99969 4.99993H13.4097L15.6897 2.71993C15.9997 2.42993 16.1797 2.59993 16.2897 2.70993L19.2797 5.68993C19.5697 5.99993 19.3997 6.17993 19.2897 6.28993Z" />
-  </SwapIconSvg>
-);
+export const HandshakeIcon = (): ReactElement => {
+  const { t } = useTranslation();
+  return (
+    <SwapIconSvg titleAccess={t('Partner')}>
+      <path d="M20.7097 7.70993C21.9597 6.45993 21.3897 4.99993 20.7097 4.28993L17.7097 1.28993C16.4497 0.039929 14.9997 0.609929 14.2897 1.28993L12.5897 2.99993H9.99969C8.09969 2.99993 6.99968 3.99993 6.43968 5.14993L1.99968 9.58993V13.5899L1.28968 14.2899C0.0396849 15.5499 0.609685 16.9999 1.28968 17.7099L4.28968 20.7099C4.82968 21.2499 5.40968 21.4499 5.95968 21.4499C6.66968 21.4499 7.31968 21.0999 7.70968 20.7099L10.4097 17.9999H13.9997C15.6997 17.9999 16.5597 16.9399 16.8697 15.8999C17.9997 15.5999 18.6197 14.7399 18.8697 13.8999C20.4197 13.4999 20.9997 12.0299 20.9997 10.9999V7.99993H20.4097L20.7097 7.70993ZM18.9997 10.9999C18.9997 11.4499 18.8097 11.9999 17.9997 11.9999H16.9997V12.9999C16.9997 13.4499 16.8097 13.9999 15.9997 13.9999H14.9997V14.9999C14.9997 15.4499 14.8097 15.9999 13.9997 15.9999H9.58969L6.30968 19.2799C5.99968 19.5699 5.81968 19.3999 5.70968 19.2899L2.71968 16.3099C2.42968 15.9999 2.59968 15.8199 2.70968 15.7099L3.99968 14.4099V10.4099L5.99968 8.40993V9.99993C5.99968 11.2099 6.79969 12.9999 8.99969 12.9999C11.1997 12.9999 11.9997 11.2099 11.9997 9.99993H18.9997V10.9999ZM19.2897 6.28993L17.5897 7.99993H9.99969V9.99993C9.99969 10.4499 9.80969 10.9999 8.99969 10.9999C8.18969 10.9999 7.99968 10.4499 7.99968 9.99993V6.99993C7.99968 6.53993 8.16969 4.99993 9.99969 4.99993H13.4097L15.6897 2.71993C15.9997 2.42993 16.1797 2.59993 16.2897 2.70993L19.2797 5.68993C19.5697 5.99993 19.3997 6.17993 19.2897 6.28993Z" />
+    </SwapIconSvg>
+  );
+};
diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/ContactDetailsTab.tsx
@@ -131,7 +131,7 @@ export const ContactDetailsTab: React.FC<ContactDetailTabProps> = ({
                 aria-label={t('Edit')}
                 style={{ marginLeft: 5 }}
               >
-                <EditIcon titleAccess="Edit" data-testid="Edit Other" />
+                <EditIcon titleAccess={t('Edit')} data-testid="Edit Other" />
               </IconButton>
             </ContactDetailHeadingText>
           </ContactDetailHeadingContainer>

diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.test.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.test.tsx
@@ -156,7 +156,7 @@ describe('ContactTags', () => {
         </GqlMockedProvider>
       </SnackbarProvider>,
     );
-    const tag1DeleteIcon = getAllByTitle('Delete Icon')[0].querySelector(
+    const tag1DeleteIcon = getAllByTitle('Remove')[0].querySelector(
       '.MuiChip-deleteIcon',
     );
 

diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/Tags/ContactTags.tsx
@@ -146,7 +146,7 @@ export const ContactTags: React.FC<ContactTagsProps> = ({
           label={tag}
           disabled={updating}
           onDelete={() => handleTagDelete(tag)}
-          title={t('Delete Icon')}
+          title={t('Remove')}
         />
       ))}
       <Formik

diff --git a/...s/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCommentsButton/TaskCommentsButton.tsx b/...s/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCommentsButton/TaskCommentsButton.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ChatBubbleOutline from '@mui/icons-material/ChatBubbleOutline';
 import { Button, ButtonProps, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import theme from 'src/theme';
 
 const TaskRowWrap = styled(Button, {
@@ -48,13 +49,14 @@ export const TaskCommentsButton: React.FC<TaskCommentsButtonProps> = ({
   detailsPage,
   ...props
 }) => {
+  const { t } = useTranslation();
   return (
     <TaskRowWrap
       small={small || false}
       detailsPage={detailsPage || false}
       {...props}
     >
-      <TaskCommentIcon titleAccess="Comment" small={small || false} />
+      <TaskCommentIcon titleAccess={t('Comment')} small={small || false} />
       <TaskCommentNumber isComplete={isComplete}>
         {numberOfComments}
       </TaskCommentNumber>

diff --git a/...s/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.tsx b/...s/ContactDetails/ContactTasksTab/ContactTaskRow/TaskCompleteButton/TaskCompleteButton.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Check from '@mui/icons-material/Check';
 import { Button, ButtonProps } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import theme from 'src/theme';
 
 const ButtonWrap = styled(Button, {
@@ -31,9 +32,10 @@ export const TaskCompleteButton: React.FC<TaskCompleteButtonProps> = ({
   isComplete,
   ...props
 }) => {
+  const { t } = useTranslation();
   return (
     <ButtonWrap isComplete={isComplete} {...props}>
-      <Check titleAccess="Check" />
+      <Check titleAccess={t('Check')} />
     </ButtonWrap>
   );
 };
diff --git a/src/components/Layouts/Primary/NavBar/NavItem/NavItem.tsx b/src/components/Layouts/Primary/NavBar/NavItem/NavItem.tsx
@@ -5,6 +5,7 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { Button, Collapse, ListItemButton, MenuItem } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import HandoffLink from 'src/components/HandoffLink';
 import { LeafListItem, Title } from '../StyledComponents';
 
@@ -54,6 +55,7 @@ export const NavItem: FC<NavItemProps> = ({
 }) => {
   const [open, setOpen] = useState<boolean>(openProp ?? false);
   const theme = useTheme();
+  const { t } = useTranslation();
 
   const handleToggle = (): void => {
     setOpen((prevOpen) => !prevOpen);
@@ -80,13 +82,13 @@ export const NavItem: FC<NavItemProps> = ({
             <ExpandItemIcon
               fontSize="small"
               color="disabled"
-              titleAccess="Expand"
+              titleAccess={t('Expand')}
             />
           ) : (
             <CollapseItemIcon
               fontSize="small"
               color="disabled"
-              titleAccess="Collapse"
+              titleAccess={t('Collapse')}
             />
           )}
         </StyledButton>

diff --git a/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx b/src/components/Layouts/Primary/TopBar/Items/AddMenu/AddMenu.tsx
@@ -189,6 +189,7 @@ const AddMenu = ({ isInDrawer = false }: AddMenuProps): ReactElement => {
   const [selectedMenuItem, changeSelectedMenuItem] =
     useState<AddMenuItemsEnum | null>(null);
   const [dialogOpen, changeDialogOpen] = useState(false);
+  const { t } = useTranslation();
 
   const addMenuContent = [
     {
@@ -254,7 +255,7 @@ const AddMenu = ({ isInDrawer = false }: AddMenuProps): ReactElement => {
         aria-expanded={Boolean(anchorEl)}
         onClick={(event) => setAnchorEl(event.currentTarget)}
       >
-        <HoverAddIcon titleAccess="Add Button" />
+        <HoverAddIcon titleAccess={t('Add Button')} />
       </IconButton>
       <MenuContainer
         id="add-menu"

diff --git a/src/components/common/DeleteItemIcon/DeleteItemIcon.tsx b/src/components/common/DeleteItemIcon/DeleteItemIcon.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import DeleteOutlined from '@mui/icons-material/DeleteOutlined';
 import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 
 const DeleteOutline = styled(DeleteOutlined)(({ theme }) => ({
   width: '24px',
@@ -9,5 +10,6 @@ const DeleteOutline = styled(DeleteOutlined)(({ theme }) => ({
 }));
 
 export const DeletedItemIcon: React.FC = () => {
-  return <DeleteOutline titleAccess="Delete" />;
+  const { t } = useTranslation();
+  return <DeleteOutline titleAccess={t('Delete')} />;
 };
diff --git a/src/components/common/StarredItemIcon/StarredItemIcon.tsx b/src/components/common/StarredItemIcon/StarredItemIcon.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import StarIcon from '@mui/icons-material/Star';
 import StarBorderOutlined from '@mui/icons-material/StarBorderOutlined';
 import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   isStarred: boolean;
@@ -20,9 +21,10 @@ const StarOutline = styled(StarBorderOutlined)(({ theme }) => ({
 }));
 
 export const StarredItemIcon: React.FC<Props> = ({ isStarred }) => {
+  const { t } = useTranslation();
   return isStarred ? (
-    <StarFilled titleAccess="Unstar" data-testid="Filled Star Icon" />
+    <StarFilled titleAccess={t('Unstar')} data-testid="Filled Star Icon" />
   ) : (
-    <StarOutline titleAccess="Star" data-testid="Outline Star Icon" />
+    <StarOutline titleAccess={t('Star')} data-testid="Outline Star Icon" />
   );
 };