Merge branch 'web_access_fix' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI into web_access_fix

src/assets/style/navbarStyles.css

@@ -1,175 +1,358 @@
+/* assets/style/navbarStyles.css */
+
+/* ===== FIX typo ===== */
 #nav{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: white;
-    /* padding: 20px 80px; */
-    box-shadow: 0 5px 15px rgba(0,0 0,0,0.06);
-    position:fixed;
-    top: 0px;
-    width: 100%;
-    z-index: 9999;
-    border-bottom: 3px solid #0C489E;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.06); /* <-- fixed */
+  position: fixed;
+  top: 0px;
+  width: 100%;
+  z-index: 9999;
+  border-bottom: 3px solid #0C489E;
+  min-height: 77px;
+}
+
+#navbar > div > li {
+  height: 77px;              /* one single source of truth */
+  display: flex;
+  align-items: stretch;
+  padding: 0;                /* IMPORTANT: stop li padding making different widths */
+  margin: 0;
+}
+
+#navbar div li{
+  padding: 0;   /* override your earlier padding: 0 1vw */
+}
+
+/* Make dropdown button identical to anchor */
+#navbar > div > li > button.navTrigger {
+  background: transparent;
+  border: 0;
+  padding: 0;              /* remove default button padding */
+  margin: 0;
+  font: inherit;           /* inherit font from li */
+  line-height: 1;          /* normalize */
+  height: auto;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+/* Make both anchor and button same vertical box */
+#navbar > div > li > a,
+#navbar > div > li > button.navTrigger {
+  height: 100% !important;     /* override the old 72px */
+  padding: 0 24px !important;  /* bigger hit area */
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
 }
+
+/* Make ONLY the dropdown button not bold */
+#navbar > div > li > button.navTrigger,
+#navbar > div > li > button.navTrigger .MuiTypography-root {
+  font-weight: 400 !important;
+}
+
+/* (optional) keep links bold */
+#navbar > div > li > a,
+#navbar > div > li > a .MuiTypography-root {
+  font-weight: 600;
+}
+
 #navbar div{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
+
 #navbar div li{
-    list-style: none;   
-    padding: 0 1vw;
-    position: relative;
+  list-style: none;
+  padding: 0 1vw;
+  position: relative;
 }
+
+/* keep your <a> styling */
 #navbar div li a{
-    text-decoration: none;
-    font-size: 1.2rem;
-    font-weight: 600;
-    /* font-family: 微軟正黑體; */
-    color: black;
-    transition: 0.3s ease-in-out;
+  text-decoration: none;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: black;
+  transition: 0.3s ease-in-out;
 }
 
-#navbar div li a span{
-    font-size: 1vw !important;
+/* NEW: style dropdown trigger buttons to look like links */
+#navbar div li button.navTrigger{
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+
+  text-decoration: none;
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: black;
+  transition: 0.3s ease-in-out;
+
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 
+#navbar div li a span,
 #navbar div li a svg{
-    font-size: 1vw !important;
+  font-size: 1vw !important;
 }
 
-#navbar div li a:hover{
-    color: #0C489E;
+#navbar div li a:hover,
+#navbar div li button.navTrigger:hover{
+  color: #0C489E;
 }
+
 #navbar div li a:hover::after,
-#navbar div li a:focus-visible::after{
-    content: "";
-    width: 80%;
-    height: 3px;
-    background:#0C489E;
-    position: absolute;
-    bottom: -5px;
-    left: 20px;
-}
-#navbar div li ul {
+#navbar div li a:focus-visible::after,
+#navbar div li button.navTrigger:hover::after,
+#navbar div li button.navTrigger:focus-visible::after{
+  content: "";
+  width: 80%;
+  height: 3px;
+  background:#0C489E;
+  position: absolute;
+  bottom: -5px;
+  left: 20px;
+}
+
+/* submenu base */
+#navbar div li ul{
   background: white;
   visibility: hidden;
   opacity: 0;
   min-width: 18rem;
   position: absolute;
-  /* transition: all 0.5s ease; */
   left: 0;
   display: none;
   padding-left: 0px;
   padding-bottom: 7px;
-  /* border: 1px solid #0C489E; */
   background-clip: padding-box;
   border: 1px solid rgba(0,0,0,.15);
   border-radius: 0.25rem;
 }
-#navbar  div li:hover > ul{
-    visibility: visible;
-    opacity: 1;
-    display: block
-  }
 
-/* Navbar: don't show focus ring on mouse click */
-#navbar a:focus {
+/* hover open */
+#navbar div li:hover > ul{
+  visibility: visible;
+  opacity: 1;
+  display: block;
+}
+
+/* keyboard open */
+#navbar div li:focus-within > ul{
+  visibility: visible;
+  opacity: 1;
+  display: block;
+}
+
+/* Navbar focus ring */
+#navbar a:focus,
+#navbar button.navTrigger:focus{
   outline: none;
 }
 
-/* Navbar: show focus ring for keyboard navigation */
-#navbar a:focus-visible {
+#navbar a:focus-visible,
+#navbar button.navTrigger:focus-visible{
   outline: 3px solid #0C489E;
   outline-offset: 2px;
-  border-radius: 10px; /* tweak to match your design */
+  border-radius: 10px;
 }
 
-/* #navbar  div li:focus-within > ul,
-#navbar  div li ul:hover,
-#navbar  div li ul:focus {
-  visibility: visible;
-  opacity: 1;
-  display: block
-} */
+#navbar a.dashboard,
+#navbar a.application,
+#navbar a.proof, 
+#navbar a.myDocumet, 
+#navbar a.documentRecord, 
+#navbar a.manageOrgUser, 
+#navbar a.manageUser, 
+#navbar a.systemSetting, 
+#navbar a.report, 
+#navbar a.payment, 
+#navbar a.user, 
+#navbar a.logout {
+  font-size: 1.1rem !important;
+  font-weight: 600 !important;
+}
+
+#navbar a.dashboard .MuiTypography-root,
+#navbar a.application .MuiTypography-root,
+#navbar a.proof .MuiTypography-root,
+#navbar a.myDocumet .MuiTypography-root, 
+#navbar a.documentRecord .MuiTypography-root, 
+#navbar a.manageOrgUser .MuiTypography-root,
+#navbar a.manageUser .MuiTypography-root,
+#navbar a.systemSetting .MuiTypography-root,
+#navbar a.report .MuiTypography-root,
+#navbar a.payment .MuiTypography-root,
+#navbar a.user .MuiTypography-root,
+#navbar a.logout .MuiTypography-root {
+  font-size: 1.1rem !important;
+  font-weight: 600 !important;
+}
+
+/* Make them bigger + bold */
+#navbar a.login,
+#navbar a.register,
+#navbar a.login .MuiTypography-root,
+#navbar a.register .MuiTypography-root {
+  font-size: 1.1rem !important;
+  font-weight: 600 !important;
+}
+
+/* ===== your existing sidebar (unchanged) ===== */
 #systemTitle{
-    text-decoration: none;
-    font-size: 1.3rem;
-    font-weight: 600;
-    color: #0C489E;
-    transition: 0.3s ease-in-out;
-    /* font-family: 微軟正黑體; */
-    text-align: center;
+  text-decoration: none;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #0C489E;
+  transition: 0.3s ease-in-out;
+  text-align: center;
 }
 #mobileTitle{
-    text-decoration: none;
-    font-size: 1.2rem;
-    font-weight: 600;
-    color: #0C489E;
-    transition: 0.3s ease-in-out;
-    /* font-family: 微軟正黑體; */
-    text-align: center;
+  text-decoration: none;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #0C489E;
+  transition: 0.3s ease-in-out;
+  text-align: center;
 }
 #sidebar{
-    font-size: 1.3rem;
-    font-weight: 600;
-    /* font-family: 微軟正黑體; */
+  font-size: 1.1rem;
+  font-weight: 600;
 }
 #sidebartop{
-    align-items: center;
-    justify-content: start;
-    padding: 0;
-    display: flex;
-    width: 100%;
+  align-items: center;
+  justify-content: start;
+  padding: 0;
+  display: flex;
+  width: 100%;
 }
 #logoutContent{
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    display: flex;
-    width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  display: flex;
+  width: 100%;
 }
 #sidebarbottom{
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  display: flex;
 }
 #sidebar li{
-    list-style: none;   
-    padding: 0 20px;
-    position: relative;
-    text-align: left;
+  list-style: none;
+  padding: 0 20px;
+  position: relative;
+  text-align: left;
 }
 #sidebar li a{
-    text-decoration: none;
-    font-size: 1.3rem;
-    font-weight: 600;
-    /* font-family: 微軟正黑體; */
-    color: black;
-    transition: 0.3s ease-in-out;
+  text-decoration: none;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: black;
+  transition: 0.3s ease-in-out;
 }
 #sidebar li a:hover{
-    color: #0C489E;
-}
-#sidebar div li ul {
-    background: white;
-    visibility: hidden;
-    opacity: 0;
-    min-width: 16rem;
-    position: relative;
-    /* transition: all 0.5s ease; */
-    left: 0;
-    display: none;
-    padding-left: 0px;
-    /* border: 1px solid #0C489E; */
-  }
-  #sidebar  div li:hover > ul,
-  #sidebar  div li:focus-within > ul,
-  #sidebar  div li ul:hover,
-  #sidebar  div li ul:focus {
-    visibility: visible;
-    opacity: 1;
-    display: block
-  }
+  color: #0C489E;
+}
+#sidebar div li ul{
+  background: white;
+  visibility: hidden;
+  opacity: 0;
+  min-width: 16rem;
+  position: relative;
+  left: 0;
+  display: none;
+  padding-left: 0px;
+}
+#sidebar div li:hover > ul,
+#sidebar div li:focus-within > ul,
+#sidebar div li ul:hover,
+#sidebar div li ul:focus{
+  visibility: visible;
+  opacity: 1;
+  display: block;
+}
+
+/* ===== Mobile Drawer / Sidebar menu styling ===== */
+#sidebar ul { 
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+#sidebar li{
+  width: 100%;
+  padding: 0;                 /* remove the old 0 20px */
+  margin: 0;
+}
+
+/* Make BOTH links and dropdown buttons look the same */
+#sidebar li > a,
+#sidebar li > button.navTrigger{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between; /* text left, arrow right */
+  gap: 12px;
+
+  background: transparent;
+  border: 0;                  /* kill grey border */
+  box-shadow: none;
+  outline: none;
+
+  padding: 14px 20px;
+  text-align: left;
+
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: black;
+  cursor: pointer;
+}
+
+/* Hover / focus */
+#sidebar li > a:hover,
+#sidebar li > button.navTrigger:hover{
+  color: #0C489E;
+}
+
+#sidebar li > a:focus-visible,
+#sidebar li > button.navTrigger:focus-visible{
+  outline: 3px solid #0C489E;
+  outline-offset: 2px;
+  border-radius: 10px;
+}
+
+/* Submenu (indent + full width) */
+#sidebar li ul{
+  width: 100%;
+  padding: 6px 0 6px 0;
+  margin: 0;
+  display: none;
+  visibility: hidden;
+  opacity: 0;
+}
+
+/* Open on focus-within (tap/click focuses button) */
+#sidebar li:focus-within > ul{
+  display: block;
+  visibility: visible;
+  opacity: 1;
+}
+
+#sidebar li ul li > a{
+  padding: 12px 20px 12px 40px; /* indent submenu */
+  font-size: 1.15rem;
+  font-weight: 600;
+}

src/auth/utils.js

@@ -171,3 +171,6 @@ export const getPaymentMethodByCode = (code) => {
   return "other";
 };
 
+export function setPageTitle(title) {
+  document.title = `${title} - PNSPS | Government Logistics Department`;
+}

src/components/AdminLogo/index.js

@@ -15,21 +15,23 @@ import {
   checkSysEnv
 } from "utils/Utils";
 
+import {useIntl} from "react-intl";
 // ==============================|| MAIN LOGO ||============================== //
 
 const LogoSection = ({ sx, to }) => {
   const { defaultId } = useSelector((state) => state.menu);
   const dispatch = useDispatch();
+  const intl = useIntl();
+  
   return (
-    <Stack direction="column" justifyContent="center" alignItems="center" >
-        <ButtonBase
+    <ButtonBase
         disableRipple
         component={Link}
         onClick={() => dispatch(activeItem({ openItem: [defaultId] }))}
         to={!to ? config.defaultPath : to}
+        aria-label={intl.formatMessage({ id: "PNSPS", defaultMessage: "PNSPS" })}
         sx={{
           ...sx,
-
           /* ✅ WCAG 2.4.7 focus indicator */
           '&:focus-visible': {
             outline: '3px solid #0C489E',
@@ -38,10 +40,11 @@ const LogoSection = ({ sx, to }) => {
           }
         }}
       >
-        <Logo />
+        <Stack direction="column" justifyContent="center" alignItems="center" >
+          <Logo />
+          <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="systemTitle">PNSPS</span>
+        </Stack>
       </ButtonBase>
-        <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="systemTitle">PNSPS</span>
-    </Stack>
 
   );
 };

src/components/FiDataGrid.js

@@ -1,5 +1,5 @@
 // material-ui
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Box } from "@mui/material";
 import {
     DataGrid, GridOverlay,
@@ -202,9 +202,49 @@ export function FiDataGrid({ rows, columns, sx, autoHeight = true,
         });
     }
 
+    const gridRootRef = useRef(null);
+
+    useEffect(() => {
+        const root = gridRootRef.current;
+        if (!root) return;
+
+        const sortText = intl.formatMessage({ id: "sort", defaultMessage: "Sort" });
+
+        const apply = () => {
+            // 1) Make ALL column headers tabbable (optional; DataGrid already manages focus well)
+            root
+                .querySelectorAll('.MuiDataGrid-columnHeaders [role="columnheader"]')
+                .forEach((el) => {
+                if (el.getAttribute("tabindex") !== "0") el.setAttribute("tabindex", "0");
+                });
+
+            // 2) Localize sort icon button label (handles "sort"/"Sort"/any old value)
+            const sortButtons = root.querySelectorAll(
+                '.MuiDataGrid-columnHeaders button.MuiIconButton-root'
+            );
+
+            sortButtons.forEach((btn) => {
+                const al = (btn.getAttribute("aria-label") || "").trim().toLowerCase();
+                const ti = (btn.getAttribute("title") || "").trim().toLowerCase();
+
+                // Only rewrite the ones that are the sort icon buttons
+                if (al === "sort" || ti === "sort") {
+                btn.setAttribute("aria-label", sortText);
+                btn.setAttribute("title", sortText);
+                }
+            });
+        };
+
+        apply();
+
+        const obs = new MutationObserver(apply);
+        obs.observe(root, { childList: true, subtree: true });
+
+        return () => obs.disconnect();
+    }, [intl]);
 
     return (
-        <Box sx={containerSx}>
+        <Box sx={containerSx} ref={gridRootRef} role="table">
             <DataGrid
                 {...props}
                 rows={_rows}

src/components/Logo/index.js

@@ -9,18 +9,22 @@ import { useDispatch, useSelector } from 'react-redux';
 import Logo from './Logo';
 import config from 'config';
 import { activeItem } from 'store/reducers/menu';
+import {useIntl} from "react-intl";
 
 // ==============================|| MAIN LOGO ||============================== //
 
 const LogoSection = ({ sx, to }) => {
   const { defaultId } = useSelector((state) => state.menu);
   const dispatch = useDispatch();
+  const intl = useIntl();
+
   return (
     <ButtonBase
       disableRipple
       component={Link}
       onClick={() => dispatch(activeItem({ openItem: [defaultId] }))}
       to={!to ? config.defaultPath : to}
+      aria-label={intl.formatMessage({ id: "PNSPS", defaultMessage: "PNSPS" })}
       sx={sx}
     >
       <Logo />

src/components/MobileLogo/index.js

@@ -9,10 +9,13 @@ import { useDispatch, useSelector } from 'react-redux';
 import Logo from './MobileLogo';
 import config from 'config';
 import { activeItem } from 'store/reducers/menu';
+import {useIntl} from "react-intl";
 
 // ==============================|| MAIN LOGO ||============================== //
 
 const LogoSection = ({ sx, to }) => {
+  const intl = useIntl();
+
   const { defaultId } = useSelector((state) => state.menu);
   const dispatch = useDispatch();
   return (
@@ -21,6 +24,7 @@ const LogoSection = ({ sx, to }) => {
     component={Link}
     onClick={() => dispatch(activeItem({ openItem: [defaultId] }))}
     to={!to ? config.defaultPath : to}
+    aria-label={intl.formatMessage({ id: "PNSPS" })} 
     sx={{
       ...sx,
 

src/components/usePageTitle.js

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { useIntl } from "react-intl";
+
+export default function usePageTitle(messageIdOrText) {
+  const intl = useIntl();
+
+  useEffect(() => {
+    let pageTitle;
+    let systemName;
+    let gldName;
+
+    // If string looks like an intl id, try translate
+    try {
+      pageTitle = intl.formatMessage({ id: messageIdOrText });
+      systemName = intl.formatMessage({ id: "PNSPS_fullname" });
+      gldName = intl.formatMessage({ id: "HKGLD" });
+    } catch {
+      pageTitle = messageIdOrText;
+    }
+
+    document.title = `${pageTitle} - ${systemName} | ${gldName}`;
+  }, [messageIdOrText, intl]);
+}

src/pages/Announcement/Search_Public/index.js

@@ -15,6 +15,7 @@ const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import { FormattedMessage } from "react-intl";
 import { getSearchCriteria } from "auth/utils";
+import usePageTitle from "components/usePageTitle";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -29,7 +30,7 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSearchPage_Individual = () => {
-
+    usePageTitle("announcement");
     const [searchCriteria, setSearchCriteria] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);
     const [onGridReady, setGridOnReady] = React.useState(false);

src/pages/DemandNote/Search_Public/index.js

@@ -18,6 +18,7 @@ const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
 const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {FormattedMessage} from "react-intl";
+import usePageTitle from "components/usePageTitle";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -32,7 +33,7 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const SearchPage_DemandNote_Pub = () => {
-
+    usePageTitle("paymentInfoRecord");
     const [orgCombo, setOrgCombo] = React.useState([]);
     const [issueCombo, setIssueCombo] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({});

src/pages/Message/Details/index.js

@@ -17,6 +17,8 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import { FormattedMessage } from "react-intl";
+import usePageTitle from 'components/usePageTitle';
+
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -30,6 +32,8 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
+    usePageTitle("msgDetails");
+    
     const params = useParams();
     const navigate = useNavigate()
 

src/pages/Message/Search/index.js

@@ -17,7 +17,7 @@ const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {FormattedMessage} from "react-intl";
 import { getSearchCriteria } from "auth/utils";
-
+import usePageTitle from "components/usePageTitle";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -31,6 +31,7 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
+    usePageTitle("systemMessage");
 
     const [searchCriteria, setSearchCriteria] = React.useState({});
     const [onReady, setOnReady] = React.useState(false);

src/pages/Payment/Details_Public/index.js

@@ -20,6 +20,7 @@ const DataGrid = Loadable(React.lazy(() => import('./DataGrid')));
 import ForwardIcon from '@mui/icons-material/Forward';
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {FormattedMessage,useIntl} from "react-intl";
+import usePageTitle from "components/usePageTitle";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -33,6 +34,8 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
+    usePageTitle("payDetail");
+    
     const params = useParams();
     const navigate = useNavigate()
     const intl = useIntl();

src/pages/Payment/Search_Public/index.js

@@ -15,6 +15,7 @@ const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {FormattedMessage} from "react-intl";
 import { getSearchCriteria } from "auth/utils";
+import usePageTitle from "components/usePageTitle";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -29,6 +30,7 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
+    usePageTitle("onlinePaymentHistory");
     const [searchCriteria, setSearchCriteria] = React.useState({
         dateTo: DateUtils.dateValue(new Date()),
         dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)),

src/pages/Proof/Reply_Public/index.js

@@ -21,6 +21,7 @@ const ProofForm = Loadable(React.lazy(() => import('./ProofForm')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import MainCard from "../../../components/MainCard";
 import {FormattedMessage} from "react-intl";
+import usePageTitle from "components/usePageTitle";
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
     width: '100%',
@@ -35,6 +36,8 @@ import {useIntl} from "react-intl";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
+    usePageTitle("proofRecord");
+    
     const params = useParams();
     const navigate = useNavigate()
     const intl = useIntl();

src/pages/Proof/Search_Public/index.js

@@ -17,6 +17,7 @@ const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
 const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import {FormattedMessage} from "react-intl";
+import usePageTitle from "components/usePageTitle";
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -31,7 +32,8 @@ const BackgroundHead = {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const UserSearchPage_Individual = () => {
-
+    usePageTitle("proofRecord");
+    
     const [issueCombo,setIssueCombo] = React.useState([]);
     const [searchCriteria, setSearchCriteria] = React.useState({
         dateTo: DateUtils.dateValue(new Date()),

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -545,6 +545,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                                     label: intl.formatMessage({ id: 'careOf' }) + ":",
                                                     valueName: "careOf",
                                                     form: formik,
+                                                    inputProps: { "aria-label": intl.formatMessage({ id: 'careOf' }) }
                                                     // disabled: true
                                                 })}
                                             </Grid>
@@ -572,7 +573,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                                     label: intl.formatMessage({ id: 'extraMark' }) + ":",
                                                     valueName: "remarks",
                                                     form: formik,
-                                                    inputProps: { maxLength: 255 }
+                                                    inputProps: { maxLength: 255, "aria-label": intl.formatMessage({ id: 'extraMark' }) }
                                                 })}
                                             </Grid>
                                     }
@@ -601,6 +602,9 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                                 name="tickAccept"
                                                 color="primary"
                                                 size="small"
+                                                inputProps={{
+                                                    "aria-label": intl.formatMessage({ id: "applyTickStr" })
+                                                }}
                                             />
                                             <Typography variant="h6" height="100%" >
                                                 <div style={{ padding: 12, textAlign: 'justify' }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "applyTickStr" }) }} />
@@ -629,9 +633,6 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                         </Typography>
                                     </Grid>
 
-
-
-
                                 </Grid>
                             </form>
                             ) : null}

src/pages/PublicNotice/ApplyForm/index.js

@@ -16,7 +16,7 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const PublicNoticeApplyForm = Loadable(lazy(() => import('./PublicNoticeApplyForm')));
-
+import usePageTitle from "components/usePageTitle";
 import {
     // isORGLoggedIn,
     isDummyLoggedIn,
@@ -27,6 +27,8 @@ import {
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const ApplyForm = () => {
+    usePageTitle("applyPublicNotice");
+    
     const [userData, setUserData] = React.useState(null);
     const [gazetteIssueList, setGazetteIssueList] = React.useState([]);
 

src/pages/PublicNotice/Details_Public/index.js

@@ -32,10 +32,12 @@ import { useNavigate } from "react-router-dom";
 import ForwardIcon from '@mui/icons-material/Forward';
 import { notifyActionSuccess } from "utils/CommonFunction";
 import { FormattedMessage, useIntl } from "react-intl";
-
+import usePageTitle from "components/usePageTitle";
 // ==============================|| Body - DEFAULT ||============================== //
 
 const DashboardDefault = () => {
+  usePageTitle("myPublicNotice");
+  
   const params = useParams();
   const [applicationDetailData, setApplicationDetailData] = useState({});
   const [appNo, setAapNo] = useState("");

src/pages/PublicNotice/ListPanel/index.js

@@ -31,11 +31,12 @@ import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst";
 import { ThemeProvider } from "@emotion/react";
 import { FormattedMessage, useIntl } from "react-intl";
-
-
+import usePageTitle from 'components/usePageTitle';
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const PublicNotice = () => {
+    usePageTitle("myPublicNotice");
+    
     const [submittedCount, setSubmittedCount] = useState(0);
     const [pendingPaymentCount, setPendingPaymentCount] = useState(0);
     const [pendingPublishCount, setPendingPublishCount] = useState(0);

src/pages/User/ChangePasswordPage/index.js

@@ -34,9 +34,12 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import { useDispatch } from "react-redux";
 import { handleLogoutFunction} from 'auth/index';
 import { isPasswordExpiry } from "utils/Utils";
+import usePageTitle from "components/usePageTitle";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const Index = () => {
+    usePageTitle("userChangePassword");
+    
     const dispatch = useDispatch()
     const navigate = useNavigate()
     const [showPassword, setShowPassword] = React.useState(false);

src/pages/User/DetailsPage_Individual/index.js

@@ -36,10 +36,12 @@ import {
     isORGLoggedIn
 } from "utils/Utils";
 import {FormattedMessage, useIntl} from "react-intl";
+import usePageTitle from "components/usePageTitle";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const UserMaintainPage_Individual = () => {
+    usePageTitle("userProfile");
     const intl = useIntl();
 
     const params = useParams();

src/pages/User/DetailsPage_Organization/index.js

@@ -40,11 +40,13 @@ import {
     isINDLoggedIn
 } from "utils/Utils";
 import {FormattedMessage, useIntl} from "react-intl";
-
+import usePageTitle from "components/usePageTitle";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
 const UserMaintainPage_Organization = () => {
+    usePageTitle("userProfile");
+
     const params = useParams();
     const navigate = useNavigate();
     const [userData, setUserData] = useState({})
@@ -121,7 +123,7 @@ const UserMaintainPage_Organization = () => {
     //     window.location.reload(false);
     // }
 
-    const loadData = () => {
+    const loadData = () => {        
         const reqId = ++reqIdRef.current;
         setLoding(true);
         if (isGLDLoggedIn()){

src/pages/authentication/ForgotPassword/AuthCallback/index.js

@@ -343,6 +343,7 @@ const Index = () => {
                                                                     aria-label={intl.formatMessage({
                                                                         id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                     })}
+                                                                    aria-describedby="helper-text-confirmPassword-signup"
                                                                     onClick={handleClickShowConfirmPassword}
                                                                     onMouseDown={handleMouseDownPassword}
                                                                     edge="end"

src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js

@@ -150,6 +150,8 @@ const ForgotPasswordApplyForm = () => {
                                             onBlur={formik.handleBlur}
                                             autoFocus
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({id: 'userLoginName'}),
+                                                "aria-describedby" : 'standard-weight-helper-text-username-login',
                                                 maxLength: 50,
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {

src/pages/authentication/ForgotUsername/AuthCallback/index.js

@@ -406,6 +406,7 @@ const Index = () => {
                                                                     aria-label={intl.formatMessage({
                                                                         id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                     })}
+                                                                    aria-describedby="helper-text-confirmPassword-signup"
                                                                     onClick={handleClickShowConfirmPassword}
                                                                     onMouseDown={handleMouseDownPassword}
                                                                     edge="end"

src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js

@@ -149,6 +149,8 @@ const ForgotUsernameApplyForm = () => {
                                             error={Boolean(formik.touched.emailAddress && formik.errors.emailAddress)}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
+                                                "aria-describedby" : 'standard-weight-helper-text-emailAddress-login',
+                                                "aria-label": intl.formatMessage({id: 'userContactEmail'}),
                                                 maxLength: 50,
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {

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

@@ -291,6 +291,7 @@ const AuthLoginCustom = () => {
                 error={Boolean(formik.touched.username && formik.errors.username)}
                 onBlur={formik.handleBlur}
                 inputProps={{
+                  "aria-describedby": 'standard-weight-helper-text-username-login',
                   maxLength: 50,
                   onKeyDown: (e) => {
                     if (e.key === 'Enter') {
@@ -336,6 +337,9 @@ const AuthLoginCustom = () => {
                   </InputAdornment>
                 }
                 placeholder=""
+                inputProps={{
+                  "aria-describedby": 'standard-weight-helper-text-password-login',
+                }}
               />
               {formik.touched.password && formik.errors.password && (
                 <FormHelperText error id="standard-weight-helper-text-password-login">

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

@@ -687,7 +687,7 @@ const BusCustomFormWizard = (props) => {
                                             </Typography>
                                         </InputLabel>
                                         <OutlinedInput
-                                            id="username-login"
+                                            id="username-signup"
                                             type="text"
                                             value={formik.values.username.trim()}
                                             name="username"
@@ -702,6 +702,8 @@ const BusCustomFormWizard = (props) => {
                                             error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "userLoginName" }),
+                                                "aria-describedby": 'helper-text-username-login',
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -762,6 +764,8 @@ const BusCustomFormWizard = (props) => {
                                                     placeholder={intl.formatMessage({id: 'userPassword'})}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
+                                                        "aria-label": intl.formatMessage({ id: "userPassword" }),
+                                                        "aria-describedby": 'helper-text-password-signup',
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                                 e.preventDefault();
@@ -797,7 +801,7 @@ const BusCustomFormWizard = (props) => {
                                                     </Typography>
                                                 </InputLabel>
                                                 <OutlinedInput
-                                                    id="confirmPassword-login"
+                                                    id="confirmPassword-signup"
                                                     type={showConfirmPassword ? 'text' : 'password'}
                                                     value={formik.values.confirmPassword.trim()}
                                                     name="confirmPassword"
@@ -810,6 +814,8 @@ const BusCustomFormWizard = (props) => {
                                                         // changePassword(e.target.value);
                                                     }}
                                                     inputProps={{
+                                                        "aria-label": intl.formatMessage({ id: "confirmPassword" }),
+                                                        "aria-describedby": 'helper-text-confirmPassword-signup',
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                                 e.preventDefault();
@@ -879,7 +885,7 @@ const BusCustomFormWizard = (props) => {
                                             </Typography>
                                         </InputLabel>
                                         <OutlinedInput
-                                            id="enCompanyName-login"
+                                            id="enCompanyName-signup"
                                             type="enCompanyName"
                                             value={formik.values.enCompanyName}
                                             name="enCompanyName"
@@ -889,6 +895,8 @@ const BusCustomFormWizard = (props) => {
                                             error={Boolean(formik.touched.enCompanyName && formik.errors.enCompanyName && selectedAddress5 !== "內地")}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "businessEngName" }),
+                                                "aria-describedby": 'helper-text-enCompanyName-signup',
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -921,6 +929,8 @@ const BusCustomFormWizard = (props) => {
                                             placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "businessChName" }),
+                                                "aria-describedby": 'helper-text-chCompanyName-signup',
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -954,6 +964,8 @@ const BusCustomFormWizard = (props) => {
                                             onBlur={formik.handleBlur}
                                             placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "businessRegCertNumber" }),
+                                                "aria-describedby": 'helper-text-brNo-signup',
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -987,6 +999,8 @@ const BusCustomFormWizard = (props) => {
                                             onBlur={formik.handleBlur}
                                             placeholder={intl.formatMessage({id: 'sameAsBusinessRegistrationCert'})}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "businessRegCertExpiryDate" }),
+                                                "aria-describedby": 'helper-text-brExpiryDate-signup',
                                                 max: "2099-12-31",
                                                 min: new Date().toISOString().split("T")[0],
                                                 onKeyDown: (e) => {
@@ -1021,6 +1035,7 @@ const BusCustomFormWizard = (props) => {
                                             placeholder={intl.formatMessage({id: 'addressLine1'})}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "addressLine1" }),
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1038,6 +1053,7 @@ const BusCustomFormWizard = (props) => {
                                             onChange={formik.handleChange}
                                             placeholder={intl.formatMessage({id: 'addressLine2'})}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "addressLine2" }),
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1055,6 +1071,7 @@ const BusCustomFormWizard = (props) => {
                                             onChange={formik.handleChange}
                                             placeholder={intl.formatMessage({id: 'addressLine3'})}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "addressLine3" }),
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1177,7 +1194,7 @@ const BusCustomFormWizard = (props) => {
                                             </Typography>
                                         </InputLabel>
                                         <OutlinedInput
-                                            id="enName-login"
+                                            id="enName-signup"
                                             type="enName"
                                             value={formik.values.enName}
                                             name="enName"
@@ -1187,6 +1204,8 @@ const BusCustomFormWizard = (props) => {
                                             error={Boolean(formik.touched.enName && formik.errors.enName)}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "userContactName" }),
+                                                "aria-describedby": 'helper-text-enName-signup',
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1214,7 +1233,7 @@ const BusCustomFormWizard = (props) => {
                                                 <OutlinedInput
                                                     fullWidth
                                                     error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)}
-                                                    id="email-login"
+                                                    id="email-signup"
                                                     type="email"
                                                     value={formik.values.email.trim()}
                                                     name="email"
@@ -1222,6 +1241,8 @@ const BusCustomFormWizard = (props) => {
                                                     placeholder={intl.formatMessage({id: 'userContactEmail'})}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
+                                                        "aria-label": intl.formatMessage({ id: "userContactEmail" }),
+                                                        "aria-describedby": 'helper-text-email-signup',
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                                 e.preventDefault();
@@ -1252,7 +1273,7 @@ const BusCustomFormWizard = (props) => {
                                                 <OutlinedInput
                                                     fullWidth
                                                     error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)}
-                                                    id="emailConfirm-login"
+                                                    id="emailConfirm-signup"
                                                     type="email"
                                                     value={formik.values.emailConfirm.trim()}
                                                     name="emailConfirm"
@@ -1264,6 +1285,8 @@ const BusCustomFormWizard = (props) => {
                                                     onCopy={handleCCPChange}
                                                     onPaste={handleCCPChange}
                                                     inputProps={{
+                                                        "aria-label": intl.formatMessage({ id: "confirmEmail" }),
+                                                        "aria-describedby": 'helper-text-emailConfirm-signup',
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                                 e.preventDefault();
@@ -1294,7 +1317,7 @@ const BusCustomFormWizard = (props) => {
                                                         </InputLabel>
                                                         <Stack direction="row">
                                                             <OutlinedInput
-                                                                id="phoneCountryCode-login"
+                                                                id="phoneCountryCode-signup"
                                                                 type="phoneCountryCode"
                                                                 value={formik.values.phoneCountryCode.trim()}
                                                                 name="phoneCountryCode"
@@ -1312,6 +1335,7 @@ const BusCustomFormWizard = (props) => {
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 onBlur={formik.handleBlur}
                                                                 inputProps={{
+                                                                    "aria-label": intl.formatMessage({ id: "phoneCountryCode" }),
                                                                     maxLength: 3,
                                                                     onKeyDown: (e) => {
                                                                         if (e.key === 'Enter') {
@@ -1322,7 +1346,7 @@ const BusCustomFormWizard = (props) => {
                                                                 sx={{ width: '33%', mr:1 }}
                                                             />
                                                             <OutlinedInput
-                                                                id="phone-login"
+                                                                id="phone-signup"
                                                                 type="phone"
                                                                 value={formik.values.phone.trim()}
                                                                 name="phone"
@@ -1338,6 +1362,8 @@ const BusCustomFormWizard = (props) => {
                                                                 placeholder={intl.formatMessage({id: 'userContactNumber'})}
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 inputProps={{
+                                                                    "aria-label": intl.formatMessage({ id: "userContactNumber" }),
+                                                                    "aria-describedby": 'helper-text-phone-signup',
                                                                     maxLength: 11,
                                                                     onKeyDown: (e) => {
                                                                         if (e.key === 'Enter') {
@@ -1369,7 +1395,7 @@ const BusCustomFormWizard = (props) => {
                                                         <Stack direction="row">
                                                             <OutlinedInput
                                                                 error={Boolean(formik.touched.fax && formik.errors.fax)}
-                                                                id="faxCountryCode-login"
+                                                                id="faxCountryCode-signup"
                                                                 type="faxCountryCode"
                                                                 value={formik.values.faxCountryCode.trim()}
                                                                 name="faxCountryCode"
@@ -1385,6 +1411,7 @@ const BusCustomFormWizard = (props) => {
                                                                 placeholder={intl.formatMessage({id: 'dialingCode'})}
                                                                 endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                                 inputProps={{
+                                                                    "aria-label": intl.formatMessage({ id: "faxCountryCode" }),
                                                                     maxLength: 3,
                                                                     onKeyDown: (e) => {
                                                                         if (e.key === 'Enter') {
@@ -1395,7 +1422,7 @@ const BusCustomFormWizard = (props) => {
                                                                 sx={{ width: '33%', mr:1 }}
                                                             />
                                                             <OutlinedInput
-                                                                id="fax-login"
+                                                                id="fax-signup"
                                                                 type="fax"
                                                                 value={formik.values.fax.trim()}
                                                                 name="fax"
@@ -1410,6 +1437,7 @@ const BusCustomFormWizard = (props) => {
                                                                 }}
                                                                 placeholder={intl.formatMessage({id: 'userFaxNumber'})}
                                                                 inputProps={{
+                                                                    "aria-label": intl.formatMessage({ id: "userFaxNumber" }),
                                                                     maxLength: 8,
                                                                     onKeyDown: (e) => {
                                                                         if (e.key === 'Enter') {
@@ -1493,6 +1521,9 @@ const BusCustomFormWizard = (props) => {
                                                                 name="termsAndConAccept"
                                                                 color="primary"
                                                                 size="small"
+                                                                inputProps={{
+                                                                    "aria-label": intl.formatMessage({ id: "iConfirm" })
+                                                                }}
                                                             />
                                                             <Typography variant="pnspsFormHeader">
                                                                 <FormattedMessage id="iConfirm"/>
@@ -1509,6 +1540,9 @@ const BusCustomFormWizard = (props) => {
                                                                 name="termsAndConNotAccept"
                                                                 color="primary"
                                                                 size="small"
+                                                                inputProps={{
+                                                                    "aria-label": intl.formatMessage({ id: "rejectTerms" })
+                                                                }}
                                                             />
                                                             <Typography variant="pnspsFormHeader">
                                                                 <FormattedMessage id="rejectTerms"/>
@@ -1553,6 +1587,10 @@ const BusCustomFormWizard = (props) => {
                                                         formik.setFieldValue("captchaField", value);
                                                     }}
                                                     sx={{ width: '75%' }}
+                                                    inputProps={{
+                                                        "aria-label": intl.formatMessage({ id: "verify" }),
+                                                        "aria-describedby": 'helper-text-captcha-signup'
+                                                    }}
                                                 />
                                             </Grid>
                                         </Stack>

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

@@ -1,7 +1,5 @@
 import { useEffect, useState } from 'react';
 
-
-// material-ui
 import {
     Box,
     Button, Checkbox
@@ -918,7 +916,7 @@ const CustomFormWizard = (props) => {
                                             </Typography>
                                         </InputLabel>
                                         <OutlinedInput
-                                            id="username-login"
+                                            id="username-signup"
                                             type="text"
                                             value={formik.values.username.trim()}
                                             name="username"
@@ -933,6 +931,8 @@ const CustomFormWizard = (props) => {
                                             error={Boolean((formik.touched.username && formik.errors.username) || checkUsername)}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "userLoginName" }),
+                                                "aria-describedby": 'helper-text-username-signup',
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -993,6 +993,8 @@ const CustomFormWizard = (props) => {
                                                     placeholder={intl.formatMessage({ id: 'userPassword' })}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
+                                                        "aria-label": intl.formatMessage({ id: "userPassword" }),
+                                                        "aria-describedby": 'helper-text-password-signup',
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                                 e.preventDefault();
@@ -1028,7 +1030,7 @@ const CustomFormWizard = (props) => {
                                                     </Typography>
                                                 </InputLabel>
                                                 <OutlinedInput
-                                                    id="confirmPassword-login"
+                                                    id="confirmPassword-signup"
                                                     type={showConfirmPassword ? 'text' : 'password'}
                                                     value={formik.values.confirmPassword.trim()}
                                                     name="confirmPassword"
@@ -1041,6 +1043,8 @@ const CustomFormWizard = (props) => {
                                                         // changePassword(e.target.value);
                                                     }}
                                                     inputProps={{
+                                                        "aria-label": intl.formatMessage({ id: "confirmPassword" }),
+                                                        "aria-describedby": 'helper-text-confirmPassword-signup',
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                                 e.preventDefault();
@@ -1119,6 +1123,7 @@ const CustomFormWizard = (props) => {
                                                 <Autocomplete
                                                     disablePortal
                                                     id="idDocType"
+                                                    label={intl.formatMessage({ id: "idDocType" })}
                                                     //value={selectedIdDocType}
                                                     size="small"
                                                     options={idDocTypeComboList}
@@ -1190,6 +1195,8 @@ const CustomFormWizard = (props) => {
                                                             error={Boolean(formik.touched.idNo && formik.errors.idNo || checkIdDocNumber)}
                                                             onBlur={formik.handleBlur}
                                                             inputProps={{
+                                                                "aria-label": intl.formatMessage({ id: "idDocNumber" }),
+                                                                "aria-describedby": 'helper-text-idNo-signup',
                                                                 maxLength: selectedIdDocType.type === 'HKID' ? 8 : 18,
                                                                 onKeyDown: (e) => {
                                                                     // console.log(e)
@@ -1280,6 +1287,8 @@ const CustomFormWizard = (props) => {
                                                         error={Boolean(formik.touched.idNo && formik.errors.idNo || checkIdDocNumber)}
                                                         onBlur={formik.handleBlur}
                                                         inputProps={{
+                                                            "aria-label": intl.formatMessage({ id: "idDocNumber" }),
+                                                            "aria-describedby": 'helper-text-idNo-signup',
                                                             maxLength: 18,
                                                             onKeyDown: (e) => {
                                                                 if (e.key === 'Enter') {
@@ -1317,7 +1326,7 @@ const CustomFormWizard = (props) => {
                                             </Typography>
                                         </InputLabel>
                                         <OutlinedInput
-                                            id="enName-login"
+                                            id="enName-signup"
                                             type="enName"
                                             value={formik.values.enName}
                                             name="enName"
@@ -1327,6 +1336,8 @@ const CustomFormWizard = (props) => {
                                             error={Boolean(formik.touched.enName && formik.errors.enName && selectedIdDocType.type !== "CNID")}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "userEnglishName" }),
+                                                "aria-describedby": 'helper-text-enName-signup',
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1360,6 +1371,8 @@ const CustomFormWizard = (props) => {
                                             placeholder={intl.formatMessage({ id: 'sameAsYourIdDoc' })}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "userChineseName" }),
+                                                "aria-describedby": 'helper-text-chName-signup',
                                                 maxLength: 6,
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
@@ -1393,6 +1406,7 @@ const CustomFormWizard = (props) => {
                                             placeholder={intl.formatMessage({ id: 'addressLine1' })}
                                             onBlur={formik.handleBlur}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "addressLine1" }),
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1410,6 +1424,7 @@ const CustomFormWizard = (props) => {
                                             onBlur={formik.handleBlur}
                                             placeholder={intl.formatMessage({ id: 'addressLine2' })}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "addressLine2" }),
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1427,6 +1442,7 @@ const CustomFormWizard = (props) => {
                                             onBlur={formik.handleBlur}
                                             placeholder={intl.formatMessage({ id: 'addressLine3' })}
                                             inputProps={{
+                                                "aria-label": intl.formatMessage({ id: "addressLine3" }),
                                                 onKeyDown: (e) => {
                                                     if (e.key === 'Enter') {
                                                         e.preventDefault();
@@ -1554,7 +1570,7 @@ const CustomFormWizard = (props) => {
                                                 <OutlinedInput
                                                     fullWidth
                                                     error={Boolean((formik.touched.email && formik.errors.email) || checkEmail)}
-                                                    id="email-login"
+                                                    id="email-signup"
                                                     type="email"
                                                     value={formik.values.email.trim()}
                                                     name="email"
@@ -1562,6 +1578,8 @@ const CustomFormWizard = (props) => {
                                                     placeholder={intl.formatMessage({ id: 'userContactEmail' })}
                                                     onBlur={formik.handleBlur}
                                                     inputProps={{
+                                                        "aria-label": intl.formatMessage({ id: "userContactEmail" }),
+                                                        "aria-describedby": "helper-text-email-signup",
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                                 e.preventDefault();
@@ -1592,7 +1610,7 @@ const CustomFormWizard = (props) => {
                                                 <OutlinedInput
                                                     fullWidth
                                                     error={Boolean(formik.touched.emailConfirm && formik.errors.emailConfirm)}
-                                                    id="emailConfirm-login"
+                                                    id="emailConfirm-signup"
                                                     type="email"
                                                     value={formik.values.emailConfirm.trim()}
                                                     name="emailConfirm"
@@ -1604,6 +1622,8 @@ const CustomFormWizard = (props) => {
                                                     onCopy={handleCCPChange}
                                                     onPaste={handleCCPChange}
                                                     inputProps={{
+                                                        "aria-label": intl.formatMessage({ id: "confirmEmail" }),
+                                                        "aria-describedby": "helper-text-emailConfirm-signup",
                                                         onKeyDown: (e) => {
                                                             if (e.key === 'Enter') {
                                                                 e.preventDefault();
@@ -1634,7 +1654,7 @@ const CustomFormWizard = (props) => {
                                                         </InputLabel>
                                                         <Stack direction="row">
                                                             <OutlinedInput
-                                                                id="phoneCountryCode-login"
+                                                                id="phoneCountryCode-signup"
                                                                 type="phoneCountryCode"
                                                                 value={formik.values.phoneCountryCode.trim()}
                                                                 name="phoneCountryCode"
@@ -1652,6 +1672,7 @@ const CustomFormWizard = (props) => {
                                                                 onBlur={formik.handleBlur}
                                                                 endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                                 inputProps={{
+                                                                    "aria-label": intl.formatMessage({ id: "dialingCode" }),
                                                                     maxLength: 3,
                                                                     onKeyDown: (e) => {
                                                                         if (e.key === 'Enter') {
@@ -1662,7 +1683,7 @@ const CustomFormWizard = (props) => {
                                                                 sx={{ width: '33%', mr: 1 }}
                                                             />
                                                             <OutlinedInput
-                                                                id="phone-login"
+                                                                id="phone-signup"
                                                                 type="phone"
                                                                 value={formik.values.phone.trim()}
                                                                 name="phone"
@@ -1679,6 +1700,8 @@ const CustomFormWizard = (props) => {
                                                                 error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                 onBlur={formik.handleBlur}
                                                                 inputProps={{
+                                                                    "aria-label": intl.formatMessage({ id: "userContactNumber" }),
+                                                                    "aria-describedby": 'helper-text-phone-signup',
                                                                     maxLength: 11,
                                                                     onKeyDown: (e) => {
                                                                         if (e.key === 'Enter') {
@@ -1710,7 +1733,7 @@ const CustomFormWizard = (props) => {
                                                         <Stack direction="row">
                                                             <OutlinedInput
                                                                 error={Boolean(formik.touched.fax && formik.errors.fax)}
-                                                                id="faxCountryCode-login"
+                                                                id="faxCountryCode-signup"
                                                                 type="faxCountryCode"
                                                                 value={formik.values.faxCountryCode.trim()}
                                                                 name="faxCountryCode"
@@ -1726,6 +1749,7 @@ const CustomFormWizard = (props) => {
                                                                 onBlur={formik.handleBlur}
                                                                 endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                                 inputProps={{
+                                                                    "aria-label": intl.formatMessage({ id: "faxCountryCode" }),
                                                                     maxLength: 3,
                                                                     onKeyDown: (e) => {
                                                                         if (e.key === 'Enter') {
@@ -1736,7 +1760,7 @@ const CustomFormWizard = (props) => {
                                                                 sx={{ width: '33%', mr: 1 }}
                                                             />
                                                             <OutlinedInput
-                                                                id="fax-login"
+                                                                id="fax-signup"
                                                                 type="fax"
                                                                 value={formik.values.fax.trim()}
                                                                 name="fax"
@@ -1751,6 +1775,7 @@ const CustomFormWizard = (props) => {
                                                                 }}
                                                                 placeholder={intl.formatMessage({ id: 'userFaxNumber' })}
                                                                 inputProps={{
+                                                                    "aria-label": intl.formatMessage({ id: "userFaxNumber" }),
                                                                     maxLength: 8,
                                                                     onKeyDown: (e) => {
                                                                         if (e.key === 'Enter') {
@@ -1835,6 +1860,9 @@ const CustomFormWizard = (props) => {
                                                                 name="termsAndConAccept"
                                                                 color="primary"
                                                                 size="small"
+                                                                inputProps={{
+                                                                    "aria-label": intl.formatMessage({ id: "iConfirm" })
+                                                                }}
                                                             />
                                                             <Typography variant="pnspsFormHeader">
                                                                 <FormattedMessage id="iConfirm" />
@@ -1851,6 +1879,9 @@ const CustomFormWizard = (props) => {
                                                                 name="termsAndConNotAccept"
                                                                 color="primary"
                                                                 size="small"
+                                                                inputProps={{
+                                                                    "aria-label": intl.formatMessage({ id: "rejectTerms" })
+                                                                }}
                                                             />
                                                             <Typography variant="pnspsFormHeader">
                                                                 <FormattedMessage id="rejectTerms" />
@@ -1895,6 +1926,10 @@ const CustomFormWizard = (props) => {
                                                         formik.setFieldValue("captchaField", value);
                                                     }}
                                                     sx={{ width: '75%' }}
+                                                    inputProps={{
+                                                        "aria-label": intl.formatMessage({ id: "verify" }),
+                                                        "aria-describedby": 'helper-text-captcha-signup'
+                                                    }}
                                                 />
                                             </Grid>
                                         </Stack>

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

@@ -746,6 +746,8 @@ const CustomFormWizard = (props) => {
                                                             placeholder={intl.formatMessage({ id: 'userContactEmail' })}
                                                             onBlur={formik.handleBlur}
                                                             inputProps={{
+                                                                "aria-describedby": "helper-text-email-signup",
+                                                                "aria-label": intl.formatMessage({ id: "userContactEmail" }),
                                                                 onKeyDown: (e) => {
                                                                     if (e.key === 'Enter') {
                                                                         e.preventDefault();
@@ -792,6 +794,8 @@ const CustomFormWizard = (props) => {
                                                             onCopy={handleCCPChange}
                                                             onPaste={handleCCPChange}
                                                             inputProps={{
+                                                                "aria-label": intl.formatMessage({ id: "confirmEmail" }),
+                                                                "aria-describedby": "helper-text-emailConfirm-signup",
                                                                 onKeyDown: (e) => {
                                                                     if (e.key === 'Enter') {
                                                                         e.preventDefault();
@@ -870,6 +874,8 @@ const CustomFormWizard = (props) => {
                                                                     error={Boolean(formik.touched.phone && formik.errors.phone)}
                                                                     onBlur={formik.handleBlur}
                                                                     inputProps={{
+                                                                        "aria-label": intl.formatMessage({ id: "userContactNumber" }),
+                                                                        "aria-describedby": 'helper-text-phone-signup',
                                                                         maxLength: 11,
                                                                         onKeyDown: (e) => {
                                                                             if (e.key === 'Enter') {

src/pages/dashboard/Public/index.js

@@ -27,10 +27,12 @@ const Notice = Loadable(React.lazy(() => import('./Notice')));
 const LoadingComponent = Loadable(React.lazy(() => import('../../extra-pages/LoadingComponent')));
 
 import { useNavigate } from "react-router-dom";
+import usePageTitle from "components/usePageTitle";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 const DashboardDefault = () => {
+  usePageTitle("Dashboard");
   const navigate = useNavigate()
   const intl = useIntl();
   const userData = JSON.parse(localStorage.getItem("userData"));

src/pages/extra-pages/UserMenuPub1/index.js

@@ -1,207 +1,276 @@
-import { Grid, Typography, Stack, } from '@mui/material';
-import { useState, useEffect, lazy } from "react";
+// File: src/pages/userGuide/UserMenuPub1.jsx
+// Notes:
+// - No new libraries.
+// - Fixes: target="_blank", rel="noopener noreferrer"
+// - Adds aria-label for icon-only download links (WCAG 2.4.4 / 1.1.1 friendly)
+// - Fixes invalid HTML: no <p> wrapping <table>
+// - Adds <thead>/<tbody>, scope, and React keys
 
-import Loadable from 'components/Loadable';
+import { Grid, Typography, Stack } from "@mui/material";
+import { useState, useEffect, lazy } from "react";
+import Loadable from "components/Loadable";
 import { useIntl, FormattedMessage } from "react-intl";
 
-import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import DownloadIcon from "@mui/icons-material/Download";
+import titleBackgroundImg from "assets/images/dashboard/gazette-bar.png";
+
+const LoadingComponent = Loadable(lazy(() => import("pages/extra-pages/LoadingComponent")));
+
 const BackgroundHead = {
-    backgroundImage: `url(${titleBackgroundImg})`,
-    width: 'auto',
-    height: 'auto',
-    backgroundSize: 'contain',
-    backgroundRepeat: 'no-repeat',
-    backgroundColor: '#0C489E',
-    backgroundPosition: 'right'
-}
+  backgroundImage: `url(${titleBackgroundImg})`,
+  width: "auto",
+  height: "auto",
+  backgroundSize: "contain",
+  backgroundRepeat: "no-repeat",
+  backgroundColor: "#0C489E",
+  backgroundPosition: "right",
+};
 
-const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
+const tableStyle = {
+  fontFamily: "arial, sans-serif",
+  borderCollapse: "collapse",
+  width: "100%",
+};
 
-import DownloadIcon from '@mui/icons-material/Download';
+const cellStyle = {
+  border: "1px solid #dddddd",
+  textAlign: "left",
+  padding: "8px",
+};
 
 const UserMenuPub1 = () => {
-    const intl = useIntl();
-    const { locale } = intl;
-    const [onReady, setOnReady] = useState(false);
+  const intl = useIntl();
+  const { locale } = intl;
+
+  const [onReady, setOnReady] = useState(false);
 
-    useEffect(() => {
-        setOnReady(true);
-    }, [locale]);
+  useEffect(() => {
+    setOnReady(true);
+  }, [locale]);
 
-    const tableStyle = {
-        fontFamily: "arial, sans-serif",
-        borderCollapse: "collapse",
-        width: "100%",
-    }
+  const pnspsurl = `https://${window.location.hostname}`;
 
-    const cellStyle = {
-        border: "1px solid #dddddd",
-        textAlign: "left",
-        padding: "8px"
-    };
+  const pickByLocale = (en, zhHK, zhCN) => (locale === "zh-HK" ? zhHK : locale === "en" ? en : zhCN);
 
-    const getRow = ({ title, orgEn, orgZh, orgCn, indEn, indZh, indCn }) => {
+  // If you already created downloadPdfAria in i18n, keep it.
+  // Example en: "Download {guide} PDF ({userType})"
+  const buildAria = (guideId, userTypeId) => {
+    const guideTitle = intl.formatMessage({ id: guideId });
+    const userType = intl.formatMessage({ id: userTypeId });
 
-        return <>
-            <tr>
-                <td style={cellStyle}>{title}</td>
-                <td style={cellStyle}><a href={locale=="zh-HK"?orgZh: locale=="en"?orgEn:orgCn} target='_brank'><DownloadIcon /></a></td>
-                <td style={cellStyle}><a href={locale=="zh-HK"?indZh: locale=="en"?indEn:indCn} target='_brank'><DownloadIcon /></a></td>
-            </tr>
-        </>
-            ;
-    }
+    return intl.formatMessage(
+      { id: "downloadPdfAria", defaultMessage: "Download {guide} PDF ({userType})" },
+      { guide: guideTitle, userType }
+    );
+  };
 
-    const pnspsurl = "https://"+window.location.hostname;
+  const rows = [
+    {
+      id: "userGuide1",
+      org: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/01 - Create account - c 1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/01c - Create account - c 1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/01sc - Create account - c 1.pdf`,
+      },
+      ind: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/01 - Create account - p 1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/01c - Create account - p 1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/01sc - Create account - p 1.pdf`,
+      },
+    },
+    {
+      id: "userGuide2",
+      org: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/02 - Login - c 1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/02c - Login - c 1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/02sc - Login - c 1.pdf`,
+      },
+      ind: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/02 - Login - p 1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/02c - Login - p 1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/02sc - Login - p 1.pdf`,
+      },
+    },
+    {
+      id: "userGuide3", // UPDATED TO v2
+      org: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/03 - Application for publishing a Public Notice in the Gazette - c 2.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/03c - Application for publishing a Public Notice in the Gazette - c 2.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/03sc - Application for publishing a Public Notice in the Gazette - c 2.pdf`,
+      },
+      ind: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/03 - Application for publishing a Public Notice in the Gazette - p 2.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/03c - Application for publishing a Public Notice in the Gazette - p 2.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/03sc - Application for publishing a Public Notice in the Gazette - p 2.pdf`,
+      },
+    },
+    {
+      id: "userGuide4",
+      org: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/04 - Proofreading reply (with correction) - c 2.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/04c - Proofreading reply (with correction) - c 2.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/04sc - Proofreading reply (with correction) - c 2.pdf`,
+      },
+      ind: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/04 - Proofreading reply (with correction) - p 2.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/04c - Proofreading reply (with correction) - p 2.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/04sc - Proofreading reply (with correction) - p 2.pdf`,
+      },
+    },
+    {
+      id: "userGuide5",
+      org: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/05 - Proofreading reply (pass for printing) - c 2.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/05c - Proofreading reply (pass for printing) - c 2.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/05sc - Proofreading reply (pass for printing) - c 2.pdf`,
+      },
+      ind: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/05 - Proofreading reply (pass for printing) - p 2.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/05c - Proofreading reply (pass for printing) - p 2.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/05sc - Proofreading reply (pass for printing) - p 2.pdf`,
+      },
+    },
+    {
+      id: "userGuide6",
+      org: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf`,
+      },
+      ind: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf`,
+      },
+    },
+    {
+      id: "userGuide7",
+      org: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/07 - Forgot password - c 1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/07c - Forgot password - c 1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/07sc - Forgot password - c 1.pdf`,
+      },
+      ind: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/07 - Forgot password - p 1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/07c - Forgot password - p 1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/07sc - Forgot password - p 1.pdf`,
+      },
+    },
+    {
+      id: "userGuide8",
+      org: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/08 - Change password - c 1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/08c - Change password - c 1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/08sc - Change password - c 1.pdf`,
+      },
+      ind: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/08 - Change password - p 1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/08c - Change password - p 1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/08sc - Change password - p 1.pdf`,
+      },
+    },
+    {
+      id: "userGuide9",
+      org: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/09 - Language of email notification - c 1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/09c - Language of email notification - c 1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/09sc - Language of email notification - c 1.pdf`,
+      },
+      ind: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/09 - Language of email notification - p 1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/09c - Language of email notification - p 1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/09sc - Language of email notification - p 1.pdf`,
+      },
+    },
+    {
+      id: "userGuidePub10",
+      org: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/10-Payment-c1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/10c-Payment-c1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/10sc-Payment-c1.pdf`,
+      },
+      ind: {
+        en: `${pnspsurl}/user-guide-pub-1/eng/10-Payment-p1.pdf`,
+        zhHK: `${pnspsurl}/user-guide-pub-1/cht/10c-Payment-p1.pdf`,
+        zhCN: `${pnspsurl}/user-guide-pub-1/chs/10sc-Payment-p1.pdf`,
+      },
+    },
+  ];
 
+  const renderDownloadLink = (href, ariaLabel) => (
+    <a href={href} target="_blank" rel="noopener noreferrer" aria-label={ariaLabel}>
+      <DownloadIcon aria-hidden="true" focusable="false" />
+    </a>
+  );
 
+  if (!onReady) {
     return (
-        !onReady ?
-            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
-                <Grid item>
-                    <LoadingComponent />
-                </Grid>
-            </Grid>
-            :
-            (
-                <Grid container sx={{ minHeight: '87vh', mb: 3}} direction="column" alignItems="center" >
-                    <Grid item xs={12} md={12} width="100%">
-                        <div style={BackgroundHead}>
-                            <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block'} }}>
-                                    <FormattedMessage id="userGuide" />
-                                </Typography>
-                            </Stack>
-                        </div>
-                    </Grid>
-                    <Grid container justifyContent="center" alignItems="center" >
-                        <Grid item xs={10} md={8} lg={6}>
-                            <div style={{
-                                textAlign: "justify",
-                                textJustify: "interWord",
-                                fontStyle: "normal"
-                            }}>
-                                <p>
-                                    
-                                    <table style={tableStyle}>
-                                        <tr>
-                                            <th style={cellStyle} width="70%"></th>
-                                            <th style={cellStyle} width="15%"><FormattedMessage id="forOrgUser" /></th>
-                                            <th style={cellStyle} width="15%"><FormattedMessage id="forIndUser" /></th>
-                                        </tr>
-
-                                        {getRow({
-                                            title: <FormattedMessage id="userGuide1" />,
-                                            orgEn: pnspsurl + "/user-guide-pub-1/eng/01 - Create account - c 1.pdf",
-                                            orgZh: pnspsurl + "/user-guide-pub-1/cht/01c - Create account - c 1.pdf",
-                                            orgCn: pnspsurl + "/user-guide-pub-1/chs/01sc - Create account - c 1.pdf",
-                                            indEn: pnspsurl + "/user-guide-pub-1/eng/01 - Create account - p 1.pdf",
-                                            indZh: pnspsurl + "/user-guide-pub-1/cht/01c - Create account - p 1.pdf",
-                                            indCn: pnspsurl + "/user-guide-pub-1/chs/01sc - Create account - p 1.pdf"
-                                        })}
-
-                                        {getRow({
-                                            title: <FormattedMessage id="userGuide2" />,
-                                            orgEn: pnspsurl + "/user-guide-pub-1/eng/02 - Login - c 1.pdf",
-                                            orgZh: pnspsurl + "/user-guide-pub-1/cht/02c - Login - c 1.pdf",
-                                            orgCn: pnspsurl + "/user-guide-pub-1/chs/02sc - Login - c 1.pdf",
-                                            indEn: pnspsurl + "/user-guide-pub-1/eng/02 - Login - p 1.pdf",
-                                            indZh: pnspsurl + "/user-guide-pub-1/cht/02c - Login - p 1.pdf",
-                                            indCn: pnspsurl + "/user-guide-pub-1/chs/02sc - Login - p 1.pdf"
-                                        })}
-
-                                        {/* UPDATED TO v2 */}
-                                        {getRow({
-                                            title: <FormattedMessage id="userGuide3" />,
-                                            orgEn: pnspsurl + "/user-guide-pub-1/eng/03 - Application for publishing a Public Notice in the Gazette - c 2.pdf",
-                                            orgZh: pnspsurl + "/user-guide-pub-1/cht/03c - Application for publishing a Public Notice in the Gazette - c 2.pdf",
-                                            orgCn: pnspsurl + "/user-guide-pub-1/chs/03sc - Application for publishing a Public Notice in the Gazette - c 2.pdf",
-                                            indEn: pnspsurl + "/user-guide-pub-1/eng/03 - Application for publishing a Public Notice in the Gazette - p 2.pdf",
-                                            indZh: pnspsurl + "/user-guide-pub-1/cht/03c - Application for publishing a Public Notice in the Gazette - p 2.pdf",
-                                            indCn: pnspsurl + "/user-guide-pub-1/chs/03sc - Application for publishing a Public Notice in the Gazette - p 2.pdf"
-                                        })}
-
-                                        {getRow({
-                                            title: <FormattedMessage id="userGuide4" />,
-                                            orgEn: pnspsurl + "/user-guide-pub-1/eng/04 - Proofreading reply (with correction) - c 2.pdf",
-                                            orgZh: pnspsurl + "/user-guide-pub-1/cht/04c - Proofreading reply (with correction) - c 2.pdf",
-                                            orgCn: pnspsurl + "/user-guide-pub-1/chs/04sc - Proofreading reply (with correction) - c 2.pdf",
-                                            indEn: pnspsurl + "/user-guide-pub-1/eng/04 - Proofreading reply (with correction) - p 2.pdf",
-                                            indZh: pnspsurl + "/user-guide-pub-1/cht/04c - Proofreading reply (with correction) - p 2.pdf",
-                                            indCn: pnspsurl + "/user-guide-pub-1/chs/04sc - Proofreading reply (with correction) - p 2.pdf"
-                                        })}
-
-                                        {getRow({
-                                            title: <FormattedMessage id="userGuide5" />,
-                                            orgEn: pnspsurl + "/user-guide-pub-1/eng/05 - Proofreading reply (pass for printing) - c 2.pdf",
-                                            orgZh: pnspsurl + "/user-guide-pub-1/cht/05c - Proofreading reply (pass for printing) - c 2.pdf",
-                                            orgCn: pnspsurl + "/user-guide-pub-1/chs/05sc - Proofreading reply (pass for printing) - c 2.pdf",
-                                            indEn: pnspsurl + "/user-guide-pub-1/eng/05 - Proofreading reply (pass for printing) - p 2.pdf",
-                                            indZh: pnspsurl + "/user-guide-pub-1/cht/05c - Proofreading reply (pass for printing) - p 2.pdf",
-                                            indCn: pnspsurl + "/user-guide-pub-1/chs/05sc - Proofreading reply (pass for printing) - p 2.pdf"
-                                        })}
-
-                                        {getRow({
-                                            title: <FormattedMessage id="userGuide6" />,
-                                            orgEn: pnspsurl + "/user-guide-pub-1/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf",
-                                            orgZh: pnspsurl + "/user-guide-pub-1/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf",
-                                            orgCn: pnspsurl + "/user-guide-pub-1/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf",
-                                            indEn: pnspsurl + "/user-guide-pub-1/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf",
-                                            indZh: pnspsurl + "/user-guide-pub-1/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf",
-                                            indCn: pnspsurl + "/user-guide-pub-1/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf"
-                                        })}
-
-                                        {getRow({
-                                            title: <FormattedMessage id="userGuide7" />,
-                                            orgEn: pnspsurl + "/user-guide-pub-1/eng/07 - Forgot password - c 1.pdf",
-                                            orgZh: pnspsurl + "/user-guide-pub-1/cht/07c - Forgot password - c 1.pdf",
-                                            orgCn: pnspsurl + "/user-guide-pub-1/chs/07sc - Forgot password - c 1.pdf",
-                                            indEn: pnspsurl + "/user-guide-pub-1/eng/07 - Forgot password - p 1.pdf",
-                                            indZh: pnspsurl + "/user-guide-pub-1/cht/07c - Forgot password - p 1.pdf",
-                                            indCn: pnspsurl + "/user-guide-pub-1/chs/07sc - Forgot password - p 1.pdf"
-                                        })}
-
-                                        {getRow({
-                                            title: <FormattedMessage id="userGuide8" />,
-                                            orgEn: pnspsurl + "/user-guide-pub-1/eng/08 - Change password - c 1.pdf",
-                                            orgZh: pnspsurl + "/user-guide-pub-1/cht/08c - Change password - c 1.pdf",
-                                            orgCn: pnspsurl + "/user-guide-pub-1/chs/08sc - Change password - c 1.pdf",
-                                            indEn: pnspsurl + "/user-guide-pub-1/eng/08 - Change password - p 1.pdf",
-                                            indZh: pnspsurl + "/user-guide-pub-1/cht/08c - Change password - p 1.pdf",
-                                            indCn: pnspsurl + "/user-guide-pub-1/chs/08sc - Change password - p 1.pdf"
-                                        })}
-
-                                        {getRow({
-                                            title: <FormattedMessage id="userGuide9" />,
-                                            orgEn: pnspsurl + "/user-guide-pub-1/eng/09 - Language of email notification - c 1.pdf",
-                                            orgZh: pnspsurl + "/user-guide-pub-1/cht/09c - Language of email notification - c 1.pdf",
-                                            orgCn: pnspsurl + "/user-guide-pub-1/chs/09sc - Language of email notification - c 1.pdf",
-                                            indEn: pnspsurl + "/user-guide-pub-1/eng/09 - Language of email notification - p 1.pdf",
-                                            indZh: pnspsurl + "/user-guide-pub-1/cht/09c - Language of email notification - p 1.pdf",
-                                            indCn: pnspsurl + "/user-guide-pub-1/chs/09sc - Language of email notification - p 1.pdf"
-                                        })}
-
-                                        {getRow({
-                                            title: <FormattedMessage id="userGuidePub10" />,
-                                            orgEn: pnspsurl + "/user-guide-pub-1/eng/10-Payment-c1.pdf",
-                                            orgZh: pnspsurl + "/user-guide-pub-1/cht/10c-Payment-c1.pdf",
-                                            orgCn: pnspsurl + "/user-guide-pub-1/chs/10sc-Payment-c1.pdf",
-                                            indEn: pnspsurl + "/user-guide-pub-1/eng/10-Payment-p1.pdf",
-                                            indZh: pnspsurl + "/user-guide-pub-1/cht/10c-Payment-p1.pdf",
-                                            indCn: pnspsurl + "/user-guide-pub-1/chs/10sc-Payment-p1.pdf"
-                                        })}
-
-                                        
-                                    </table>
-                                    <FormattedMessage id="userGuidePubNote" />
-                                </p>
-                            </div>
-                        </Grid>
-                    </Grid>
-                </Grid>
-            )
+      <Grid container sx={{ minHeight: "87vh", mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+        <Grid item>
+          <LoadingComponent />
+        </Grid>
+      </Grid>
     );
+  }
+
+  return (
+    <Grid container sx={{ minHeight: "87vh", mb: 3 }} direction="column" alignItems="center">
+      <Grid item xs={12} md={12} width="100%">
+        <div style={BackgroundHead}>
+          <Stack direction="row" height="70px" justifyContent="flex-start" alignItems="center">
+            <Typography ml={15} color="#FFF" variant="h4" sx={{ display: { xs: "none", sm: "none", md: "block" } }}>
+              <FormattedMessage id="userGuide" />
+            </Typography>
+          </Stack>
+        </div>
+      </Grid>
+
+      <Grid container justifyContent="center" alignItems="center">
+        <Grid item xs={10} md={8} lg={6}>
+          <div style={{ textAlign: "justify", textJustify: "interWord", fontStyle: "normal" }}>
+            <table style={tableStyle}>
+              <thead>
+                <tr>
+                  <th style={cellStyle} width="70%" scope="col"></th>
+                  <th style={cellStyle} width="15%" scope="col">
+                    <FormattedMessage id="forOrgUser" />
+                  </th>
+                  <th style={cellStyle} width="15%" scope="col">
+                    <FormattedMessage id="forIndUser" />
+                  </th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {rows.map((r) => {
+                  const orgHref = pickByLocale(r.org.en, r.org.zhHK, r.org.zhCN);
+                  const indHref = pickByLocale(r.ind.en, r.ind.zhHK, r.ind.zhCN);
+
+                  const guideTitle = intl.formatMessage({ id: r.id });
+
+                  return (
+                    <tr key={r.id}>
+                      <td style={cellStyle}>{guideTitle}</td>
+                      <td style={cellStyle}>
+                        {renderDownloadLink(orgHref, buildAria(r.id, "forOrgUser"))}
+                      </td>
+                      <td style={cellStyle}>
+                        {renderDownloadLink(indHref, buildAria(r.id, "forIndUser"))}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
 
-}
+            <p style={{ marginTop: 12 }}>
+              <FormattedMessage id="userGuidePubNote" />
+            </p>
+          </div>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
 
 export default UserMenuPub1;

src/translations/en.json

@@ -626,5 +626,7 @@
   "muiNoOptions": "No options",
 
   "paginationPrev": "Go to previous page",
-  "paginationNext": "Go to next page"
+  "paginationNext": "Go to next page",
+
+  "sort": "Sort"
 }

src/translations/zh-CN.json

@@ -622,5 +622,7 @@
   "muiNoOptions": "没有选项",
 
   "paginationPrev": "上一页",
-  "paginationNext": "下一页"
+  "paginationNext": "下一页",
+
+  "sort": "排序"
 }

src/translations/zh-HK.json

@@ -623,5 +623,7 @@
   "muiNoOptions": "沒有選項",
   
   "paginationPrev": "上一頁",
-  "paginationNext": "下一頁"
+  "paginationNext": "下一頁",
+
+  "sort": "排序"
 }

src/utils/CommonFunction.js

@@ -208,7 +208,7 @@ export const notifyActionSuccess = (actionMsg) => {
 export const notifyActionError = (actionMsg) => {
     toast.error(`${actionMsg}`, {
         position: "bottom-right",
-        autoClose: 5000,
+        autoClose: 60000,
         hideProgressBar: false,
         closeOnClick: true,
         pauseOnHover: true,