update aria label for public notice

src/pages/Proof/Payment/Pay.js

@@ -166,7 +166,7 @@ const Index = () => {
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
                                     <Typography variant="h4">
-                                        <FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(fee)}
+                                        <FormattedMessage id="totalAmount"/> (HK$): {FormatUtils.currencyFormat(fee)}
                                     </Typography>
                                 </Stack>
                             </DialogContent>

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -139,7 +139,11 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                 </div>
             </Grid>
             <Grid item xs={12} width={{xs:"90%", sm:"90%", md:"60%", lg:"60%"}}>
-                <Button title={intl.formatMessage({id: 'back'})} sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}>
+                <Button
+                    aria-label={intl.formatMessage({id: 'back'})}
+                    title={intl.formatMessage({id: 'back'})}
+                    sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}
+                >
                     <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
                 </Button>
             </Grid>
@@ -190,7 +194,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                     </Grid>
                                     <Grid item xs={12} md={9} lg={6}>
                                         <RadioGroup
-                                            aria-labelledby="demo-radio-buttons-group-label"
+                                            aria-labelledby="radio-buttons-group-label"
                                             id="issueId"
                                             name="issueId"
                                             defaultValue={issueId}
@@ -230,6 +234,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                     <Grid item xs={12} md={3} lg={3}>
                                         <label htmlFor="uploadFileBtn">
                                             <Button
+                                                aria-label={intl.formatMessage({id: 'uploadFileBtn'})}
                                                 component="span"
                                                 variant="outlined"
                                                 size="large"
@@ -260,6 +265,7 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                                 <center>
                                     <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                     <Button
+                                        aria-label={intl.formatMessage({id: 'applyPublicNotice'})}
                                         variant="contained"
                                         type="submit"
                                     >
@@ -281,7 +287,12 @@ const PublicNoticeApplyForm = ({ loadedData, selections }) => {
                         <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsWarningPopUp(false)}>OK</Button>
+                        <Button
+                            aria-label={intl.formatMessage({id: 'ok'})}
+                            onClick={() => setIsWarningPopUp(false)}
+                        >
+                            <FormattedMessage id="ok" />
+                        </Button>
                     </DialogActions>
                 </Dialog>
             </div>

src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js

@@ -157,6 +157,7 @@ const ApplicationDetailCard = (
                                             || currentApplicationDetailData.status == "paid"
                                             || currentApplicationDetailData.creditor}
                                         startIcon={<EditNoteIcon />}
+                                        aria-label={intl.formatMessage({id: 'payFor'})}
                                     >
                                         <FormattedMessage id="payFor"/>
                                     </Button>
@@ -169,6 +170,7 @@ const ApplicationDetailCard = (
                                 disabled={currentApplicationDetailData.status !== "submitted"}
                                 title={intl.formatMessage({id: 'cancel'})}
                                 startIcon={<CloseIcon />}
+                                aria-label={intl.formatMessage({id: 'cancel'})}
                             >
                                 <FormattedMessage id="cancel"/>
                             </Button>
@@ -544,6 +546,7 @@ const ApplicationDetailCard = (
                                                             <Button
                                                                 variant="contained"
                                                                 onClick={onDownloadClick()}
+                                                                aria-label={intl.formatMessage({id: 'download'})}
                                                                 title={intl.formatMessage({id: 'download'})}
                                                                 color="save"
                                                                 startIcon={<DownloadIcon sx={{alignItems:"center"}}/>}
@@ -607,15 +610,23 @@ const ApplicationDetailCard = (
                             <DialogContent style={{ display: 'flex', }}>
                                 <Stack direction="column" justifyContent="space-between">
                                     <Typography variant="h4">
-                                        <FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(fee)}
+                                        <FormattedMessage id="totalAmount"/> (HK$): {FormatUtils.currencyFormat(fee)}
                                     </Typography>
                                 </Stack>
                             </DialogContent>
                             <DialogActions>
-                                <Button onClick={() => setIsPopUp(false)}><Typography variant="h5">
+                                <Button
+                                    onClick={() => setIsPopUp(false)}
+                                    aria-label={intl.formatMessage({id: 'close'})}
+                                >
+                                    <Typography variant="h5">
                                     <FormattedMessage id="close"/>
                                 </Typography></Button>
-                                <Button onClick={() => doPayment()}><Typography variant="h5">
+                                <Button
+                                    onClick={() => doPayment()}
+                                    aria-label={intl.formatMessage({id: 'confirm'})}
+                                >
+                                    <Typography variant="h5">
                                     <FormattedMessage id="confirm"/>
                                 </Typography></Button>
                             </DialogActions>
@@ -633,7 +644,10 @@ const ApplicationDetailCard = (
                                 </Stack>
                             </DialogContent>
                             <DialogActions>
-                                <Button onClick={() => setErrorPopUp(false)}>
+                                <Button
+                                    onClick={() => setErrorPopUp(false)}
+                                    aria-label={intl.formatMessage({id: 'close'})}
+                                >
                                     <Typography variant="h5">
                                         <FormattedMessage id="close"/>
                                     </Typography></Button>

src/pages/PublicNotice/Details_Public/index.js

@@ -164,7 +164,12 @@ const DashboardDefault = () => {
         <Grid container direction="column" justifyContent="flex-start" alignItems="center">
           <Grid item xs={12} width="75%">
             <Stack direction="row">
-              <Button title={intl.formatMessage({id: 'back'})} sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/publicNotice") }}>
+              <Button
+                  aria-label={intl.formatMessage({id: 'back'})}
+                  title={intl.formatMessage({id: 'back'})}
+                  sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }}
+                  variant="outlined" onClick={() => { navigate("/publicNotice") }}
+              >
                 <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
               </Button>
               <Typography ml={3} mt={3} variant="h4">{title}</Typography>

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

@@ -56,11 +56,15 @@ const PublicNotice = ({ proofList, paymentList }) => {
                     <TabContext value={selectedTab}>
                         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                             <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                <Tab label={
+                                <Tab
+                                    aria-label={intl.formatMessage({id: 'proofRecord'})}
+                                    label={
                                     intl.formatMessage({id: 'proofRecord'}) + "(" + _proofList.length + ") "} value="1"
                                 />
-                                <Tab label={ intl.formatMessage({id: 'paymentHistory'}) +"(" + _paymentList.length + ") "} value="2" />
-                                
+                                <Tab
+                                    aria-label={intl.formatMessage({id: 'paymentHistory'})}
+                                    label={ intl.formatMessage({id: 'paymentHistory'}) +"(" + _paymentList.length + ") "} value="2"
+                                />
                             </TabList>
                         </Box>
                         <TabPanel value="1">

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -106,7 +106,7 @@ export default function BaseGrid({rows}) {
             width: 160,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleDetailClick(params)}>
+                return <Button aria-label={intl.formatMessage({id: 'viewDetail'})} onClick={handleDetailClick(params)}>
                     <FormattedMessage id="viewDetail"/>
                 </Button>;
             },

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -202,7 +202,7 @@ export default function SubmittedTab({ rows }) {
             width: 150,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleDetailClick(params)}>
+                return <Button aria-label={intl.formatMessage({id: 'viewDetail'})} onClick={handleDetailClick(params)}>
                     <FormattedMessage id="viewDetail"/>
                 </Button>;
             },
@@ -230,7 +230,7 @@ export default function SubmittedTab({ rows }) {
             totalAmount += datas[i].fee;
         }
         content.push(<Typography variant="h5">
-            <FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(totalAmount)}
+            <FormattedMessage id="totalAmount"/> (HK$): {FormatUtils.currencyFormat(totalAmount)}
             <br /><br />
         </Typography>);
         //setAmount(totalAmount);
@@ -323,6 +323,7 @@ export default function SubmittedTab({ rows }) {
                 <Button
                     color="create"
                     variant="contained"
+                    aria-label={intl.formatMessage({id: 'pay'})}
                     onClick={() => { handlePaymentBtn() }}
                     sx={{mt:2, ml:1}}
                 >
@@ -354,11 +355,13 @@ export default function SubmittedTab({ rows }) {
                         </Stack>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsPopUp(false)}>
+                        <Button onClick={() => setIsPopUp(false)} aria-label={intl.formatMessage({id: 'close'})}>
                             <Typography variant="h5">
                                 <FormattedMessage id="close"/>
                             </Typography></Button>
-                        <Button onClick={() => doPayment()}><Typography variant="h5">
+
+                        <Button onClick={() => doPayment()} aria-label={intl.formatMessage({id: 'confirm'})}>
+                            <Typography variant="h5">
                             <FormattedMessage id="confirm"/>
                         </Typography></Button>
                     </DialogActions>
@@ -377,11 +380,13 @@ export default function SubmittedTab({ rows }) {
                         </Stack>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setCheckCareOf(false)}>
+                        <Button onClick={() => setCheckCareOf(false)} aria-label={intl.formatMessage({id: 'close'})}>
                             <Typography variant="h5">
                                 <FormattedMessage id="close"/>
                             </Typography></Button>
-                        <Button onClick={() => afterWarningPayment()}><Typography variant="h5">
+
+                        <Button onClick={() => afterWarningPayment()} aria-label={intl.formatMessage({id: 'confirm'})}>
+                            <Typography variant="h5">
                             <FormattedMessage id="confirm"/>
                         </Typography></Button>
                     </DialogActions>
@@ -400,7 +405,7 @@ export default function SubmittedTab({ rows }) {
                         </Stack>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setExpiryDateErr(false)}>
+                        <Button onClick={() => setExpiryDateErr(false)} aria-label={intl.formatMessage({id: 'close'})}>
                             <Typography variant="h5">
                                 <FormattedMessage id="close"/>
                             </Typography></Button>

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -75,6 +75,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             fullWidth
                             {...register("appNo")}
                             id='appNo'
+                            aria-label={intl.formatMessage({id: 'applicationId'})}
                             label={intl.formatMessage({id: 'applicationId'})}
                             defaultValue={searchCriteria.appNo}
                             InputLabelProps={{
@@ -89,6 +90,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             {...register("dateFrom")}
                             id="dateFrom"
                             type="date"
+                            aria-label={intl.formatMessage({id: 'submitDateFrom'})}
                             label={intl.formatMessage({id: 'submitDateFrom'})}
                             defaultValue={searchCriteria.dateFrom}
                             InputProps={{ inputProps: { max: maxDate } }}
@@ -110,6 +112,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             {...register("dateTo")}
                             id="dateTo"
                             type="date"
+                            aria-label={intl.formatMessage({id: 'submitDateTo'})}
                             label={intl.formatMessage({id: 'submitDateTo'})}
                             defaultValue={searchCriteria.dateTo}
                             InputProps={{ inputProps: { min: minDate } }}
@@ -125,6 +128,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                                 {...register("careOf")}
                                 id="careOf"
                                 label="Care Of"
+                                aria-label={"Care Of"}
                                 defaultValue={searchCriteria.careOf}
                                 InputLabelProps={{
                                     shrink: true
@@ -139,6 +143,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             {...register("contact")}
                             id="contact"
                             label={intl.formatMessage({id: 'contactPerson'})}
+                            aria-label={intl.formatMessage({id: 'contactPerson'})}
                             defaultValue={searchCriteria.contact}
                             InputLabelProps={{
                                 shrink: true
@@ -183,6 +188,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                             renderInput={(params) => (
                                 <TextField {...params}
                                     label={intl.formatMessage({id: 'status'})}
+                                    aria-label={intl.formatMessage({id: 'status'})}
                                     InputLabelProps={{
                                         shrink: true
                                     }}
@@ -212,6 +218,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                         <Button
                             variant="contained"
                             onClick={resetForm}
+                            aria-label={intl.formatMessage({id: 'reset'})}
                         >
                             <Typography variant="pnspsButtonText">
                                 <FormattedMessage id="reset"/>
@@ -223,6 +230,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                         <Button
                             variant="contained"
                             type="submit"
+                            aria-label={intl.formatMessage({id: 'search'})}
                         >
                             <Typography variant="pnspsButtonText">
                                 <FormattedMessage id="search"/>

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js

@@ -109,7 +109,9 @@ export default function SearchPublicNoticeTable({ recordList }) {
             width: 150,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleDetailClick(params)}>
+                return <Button onClick={handleDetailClick(params)}
+                               aria-label={intl.formatMessage({id: 'viewDetail'})}
+                >
                     <FormattedMessage id="viewDetail"/>
                 </Button>;
             },

src/pages/PublicNotice/ListPanel/index.js

@@ -118,7 +118,7 @@ const PublicNotice = () => {
                     <Stack direction="row" justifyContent="flex-end" alignItems="center">
                         <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                         <Box sx={{ mr: { md: "47px" } }}>
-                            <Button variant="contained" onClick={() => { onBtnClick() }}>
+                            <Button aria-label={intl.formatMessage({id: 'applyPublicNotice'})} variant="contained" onClick={() => { onBtnClick() }}>
                                 <FormattedMessage id="applyPublicNotice"/>
                             </Button>
                         </Box>
@@ -133,10 +133,10 @@ const PublicNotice = () => {
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', overflowY:'auto' }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}>
-                                        <Tab label={intl.formatMessage({id: 'processing'}) + " (" + submittedList?.length + ")"} value="1" />
-                                        <Tab label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList?.length + ")"} value="3" />
-                                        <Tab label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList?.length + ")"} value="4" />
-                                        <Tab label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
+                                        <Tab aria-label={intl.formatMessage({id: 'processing'})} label={intl.formatMessage({id: 'processing'}) + " (" + submittedList?.length + ")"} value="1" />
+                                        <Tab aria-label={intl.formatMessage({id: 'pendingPublish'})} label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList?.length + ")"} value="3" />
+                                        <Tab aria-label={intl.formatMessage({id: 'pendingPayment'})} label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList?.length + ")"} value="4" />
+                                        <Tab aria-label={intl.formatMessage({id: 'searchApplyRecord'})} label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
                                     </TabList>
                                 </Box>
                                 <TabPanel value="1">
@@ -170,10 +170,10 @@ const PublicNotice = () => {
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example">
-                                        <Tab label={intl.formatMessage({id: 'processing'}) + " (" + submittedList.length + ")"} value="1" />
-                                        <Tab label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList.length + ")"} value="3" />
-                                        <Tab label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList.length + ")"} value="4" />
-                                        <Tab label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
+                                        <Tab aria-label={intl.formatMessage({id: 'processing'})} label={intl.formatMessage({id: 'processing'}) + " (" + submittedList.length + ")"} value="1" />
+                                        <Tab aria-label={intl.formatMessage({id: 'pendingPayment'})} label={intl.formatMessage({id: 'pendingPayment'}) + " (" + pendingPaymentList.length + ")"} value="3" />
+                                        <Tab aria-label={intl.formatMessage({id: 'pendingPublish'})} label={intl.formatMessage({id: 'pendingPublish'}) + " (" + pendingPublishList.length + ")"} value="4" />
+                                        <Tab aria-label={intl.formatMessage({id: 'searchApplyRecord'})} label={intl.formatMessage({id: 'searchApplyRecord'})} value="5" />
                                     </TabList>
                                 </Box>
                                 <TabPanel value="1">

src/translations/en.json

@@ -361,6 +361,7 @@
   "dateTo": "Date(To)",
   "of": "of",
   "loading": "Loading...",
+  "ok": "Ok",
 
   "Dashboard": "Dashboard",
   "event": "Event"

src/translations/zh-CN.json

@@ -361,6 +361,7 @@
   "dateTo": "日期(到)",
   "of": "於",
   "loading": "加载中...",
+  "ok": "好的",
 
   "Dashboard": "仪表板",
   "event": "活动"

src/translations/zh-HK.json

@@ -361,6 +361,7 @@
   "dateTo": "日期(到)",
   "of": "於",
   "loading": "加載中...",
+  "ok": "好的",
 
   "Dashboard": "儀表板",
   "event": "活動"