update all aria-label

src/layout/MainLayout/Drawer/index.js

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 // material-ui
 import { useTheme } from '@mui/material/styles';
 import { Box, Drawer, useMediaQuery } from '@mui/material';
+import { useIntl } from 'react-intl';
 
 // project import
 import DrawerHeader from './DrawerHeader';
@@ -15,6 +16,7 @@ import { drawerWidth } from 'config';
 
 const MainDrawer = ({ open, handleDrawerToggle, window }) => {
   const theme = useTheme();
+  const intl = useIntl();
   const matchDownMD = useMediaQuery(theme.breakpoints.down('lg'));
 
   // responsive drawer container
@@ -25,7 +27,7 @@ const MainDrawer = ({ open, handleDrawerToggle, window }) => {
   const drawerHeader = useMemo(() => <DrawerHeader open={open} />, [open]);
 
   return (
-    <Box component="nav" sx={{ flexShrink: { md: 0 }, zIndex: 1300 }} aria-label="mailbox folders">
+    <Box component="nav" sx={{ flexShrink: { md: 0 }, zIndex: 1300 }} aria-label={intl.formatMessage({ id: 'ariaMailboxFolders' })}>
       {!matchDownMD ? (
         <MiniDrawerStyled variant="permanent" open={open}>
           {drawerHeader}

src/layout/MainLayout/Header/HeaderContent/Profile/index.js

@@ -33,6 +33,7 @@ import { LogoutOutlined,
 import { handleLogoutFunction } from 'auth/index';
 import {useNavigate} from "react-router-dom";
 import {useDispatch} from "react-redux";
+import { useIntl } from 'react-intl';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 
 // tab panel wrapper
@@ -61,6 +62,7 @@ TabPanel.propTypes = {
 
 const Profile = () => {
   const theme = useTheme();
+  const intl = useIntl();
   const navigate = useNavigate()
   const dispatch = useDispatch()
 
@@ -170,7 +172,7 @@ const Profile = () => {
                     {/* {open && (
                       <>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                          <Tabs variant="fullWidth" value={value} onChange={handleChange} aria-label="profile tabs">
+                          <Tabs variant="fullWidth" value={value} onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaProfileTabs' })}>
                             <Tab
                               sx={{
                                 display: 'flex',

src/pages/GazetteIssue/index.js

@@ -31,10 +31,12 @@ import { ThemeProvider } from "@emotion/react";
 import { dateStr_Year } from "utils/DateUtils";
 import { notifySaveSuccess } from 'utils/CommonFunction';
 import { isGrantedAny } from "auth/utils";
+import { useIntl } from 'react-intl';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
+    const intl = useIntl();
     const [comboData, setComboData] = React.useState([]);
     const [holidayComboData, setHolidayComboData] = React.useState([]);
     const [onReady, setOnReady] = React.useState(false);
@@ -198,7 +200,7 @@ const Index = () => {
                                         hidden
                                         disabled={waitImport}
                                         onChange={readFile}
-                                        aria-label="Upload Excel file (.xlsx)"
+                                        aria-label={intl.formatMessage({ id: 'ariaUploadExcelFile' })}
                                         />
                                     </Button>
                                 </ThemeProvider>

src/pages/Holiday/index.js

@@ -31,11 +31,12 @@ import { ThemeProvider } from "@emotion/react";
 import { dateStr_Year } from "utils/DateUtils";
 import { notifySaveSuccess } from 'utils/CommonFunction';
 import { isGrantedAny } from "auth/utils";
+import { useIntl } from 'react-intl';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
-
+    const intl = useIntl();
     const [record, setRecord] = React.useState([]);
     const [comboData, setComboData] = React.useState([]);
     const [onReady, setOnReady] = React.useState(false);
@@ -172,7 +173,7 @@ const Index = () => {
                                     size="large"
                                     disabled={waitDownload}
                                     onClick={doExport}
-                                    aria-label="Export holiday template"
+                                    aria-label={intl.formatMessage({ id: 'ariaExportHolidayTemplate' })}
                                 >
                                     <Typography variant="h5">Export</Typography>
                                 </Button>
@@ -194,7 +195,7 @@ const Index = () => {
                                         hidden
                                         disabled={waitImport}
                                         onChange={readFile}
-                                        aria-label="Upload Excel file (.xlsx)"
+                                        aria-label={intl.formatMessage({ id: 'ariaUploadExcelFile' })}
                                         />
                                     </Button>
                                 </ThemeProvider>

src/pages/Proof/Create_FromApp/ProofForm.js

@@ -19,12 +19,13 @@ import * as ComboData from "utils/ComboData";
 import * as React from "react";
 import { useFormik } from 'formik';
 import { useNavigate } from "react-router-dom";
+import { useIntl } from 'react-intl';
 import Loadable from 'components/Loadable';
 import { notifySaveSuccess } from 'utils/CommonFunction';
 const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));
 
 const FormPanel = ({ formData }) => {
-
+    const intl = useIntl();
     const [data, setData] = React.useState({});
     const [columnPrice, setColumnPrice] = React.useState(ComboData.proofPrice[0]);
     const [attachments, setAttachments] = React.useState([]);
@@ -289,7 +290,7 @@ const FormPanel = ({ formData }) => {
                             hidden
                             disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}
                             onChange={readFile}
-                            aria-label="Upload PDF file"
+                            aria-label={intl.formatMessage({ id: 'ariaUploadPdfFile' })}
                         />
                         </Button>
                     </Grid>

src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js

@@ -9,6 +9,7 @@ import {
 
 import { TabPanel, TabContext, TabList } from '@mui/lab';
 import {useState, useEffect, lazy} from "react";
+import { useIntl } from 'react-intl';
 
 import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(lazy(() => import('../../../extra-pages/LoadingComponent')));
@@ -20,7 +21,7 @@ const StatusHistoryTab = Loadable(lazy(() => import('./StatusHistoryTab')));
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const PublicNotice = ({ appId, proofCount, paymentCount, statusHistoryCount, setProofCount, setPaymentCount, setStatusHistoryCount }) => {
-
+    const intl = useIntl();
     const [onReady, setOnReady] = useState(false);
     const [selectedTab, setSelectedTab] = useState("1");
 
@@ -41,7 +42,7 @@ const PublicNotice = ({ appId, proofCount, paymentCount, statusHistoryCount, set
                 <Grid item xs={12}>
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto' }}>
-                            <TabList onChange={handleChange} aria-label="lab API tabs example">
+                            <TabList onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })}>
                                 <Tab renderActiveOnly={false} label={"Proof (" + proofCount + ") "} value="1" />
                                 <Tab renderActiveOnly={false} label={"Online Payment (" + paymentCount + ") "} value="2" />
                                 <Tab renderActiveOnly={false} label={"Status History (" + statusHistoryCount + ") "} value="3" />

src/pages/PublicNotice/Details_Public/tabTableDetail/TabTable.js

@@ -43,7 +43,7 @@ const PublicNotice = ({ appId, proofCount, paymentCount, setProofCount, setPayme
                 <Grid item xs={12}>
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                            <TabList onChange={handleChange} aria-label="lab API tabs example">
+                            <TabList onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })}>
                                 <Tab
                                     aria-label={intl.formatMessage({ id: 'proofRecord' })}
                                     label={

src/pages/PublicNotice/ListPanel/index.js

@@ -142,7 +142,7 @@ const PublicNotice = () => {
                         <Grid item xs={12} sm={12} md={12} lg={12} sx={{ height: '100%', maxWidth: '100%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: { xs: 1, md: 3 }, ml: { xs: 1, md: 3 }, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', overflowY: 'auto' }}>
-                                    <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
+                                    <TabList variant="scrollable" onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })} sx={{ display: 'flex', flexDirection: 'row' }}>
                                         <Tab aria-label={intl.formatMessage({ id: 'processing' })} label={intl.formatMessage({ id: 'processing' }) + " (" + submittedCount + ")"} value="1" />
                                         <Tab aria-label={intl.formatMessage({ id: 'pendingPublish' })} label={intl.formatMessage({ id: 'pendingPublish' }) + " (" + pendingPublishCount + ")"} value="3" />
                                         <Tab aria-label={intl.formatMessage({ id: 'pendingPayment' })} label={intl.formatMessage({ id: 'pendingPayment' }) + " (" + pendingPaymentCount + ")"} value="4" />
@@ -176,7 +176,7 @@ const PublicNotice = () => {
                         <Grid item xs={12} sx={{ minHeight: '80vh', height: "100%", maxHeight: '300vh', maxWidth: '95%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: { xs: 1, md: 3 }, ml: { xs: 1, md: 3 }, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                                    <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example">
+                                    <TabList variant="scrollable" onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaApplicationGroup' })}>
                                         <Tab aria-label={intl.formatMessage({ id: 'processing' })} label={intl.formatMessage({ id: 'processing' }) + " (" + submittedCount + ")"} value="1" />
                                         <Tab aria-label={intl.formatMessage({ id: 'pendingPayment' })} label={intl.formatMessage({ id: 'pendingPayment' }) + " (" + pendingPaymentCount + ")"} value="3" />
                                         <Tab aria-label={intl.formatMessage({ id: 'pendingPublish' })} label={intl.formatMessage({ id: 'pendingPublish' }) + " (" + pendingPublishCount + ")"} value="4" />

src/pages/User/ChangePasswordPage/index.js

@@ -299,7 +299,7 @@ const Index = () => {
                                                         endAdornment:(
                                                             <InputAdornment position="end">
                                                                 <IconButton
-                                                                    aria-label="toggle new password visibility"
+                                                                    aria-label={intl.formatMessage({ id: 'ariaToggleNewPasswordVisibility' })}
                                                                     onClick={handleClickShowNewPassword}
                                                                     onMouseDown={handleMouseDownNewPassword}
                                                                     edge="end"

src/pages/User/DetailPage/index.js

@@ -402,7 +402,7 @@ const UserMaintainPage = () => {
                         <MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2, width: "-webkit-fill-available"}}>
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                                    <TabList  variant="scrollable" onChange={handleChange} aria-label="lab API tabs example">
+                                    <TabList  variant="scrollable" onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })}>
                                         <Tab label="Login Log" value="1" />
                                     </TabList>
                                 </Box>

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

@@ -508,7 +508,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                             {showId ? formik.values.identification?.slice(4) : "****"}{showId ? formik.values.checkDigit?'(' +formik.values.checkDigit+ ')': "()" : ""}
                                                         </Typography>
                                                         <IconButton
-                                                            aria-label="toggle id visibility"
+                                                            aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                                             onClick={handleClickShowId}
                                                             onMouseDown={handleMouseDownId}
                                                             edge="end"
@@ -537,7 +537,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                             {showId ? formik.values.identification?.slice(4) : "****"}
                                                         </Typography>
                                                         <IconButton
-                                                            aria-label="toggle id visibility"
+                                                            aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                                             onClick={handleClickShowId}
                                                             onMouseDown={handleMouseDownId}
                                                             edge="end"

src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js

@@ -276,7 +276,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                                             {showId ? formik.values.identification?.slice(4) : "****"}{showId ? formik.values.checkDigit?'(' +formik.values.checkDigit+ ')': "()" : ""}
                                                         </Typography>
                                                         <IconButton
-                                                            aria-label="toggle id visibility"
+                                                            aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                                             onClick={handleClickShowId}
                                                             onMouseDown={handleMouseDownId}
                                                             edge="end"
@@ -301,7 +301,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                                         {showId ?formik.values.identification?.slice(4):"****"}
                                                     </Typography>
                                                     <IconButton
-                                                        aria-label="toggle id visibility"
+                                                        aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                                         onClick={handleClickShowId}
                                                         onMouseDown={handleMouseDownId}
                                                         edge="end"

src/pages/User/DetailsPage_Individual/index.js

@@ -184,7 +184,7 @@ const UserMaintainPage_Individual = () => {
                                 <MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2, width: "-webkit-fill-available"}}>
                                     <TabContext value={selectedTab}>
                                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                                            <TabList  variant="scrollable" onChange={handleChange} aria-label="lab API tabs example">
+                                            <TabList  variant="scrollable" onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })}>
                                                 <Tab label="Attachments" value="1" />
                                                 <Tab label="Login Log" value="2" />
                                             </TabList>

src/pages/User/DetailsPage_Organization/index.js

@@ -281,7 +281,7 @@ const UserMaintainPage_Organization = () => {
                                 <MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2, width: "-webkit-fill-available"}}>
                                     <TabContext value={selectedTab}>
                                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                                            <TabList  variant="scrollable" onChange={handleChange} aria-label="lab API tabs example">
+                                            <TabList  variant="scrollable" onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })}>
                                                 <Tab label="Attachments" value="1" />
                                                 <Tab label="Login Log" value="2" />
                                             </TabList>

src/pages/authentication/AuthWrapper.js

@@ -103,7 +103,7 @@ const AuthWrapper = ({ children }) => {
       >
         <Box sx={{ position: 'relative' }}>
           <IconButton
-            aria-label="Close"
+            aria-label={intl.formatMessage({ id: 'close' })}
             onClick={handleCloseImagePopup}
             sx={{
               position: 'absolute',
@@ -148,7 +148,7 @@ const AuthWrapper = ({ children }) => {
         }}
       >
         <IconButton
-          aria-label="Close"
+          aria-label={intl.formatMessage({ id: 'close' })}
           onClick={handleCloseNoticePopup}
           sx={{
             position: 'absolute',

src/pages/authentication/auth-forms/BusCustomFormWizard.js

@@ -1579,7 +1579,7 @@ const BusCustomFormWizard = (props) => {
                                                 <img src={captchaImg} alt="" />
                                             </Grid>
                                             <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
-                                                <IconButton aria-label="refrashCaptcha" size="large" onClick={() => { onCaptchaChange() }}>
+                                                <IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
                                                     <LoopIcon fontSize="inherit" />
                                                 </IconButton>
                                             </Grid>

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -1916,7 +1916,7 @@ const CustomFormWizard = (props) => {
                                                 <img src={captchaImg} alt="" />
                                             </Grid>
                                             <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
-                                                <IconButton aria-label="refrashCaptcha" size="large" onClick={() => { onCaptchaChange() }}>
+                                                <IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
                                                     <LoopIcon fontSize="inherit" />
                                                 </IconButton>
                                             </Grid>
@@ -2044,7 +2044,7 @@ const CustomFormWizard = (props) => {
                                         </Typography>
                                     
                                         <IconButton
-                                            aria-label="toggle id visibility"
+                                            aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                             onClick={handleClickShowId}
                                             onMouseDown={handleMouseDownId}
                                             edge="end"

src/pages/authentication/auth-forms/IAmSmartFormWizard.js

@@ -529,7 +529,7 @@ const CustomFormWizard = (props) => {
                                                         {iAmSmartData?.idNo?.slice(0, 4)}{showId ? iAmSmartData?.idNo?.slice(4) : "****"}{showId ? '(' + iAmSmartData.checkDigit + ')' : null}
                                                     </Typography>
                                                     <IconButton
-                                                        aria-label="toggle id visibility"
+                                                        aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                                         onClick={handleClickShowId}
                                                         onMouseDown={handleMouseDownId}
                                                         edge="end"
@@ -1034,7 +1034,7 @@ const CustomFormWizard = (props) => {
                                                     <img src={captchaImg} alt="" />
                                                 </Grid>
                                                 <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
-                                                    <IconButton aria-label="refrashCaptcha" size="large" onClick={() => { onCaptchaChange() }}>
+                                                    <IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
                                                         <LoopIcon fontSize="inherit" />
                                                     </IconButton>
                                                 </Grid>
@@ -1120,7 +1120,7 @@ const CustomFormWizard = (props) => {
                                                 {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */}
                                             </Typography>
                                             <IconButton
-                                                aria-label="toggle id visibility"
+                                                aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                                 onClick={handleClickShowComId}
                                                 onMouseDown={handleMouseDownComId}
                                                 edge="end"

src/pages/extra-pages/ErrorPage.js

@@ -2,11 +2,13 @@ import {
     ButtonBase
 } from '@mui/material'
 import { useNavigate } from "react-router-dom";
+import { useIntl } from 'react-intl';
 import MainCard from 'components/MainCard';
 
 //import errorImg from '@src/assets/images/pages/error.svg'
 
 const ErrorPage = () => {
+    const intl = useIntl();
     let navigate = useNavigate();
     const handleToHomePage = () =>{
         let path = `/`;
@@ -30,8 +32,7 @@ const ErrorPage = () => {
                                 borderRadius: 30,
                                 '&:hover': { bgcolor: 'secondary.lighter' }
                             }}
-                            aria-label="Back to home"
-                            aria-controls={open ? 'profile-grow' : undefined}
+                            aria-label={intl.formatMessage({ id: 'ariaBackToHome' })}
                             aria-haspopup="true"
                             onClick={handleToHomePage}>
                             Back to home

src/translations/en.json

@@ -629,5 +629,17 @@
   "paginationPrev": "Go to previous page",
   "paginationNext": "Go to next page",
 
-  "sort": "Sort"
+  "sort": "Sort",
+
+  "ariaToggleNewPasswordVisibility": "Toggle new password visibility",
+  "ariaToggleIdVisibility": "Toggle ID visibility",
+  "ariaRefreshCaptcha": "Refresh CAPTCHA",
+  "ariaRelatedRecords": "Related Records",
+  "ariaApplicationGroup": "Application Group",
+  "ariaProfileTabs": "Profile tabs",
+  "ariaUploadPdfFile": "Upload PDF file",
+  "ariaExportHolidayTemplate": "Export holiday template",
+  "ariaUploadExcelFile": "Upload Excel file (.xlsx)",
+  "ariaBackToHome": "Back to home",
+  "ariaMailboxFolders": "Mailbox folders"
 }

src/translations/zh-CN.json

@@ -625,5 +625,17 @@
   "paginationPrev": "上一页",
   "paginationNext": "下一页",
 
-  "sort": "排序"
+  "sort": "排序",
+
+  "ariaToggleNewPasswordVisibility": "切换新密码可见性",
+  "ariaToggleIdVisibility": "切换身份证明文件可见性",
+  "ariaRefreshCaptcha": "刷新验证码",
+  "ariaRelatedRecords": "相关记录",
+  "ariaApplicationGroup": "申请组别",
+  "ariaProfileTabs": "个人资料选项卡",
+  "ariaUploadPdfFile": "上传 PDF 文件",
+  "ariaExportHolidayTemplate": "导出假期模板",
+  "ariaUploadExcelFile": "上传 Excel 文件 (.xlsx)",
+  "ariaBackToHome": "返回主页",
+  "ariaMailboxFolders": "邮箱文件夹"
 }

src/translations/zh-HK.json

@@ -626,5 +626,17 @@
   "paginationPrev": "上一頁",
   "paginationNext": "下一頁",
 
-  "sort": "排序"
+  "sort": "排序",
+
+  "ariaToggleNewPasswordVisibility": "切換新密碼可見性",
+  "ariaToggleIdVisibility": "切換身份證明文件可見性",
+  "ariaRefreshCaptcha": "重新載入驗證碼",
+  "ariaRelatedRecords": "相關記錄",
+  "ariaApplicationGroup": "申請組別",
+  "ariaProfileTabs": "個人檔案分頁",
+  "ariaUploadPdfFile": "上載 PDF 檔案",
+  "ariaExportHolidayTemplate": "匯出假期範本",
+  "ariaUploadExcelFile": "上載 Excel 檔案 (.xlsx)",
+  "ariaBackToHome": "返回主頁",
+  "ariaMailboxFolders": "郵箱資料夾"
 }