aria-label for careOf

src/components/iAmSmartButton.js

@@ -1,5 +1,6 @@
 // material-ui
 import {useState, useEffect} from 'react';
+import { useIntl } from 'react-intl';
 import iAmSmartICon from 'assets/images/icons/icon_iAmSmart.png';
 import {
     Button,
@@ -9,7 +10,7 @@ import {
 // ==============================|| EVENT TABLE ||============================== //
 
 export function IAmSmartButton({ label, onClickFun, fullWidth }) {
-
+    const intl = useIntl();
     const [_label, set_label] = useState("");
    
     useEffect(()=>{
@@ -23,7 +24,7 @@ export function IAmSmartButton({ label, onClickFun, fullWidth }) {
     }
 
     return (
-        <Button onClick={()=>doOnClick()}  sx={{textTransform: 'none'}} color="iAmSmart" fullWidth={fullWidth} size="large" variant="outlined" startIcon={<img src={iAmSmartICon} alt="iAM Smart" width="30" />}>
+        <Button onClick={()=>doOnClick()}  sx={{textTransform: 'none'}} color="iAmSmart" fullWidth={fullWidth} size="large" variant="outlined" startIcon={<img src={iAmSmartICon} alt={intl.formatMessage({ id: 'iAmSmartAlt' })} width="30" />}>
         <Typography variant="h5">
             {_label}
         </Typography>

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/GazetteDetailCard.js

@@ -20,12 +20,14 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 import * as DateUtils from "utils/DateUtils";
 import EditNoteIcon from '@mui/icons-material/EditNote';
 import { isGrantedAny } from "auth/utils";
+import { useIntl } from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 const GazetteDetailCard = (
     { applicationDetailData,
         setStatus
     }
 ) => {
+    const intl = useIntl();
     const [onReady, setOnReady] = useState(false);
     const [issueNum, setIssueNum] = useState("");
     const [issueDate, setIssueDate] = useState("");
@@ -275,6 +277,7 @@ const GazetteDetailCard = (
                                                                 })}
                                                             value={careOf}
                                                             id='careOf'
+                                                            inputProps={{ 'aria-label': intl.formatMessage({ id: 'careOf' }) }}
                                                             sx={{
                                                                 "& .MuiInputBase-input.Mui-disabled": {
                                                                     WebkitTextFillColor: "#000000",

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/ApplicationDetailCard.js

@@ -698,7 +698,9 @@ const ApplicationDetailCard = (
                                             <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
                                                 <OutlinedInput
                                                     size="small"
+                                                    id="careOf"
                                                     value={currentApplicationDetailData.careOf}
+                                                    inputProps={{ 'aria-label': intl.formatMessage({ id: 'careOf' }) }}
                                                     sx={{
                                                         "& .MuiInputBase-input.Mui-disabled": {
                                                             WebkitTextFillColor: "#000000",

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/PendingPaymentTab.js

@@ -411,7 +411,7 @@ export default function SubmittedTab({ setCount, url }) {
                                     '& .MuiAutocomplete-endAdornment': { top: '50%', transform: 'translateY(-50%)' },
                                     '& .MuiOutlinedInput-root': { height: 40 }
                                 }}
-                                renderInput={(params) => <TextField {...params} />}
+                                renderInput={(params) => <TextField {...params} inputProps={{ ...params.inputProps, 'aria-label': intl.formatMessage({ id: 'careOf' }) }} />}
                                 clearText={intl.formatMessage({ id: "muiClear" })}
                                 closeText={intl.formatMessage({ id: "muiClose" })}
                                 openText={intl.formatMessage({ id: "muiOpen" })}

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>
@@ -1615,7 +1615,7 @@ const BusCustomFormWizard = (props) => {
                                             <Button
                                                 variant="contained"
                                                 onClick={playCaptchaAudio}
-                                                aria-label={intl.formatMessage({ id: "captchaPlayAudioAria" })}
+                                                aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                 sx={{
                                                     backgroundColor: '#0C489E',
                                                     color: '#FFFFFF',

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>
@@ -1952,7 +1952,7 @@ const CustomFormWizard = (props) => {
                                             <Button
                                                 variant="contained"
                                                 onClick={playCaptchaAudio}
-                                                aria-label={intl.formatMessage({ id: "captchaPlayAudioAria" })}
+                                                aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                 sx={{
                                                     backgroundColor: '#0C489E',
                                                     color: '#FFFFFF',
@@ -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>
@@ -1066,7 +1066,7 @@ const CustomFormWizard = (props) => {
                                                 <Button
                                                     variant="contained"
                                                     onClick={playCaptchaAudio}
-                                                    aria-label={intl.formatMessage({ id: "captchaPlayAudioAria" })}
+                                                    aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                     sx={{
                                                         backgroundColor: '#0C489E',
                                                         color: '#FFFFFF',
@@ -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

@@ -13,6 +13,7 @@
   "openLanguage": "Language Menu",
 
   "bhkLogoAlt": "Brand Hong Kong logo",
+  "iAmSmartAlt": "iAM Smart",
   "wcagAaAlt": "Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.0",
   "downloadPdfAria": "Download PDF: {guide} ({userType})",
   "captchaPlayAudio": "Play audio CAPTCHA",
@@ -250,6 +251,8 @@
   "requireDialingCode": "Please enter the international dialing code",
   "requireVerify": "Please enter verification",
   "dialingCode": "Global Code",
+  "phoneCountryCode": "Phone dialing code",
+  "faxCountryCode": "Fax dialing code",
   "userFaxNumber": "Fax Number",
   "userIdDoc": "Identification document",
   "userIDNo": "ID Card Number",
@@ -276,6 +279,7 @@
   "businessRegCert": "Business Registration Certificate",
   "businessRegCertNumber": "Hong Kong Business Reg Cert Number",
   "businessRegCertAndDoc":"Business Registration Certificate and other documents",
+  "businessRegCertExpiryDate": "Business registration certificate expiry date",
   "pleaseUploadDoc": "Please upload a digital file of your valid business registration certificate and other documents to verify your identity.",
   "uploadFile": "Upload business registration certificate and other documents",
   "pleaseUploadIdDoc": "Please upload a digital file of your valid identity document to verify your identity.",
@@ -544,6 +548,7 @@
   "MSG.setPrimay": "Are you sure to mark user “{username}” as primary user?",
   "MSG.revokePrimay": "Are you sure to revoke the primary user from user “{username}”?",
 
+  "MSG.App": "Application",
   "submitApplication": "Submit Public Notice application",
   "applicationSubheading": "Provide your Public Notice for formatting, proofreading and pricing.",
   "announcement": "Announcements",
@@ -628,5 +633,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

@@ -13,6 +13,7 @@
   "openLanguage": "语言选单",
 
   "bhkLogoAlt": "香港品牌标志",
+  "iAmSmartAlt": "智方便",
   "wcagAaAlt": "符合 WCAG 2.0 AA 级别（W3C WAI 网页内容无障碍指引）",
   "downloadPdfAria": "下载 PDF：{guide}（{userType}）",
   "captchaPlayAudio": "播放语音验证码",
@@ -287,6 +288,8 @@
   "passwordExpired": "你的密码已过期，请立即更改密码以继续使用系统。",
   "verifyFail": "十分抱歉，验证失败，请在办公时间与我们联络，联络方式可在『关于我们』页面找到(https://pnsps.gld.gov.hk/aboutUs)。",
   "dialingCode": "国际区号",
+  "phoneCountryCode": "电话区号",
+  "faxCountryCode": "传真区号",
   "userFaxNumber": "传真号码",
   "userIdDoc": "身份证明文件",
   "userIDNo": "身份证号码",
@@ -312,6 +315,7 @@
   "businessRegCert": "商业登记证",
   "businessRegCertNumber": "香港商业登记证号码",
   "businessRegCertAndDoc":"商业登记证及其他文件",
+  "businessRegCertExpiryDate": "商业登记证有效期届满日期",
   "pleaseUploadDoc": "请上传你的 有效商业登记证及其他文件 的数码档案，以验证你的身份。",
   "uploadFile": "上传商业登记证及其他文件",
   "pleaseUploadIdDoc": "请上传你的 有效身份证明文件 的数码档案，以验证你的身份。",
@@ -540,6 +544,7 @@
   "MSG.setPrimay": "是否确定设定 “{username}” 为主要账户吗？",
   "MSG.revokePrimay": "是否确定要撤销 “{username}” 为主要用户吗？",
 
+  "MSG.App": "申请",
   "submitApplication": "提交公共启事申请",
   "applicationSubheading": "提供你的启事内容作排版，校对及计算所需费用。",
   "announcement": "通告",
@@ -624,5 +629,17 @@
   "paginationPrev": "上一页",
   "paginationNext": "下一页",
 
-  "sort": "排序"
+  "sort": "排序",
+
+  "ariaToggleNewPasswordVisibility": "切换新密码可见性",
+  "ariaToggleIdVisibility": "切换身份证明文件可见性",
+  "ariaRefreshCaptcha": "刷新验证码",
+  "ariaRelatedRecords": "相关记录",
+  "ariaApplicationGroup": "申请组别",
+  "ariaProfileTabs": "个人资料选项卡",
+  "ariaUploadPdfFile": "上传 PDF 文件",
+  "ariaExportHolidayTemplate": "导出假期模板",
+  "ariaUploadExcelFile": "上传 Excel 文件 (.xlsx)",
+  "ariaBackToHome": "返回主页",
+  "ariaMailboxFolders": "邮箱文件夹"
 }

src/translations/zh-HK.json

@@ -13,6 +13,7 @@
   "openLanguage": "語言選單",
 
   "bhkLogoAlt": "香港品牌標誌",
+  "iAmSmartAlt": "智方便",
   "wcagAaAlt": "符合 WCAG 2.0 AA 級別（W3C WAI 網頁內容無障礙指引）",
   "downloadPdfAria": "下載 PDF：{guide}（{userType}）",
   "captchaPlayAudio": "播放語音驗證碼",
@@ -285,6 +286,8 @@
   "requireDialingCode": "請輸入國際區號",
   "requireVerify": "請輸入驗證",
   "dialingCode": "國際區號",
+  "phoneCountryCode": "電話區號",
+  "faxCountryCode": "傳真區號",
   "userFaxNumber": "傳真號碼",
   "userIdDoc": "身份證明文件",
   "userIDNo": "身份證號碼",
@@ -310,6 +313,7 @@
   "businessRegCert": "商業登記證",
   "businessRegCertNumber": "香港商業登記證號碼",
   "businessRegCertAndDoc":"商業登記證及其他文件",
+  "businessRegCertExpiryDate": "商業登記證有效期屆滿日期",
   "pleaseUploadDoc": "請上傳你的 有效商業登記證及其他文件 的數碼檔案，以驗證你的身份。",
   "pleaseUploadIdDoc": "請上傳你的 有效身份證明文件 的數碼檔案，以驗證你的身份。",
   "pleaseUploadIdDocSubTitle": "如: 香港身份證; 護照; 中國內地身份證; 專業執業証書等",
@@ -541,6 +545,7 @@
   "MSG.setPrimay": "是否確定設定 “{username}” 為主要帳戶嗎？",
   "MSG.revokePrimay": "是否確定要撤銷 “{username}” 為主要使用者嗎？",
 
+  "MSG.App": "申請",
   "submitApplication": "提交公共啟事申請",
   "applicationSubheading": "提供你的公共啟事內容作排版，校對及計算所需費用。",
   "announcement": "通告",
@@ -625,5 +630,17 @@
   "paginationPrev": "上一頁",
   "paginationNext": "下一頁",
 
-  "sort": "排序"
+  "sort": "排序",
+
+  "ariaToggleNewPasswordVisibility": "切換新密碼可見性",
+  "ariaToggleIdVisibility": "切換身份證明文件可見性",
+  "ariaRefreshCaptcha": "重新載入驗證碼",
+  "ariaRelatedRecords": "相關記錄",
+  "ariaApplicationGroup": "申請組別",
+  "ariaProfileTabs": "個人檔案分頁",
+  "ariaUploadPdfFile": "上載 PDF 檔案",
+  "ariaExportHolidayTemplate": "匯出假期範本",
+  "ariaUploadExcelFile": "上載 Excel 檔案 (.xlsx)",
+  "ariaBackToHome": "返回主頁",
+  "ariaMailboxFolders": "郵箱資料夾"
 }

src/utils/FieldUtils.js

@@ -48,7 +48,7 @@ export const getTextField = ({ label, valueName, form, disabled, autoFocus }) =>
     </Grid>;
 }
 
-export const getCarOfField = ({ label, valueName, form, disabled }) => {
+export const getCarOfField = ({ label, valueName, form, disabled, inputProps }) => {
     return <Grid container alignItems={"center"} >
         <Grid item xs={12} sm={12} md={12} lg={12}>
             <Grid container spacing={1}>
@@ -61,7 +61,8 @@ export const getCarOfField = ({ label, valueName, form, disabled }) => {
                         type: "text",
                         valueName: valueName,
                         form: form,
-                        disabled: disabled
+                        disabled: disabled,
+                        inputProps: inputProps
                     })}
                 </Grid>
             </Grid>