Translate labels and aria-labels

src/Wallets.tsx

@@ -541,7 +541,9 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
             setIsEdit(true);
           }}
           edge="end"
-          aria-label="edit"
+          aria-label={t('core:action.edit', {
+            postProcess: 'capitalizeFirstChar',
+          })}
         >
           <EditIcon />
         </IconButton>

src/components/Apps/AppsDevModeNavBar.tsx

@@ -109,7 +109,9 @@ export const AppsDevModeNavBar = () => {
         <Tabs
           orientation="vertical"
           ref={tabsRef}
-          aria-label="basic tabs example"
+          aria-label={t('core:basic_tabs_example', {
+            postProcess: 'capitalizeFirstChar',
+          })}
           variant="scrollable" // Make tabs scrollable
           scrollButtons={true}
           sx={{

src/components/Apps/AppsNavBarDesktop.tsx

@@ -183,7 +183,9 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
         <Tabs
           orientation="vertical"
           ref={tabsRef}
-          aria-label="basic tabs example"
+          aria-label={t('core:basic_tabs_example', {
+            postProcess: 'capitalizeFirstChar',
+          })}
           variant="scrollable" // Make tabs scrollable
           scrollButtons={true}
           sx={{

src/components/Apps/AppsPrivate.tsx

@@ -311,7 +311,9 @@ export const AppsPrivate = ({ myName }) => {
             <Tabs
               value={valueTabPrivateApp}
               onChange={handleChange}
-              aria-label="basic tabs example"
+              aria-label={t('core:basic_tabs_example', {
+                postProcess: 'capitalizeFirstChar',
+              })}
               variant={'fullWidth'}
               scrollButtons="auto"
               sx={{

src/components/BuyQortInformation.tsx

@@ -22,9 +22,12 @@ import {
   subscribeToEvent,
   unsubscribeFromEvent,
 } from '../utils/events';
+import { useTranslation } from 'react-i18next';
 
 export const BuyQortInformation = ({ balance }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const theme = useTheme();
+  const { t } = useTranslation(['auth', 'core', 'group']);
 
   const openBuyQortInfoFunc = useCallback(
     (e) => {
@@ -33,8 +36,6 @@ export const BuyQortInformation = ({ balance }) => {
     [setIsOpen]
   );
 
-  const theme = useTheme();
-
   useEffect(() => {
     subscribeToEvent('openBuyQortInfo', openBuyQortInfoFunc);
 
@@ -62,7 +63,7 @@ export const BuyQortInformation = ({ balance }) => {
             maxWidth: '90vw',
             padding: '10px',
             width: '400px',
-          }}
+          }} // TODO translate
         >
           <Typography>
             Get QORT using Qortal's crosschain trade portal
@@ -113,7 +114,9 @@ export const BuyQortInformation = ({ balance }) => {
               maxWidth: 360,
               width: '100%',
             }}
-            aria-label="contacts"
+            aria-label={t('core:contact_other', {
+              postProcess: 'capitalizeFirstChar',
+            })}
           >
             <ListItem disablePadding>
               <ListItemIcon>

src/components/Desktop/DesktopFooter.tsx

@@ -7,6 +7,7 @@ import { HomeIcon } from '../../assets/Icons/HomeIcon';
 import { Save } from '../Save/Save';
 import { enabledDevModeAtom } from '../../atoms/global';
 import { useAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
 
 export const IconWrapper = ({
   children,
@@ -65,8 +66,8 @@ export const DesktopFooter = ({
   setIsOpenSideViewGroups,
 }) => {
   const [isEnabledDevMode, setIsEnabledDevMode] = useAtom(enabledDevModeAtom);
-
   const theme = useTheme();
+  const { t } = useTranslation(['auth', 'core', 'group']);
 
   if (hide) return;
   return (
@@ -105,7 +106,12 @@ export const DesktopFooter = ({
             setIsOpenSideViewGroups(false);
           }}
         >
-          <IconWrapper label="Apps" selected={isApps}>
+          <IconWrapper
+            label={t('core:app_other', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+            selected={isApps}
+          >
             <img src={AppIcon} />
           </IconWrapper>
         </ButtonBase>
@@ -115,7 +121,12 @@ export const DesktopFooter = ({
             setDesktopSideView('groups');
           }}
         >
-          <IconWrapper label="Groups" selected={isGroups}>
+          <IconWrapper
+            label={t('group:group.group_other', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+            selected={isGroups}
+          >
             <HubsIcon
               height={30}
               color={

src/components/Group/AddGroup.tsx

@@ -233,7 +233,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
             </Typography>
 
             <IconButton
-              aria-label="close"
+              aria-label={t('core:action.close', {
+                postProcess: 'capitalizeFirstChar',
+              })}
               color="inherit"
               edge="start"
               onClick={handleClose}
@@ -259,7 +261,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
             <Tabs
               value={value}
               onChange={handleChange}
-              aria-label="basic tabs example"
+              aria-label={t('core:basic_tabs_example', {
+                postProcess: 'capitalizeFirstChar',
+              })}
               variant={'fullWidth'}
               scrollButtons="auto"
               allowScrollButtonsMobile

src/components/Group/Group.tsx

@@ -1648,7 +1648,9 @@ export const Group = ({
                     ? theme.palette.text.primary
                     : theme.palette.text.secondary
               }
-              label="Groups"
+              label={t('group:group.group_other', {
+                postProcess: 'capitalizeFirstChar',
+              })}
               selected={desktopSideView === 'groups'}
               customWidth="75px"
             >

src/components/Group/GroupInvites.tsx

@@ -162,7 +162,12 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
                   }}
                   disablePadding
                   secondaryAction={
-                    <IconButton edge="end" aria-label="comments">
+                    <IconButton
+                      edge="end"
+                      aria-label={t('core:comment_other', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
+                    >
                       <GroupAddIcon
                         sx={{
                           color: theme.palette.text.primary,

src/components/Group/GroupJoinRequests.tsx

@@ -245,7 +245,12 @@ export const GroupJoinRequests = ({
                   }}
                   disablePadding
                   secondaryAction={
-                    <IconButton edge="end" aria-label="comments">
+                    <IconButton
+                      edge="end"
+                      aria-label={t('core:comment_other', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
+                    >
                       <GroupAddIcon
                         sx={{
                           color: theme.palette.text.primary,

src/components/Group/ListOfThreadPostsWatched.tsx

@@ -164,7 +164,12 @@ export const ListOfThreadPostsWatched = () => {
                   }}
                   disablePadding
                   secondaryAction={
-                    <IconButton edge="end" aria-label="comments">
+                    <IconButton
+                      edge="end"
+                      aria-label={t('core:comment_other', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
+                    >
                       <VisibilityIcon
                         sx={{
                           color: 'red',

src/components/Group/ManageMembers.tsx

@@ -215,7 +215,9 @@ export const ManageMembers = ({
             </Typography>
 
             <IconButton
-              aria-label="close"
+              aria-label={t('core:action.close', {
+                postProcess: 'capitalizeFirstChar',
+              })}
               color="inherit"
               edge="start"
               onClick={handleClose}
@@ -237,7 +239,9 @@ export const ManageMembers = ({
             <Tabs
               value={value}
               onChange={handleChange}
-              aria-label="basic tabs example"
+              aria-label={t('core:basic_tabs_example', {
+                postProcess: 'capitalizeFirstChar',
+              })}
               variant="scrollable" // Make tabs scrollable
               scrollButtons="auto" // Show scroll buttons automatically
               allowScrollButtonsMobile // Show scroll buttons on mobile as well

src/components/Group/Settings.tsx

@@ -170,7 +170,9 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
               edge="start"
               color="inherit"
               onClick={handleClose}
-              aria-label="close"
+              aria-label={t('core:action.close', {
+                postProcess: 'capitalizeFirstChar',
+              })}
             >
               <CloseIcon />
             </IconButton>

src/components/Language/LanguageSelector.tsx

@@ -51,7 +51,10 @@ const LanguageSelector = () => {
               background: 'none',
               cursor: 'pointer',
             }}
-            aria-label={`Current language: ${name}`}
+            aria-label={t('core:current_language', {
+              language: name,
+              postProcess: 'capitalizeFirstChar',
+            })}
           >
             {flag}
           </button>

src/components/Minting/Minting.tsx

@@ -581,7 +581,9 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
         }}
         color="inherit"
         onClick={() => setIsOpenMinting(false)}
-        aria-label="close"
+        aria-label={t('core:action.close', {
+          postProcess: 'capitalizeFirstChar',
+        })}
       >
         <CloseIcon />
       </IconButton>

src/components/RegisterName.tsx

@@ -346,7 +346,9 @@ export const RegisterName = ({
 
           <List
             sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
-            aria-label="contacts"
+            aria-label={t('core:contact_other', {
+              postProcess: 'capitalizeFirstChar',
+            })}
           >
             <ListItem disablePadding>
               <ListItemIcon>

src/components/Tutorials/Tutorials.tsx

@@ -46,7 +46,9 @@ export const Tutorials = () => {
           }}
           value={multiNumber}
           onChange={(e, value) => setMultiNumber(value)}
-          aria-label="basic tabs example"
+          aria-label={t('core:basic_tabs_example', {
+            postProcess: 'capitalizeFirstChar',
+          })}
         >
           {openTutorialModal?.multi?.map((item, index) => {
             return (
@@ -66,7 +68,9 @@ export const Tutorials = () => {
         <DialogTitle sx={{ m: 0, p: 2 }}>{selectedTutorial?.title}</DialogTitle>
 
         <IconButton
-          aria-label="close"
+          aria-label={t('core:action.close', {
+            postProcess: 'capitalizeFirstChar',
+          })}
           onClick={handleClose}
           sx={{
             position: 'absolute',
@@ -112,7 +116,9 @@ export const Tutorials = () => {
         </DialogTitle>
 
         <IconButton
-          aria-label="close"
+          aria-label={t('core:action.close', {
+            postProcess: 'capitalizeFirstChar',
+          })}
           onClick={handleClose}
           sx={{
             position: 'absolute',

src/i18n/locales/en/core.json

@@ -101,15 +101,19 @@
   "apps_official": "official Apps",
   "attachment": "attachment",
   "balance": "balance:",
+  "basic_tabs_example": "basic tabs example",
   "category": "category",
   "category_other": "categories",
   "chat": "chat",
+  "comment_other": "comments",
+  "contact_other": "contacts",
   "core": {
     "block_height": "block height",
     "information": "core information",
     "peers": "connected peers",
     "version": "core version"
   },
+  "current_language": "current language: {{ language }}",
   "dev": "dev",
   "domain": "domain",
   "ui": {