register form - upload file and tabindex fix

src/pages/Proof/Create_FromApp/UploadFileTable.js

@@ -7,6 +7,7 @@ import {
 } from "@mui/x-data-grid";
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import { useEffect } from "react";
+import { useIntl } from 'react-intl';
 // import {useNavigate} from "react-router-dom";
 // import { useTheme } from '@mui/material/styles';
 import {
@@ -17,6 +18,8 @@ import {
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({ recordList, setRecordList, showPageColumn, _checkCode, _expectedCode }) {
+    const intl = useIntl();
+    const deleteFileLabel = intl.formatMessage({ id: 'ariaDeleteFile' });
 
     const [rows, setRows] = React.useState(recordList);
     const [rowModesModel, setRowModesModel] = React.useState({});
@@ -67,6 +70,25 @@ export default function UploadFileTable({ recordList, setRecordList, showPageCol
         setRows(rows.filter((row) => row.id !== id));
     }
 
+    const renderDeleteAction = (id) => (
+        <GridActionsCellItem
+            key="delete"
+            icon={<RemoveCircleOutlineIcon />}
+            label={deleteFileLabel}
+            title={deleteFileLabel}
+            className="textPrimary"
+            onClick={handleCancelClick(id)}
+            onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleCancelClick(id)(event);
+                }
+            }}
+            color="error"
+        />
+    );
+
     const handlePreviewClick = (param) => () => {
         var reader = new FileReader();
         reader.onload = function () {
@@ -94,17 +116,7 @@ export default function UploadFileTable({ recordList, setRecordList, showPageCol
             width: 30,
             cellClassName: 'actions',
             // hide:true,
-            getActions: ({ id }) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<RemoveCircleOutlineIcon />}
-                        label="delete"
-                        className="textPrimary"
-                        onClick={handleCancelClick(id)}
-                        color="error"
-                    />]
-            },
+            getActions: ({ id }) => [renderDeleteAction(id)],
         },
         {
             field: 'name',
@@ -139,17 +151,7 @@ export default function UploadFileTable({ recordList, setRecordList, showPageCol
             width: 30,
             cellClassName: 'actions',
             // hide:true,
-            getActions: ({ id }) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<RemoveCircleOutlineIcon />}
-                        label="delete"
-                        className="textPrimary"
-                        onClick={handleCancelClick(id)}
-                        color="error"
-                    />]
-            },
+            getActions: ({ id }) => [renderDeleteAction(id)],
         },
         {
             field: 'name',

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

@@ -55,7 +55,7 @@ import {PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 import {FormattedMessage, useIntl} from "react-intl";
 //import { Invaild } from 'utils/IconUtils';
-import { notifyActionError } from 'utils/CommonFunction';
+import { handleActionKeyDown, notifyActionError } from 'utils/CommonFunction';
 
 // ============================|| FIREBASE - REGISTER ||============================ //
 
@@ -822,10 +822,12 @@ const BusCustomFormWizard = (props) => {
                                                         <InputAdornment position="end">
                                                             <IconButton
                                                                 role="button"
+                                                                tabIndex={0}
                                                                 aria-label={intl.formatMessage({
                                                                     id: showPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                 })}
                                                                 onClick={handleClickShowPassword}
+                                                                onKeyDown={(event) => handleActionKeyDown(event, handleClickShowPassword)}
                                                                 onMouseDown={handleMouseDownPassword}
                                                                 edge="end"
                                                                 size="large"
@@ -899,10 +901,12 @@ const BusCustomFormWizard = (props) => {
                                                         <InputAdornment position="end">
                                                             <IconButton
                                                                 role="button"
+                                                                tabIndex={0}
                                                                 aria-label={intl.formatMessage({
                                                                     id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                 })}
                                                                 onClick={handleClickShowConfirmPassword}
+                                                                onKeyDown={(event) => handleActionKeyDown(event, handleClickShowConfirmPassword)}
                                                                 onMouseDown={handleMouseDownPassword}
                                                                 edge="end"
                                                                 size="large"
@@ -1546,6 +1550,7 @@ const BusCustomFormWizard = (props) => {
                                                             variant="contained"
                                                             sx={{ height: '40px' }}
                                                             type="button"
+                                                            tabIndex={0}
                                                             onClick={() => {
                                                                 if (fileInputRef.current) {
                                                                     fileInputRef.current.click();
@@ -1659,7 +1664,14 @@ const BusCustomFormWizard = (props) => {
                                                 <img src={captchaImg} alt="" />
                                             </Grid>
                                             <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
-                                                <IconButton role="button" aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
+                                                <IconButton
+                                                    role="button"
+                                                    tabIndex={0}
+                                                    aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })}
+                                                    size="large"
+                                                    onClick={() => { onCaptchaChange() }}
+                                                    onKeyDown={(event) => handleActionKeyDown(event, () => onCaptchaChange())}
+                                                >
                                                     <LoopIcon fontSize="inherit" />
                                                 </IconButton>
                                             </Grid>

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

@@ -47,7 +47,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from 'react-router-dom';
 import { PNSPS_LONG_BUTTON_THEME } from "../../../themes/buttonConst";
 import * as HttpUtils from "../../../utils/HttpUtils";
-import { notifyActionError } from 'utils/CommonFunction';
+import { handleActionKeyDown, notifyActionError } from 'utils/CommonFunction';
 // ============================|| FIREBASE - REGISTER ||============================ //
 
 const CustomFormWizard = (props) => {
@@ -1040,10 +1040,12 @@ const CustomFormWizard = (props) => {
                                                         <InputAdornment position="end">
                                                             <IconButton
                                                                 role="button"
+                                                                tabIndex={0}
                                                                 aria-label={intl.formatMessage({
                                                                     id: showPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                 })}
                                                                 onClick={handleClickShowPassword}
+                                                                onKeyDown={(event) => handleActionKeyDown(event, handleClickShowPassword)}
                                                                 onMouseDown={handleMouseDownPassword}
                                                                 edge="end"
                                                                 size="large"
@@ -1117,10 +1119,12 @@ const CustomFormWizard = (props) => {
                                                         <InputAdornment position="end">
                                                             <IconButton
                                                                 role="button"
+                                                                tabIndex={0}
                                                                 aria-label={intl.formatMessage({
                                                                     id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                 })}
                                                                 onClick={handleClickShowConfirmPassword}
+                                                                onKeyDown={(event) => handleActionKeyDown(event, handleClickShowConfirmPassword)}
                                                                 onMouseDown={handleMouseDownPassword}
                                                                 edge="end"
                                                                 size="large"
@@ -1874,6 +1878,7 @@ const CustomFormWizard = (props) => {
                                                             variant="contained"
                                                             sx={{ height: '40px' }}
                                                             type="button"
+                                                            tabIndex={0}
                                                             onClick={() => {
                                                                 if (fileInputRef.current) {
                                                                     fileInputRef.current.click();
@@ -1987,7 +1992,14 @@ const CustomFormWizard = (props) => {
                                                 <img src={captchaImg} alt="" />
                                             </Grid>
                                             <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
-                                                <IconButton role="button" aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
+                                                <IconButton
+                                                    role="button"
+                                                    tabIndex={0}
+                                                    aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })}
+                                                    size="large"
+                                                    onClick={() => { onCaptchaChange() }}
+                                                    onKeyDown={(event) => handleActionKeyDown(event, () => onCaptchaChange())}
+                                                >
                                                     <LoopIcon fontSize="inherit" />
                                                 </IconButton>
                                             </Grid>
@@ -2116,8 +2128,10 @@ const CustomFormWizard = (props) => {
                                     
                                         <IconButton
                                             role="button"
+                                            tabIndex={0}
                                             aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                             onClick={handleClickShowId}
+                                            onKeyDown={(event) => handleActionKeyDown(event, handleClickShowId)}
                                             onMouseDown={handleMouseDownId}
                                             edge="end"
                                             size="medium"

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

@@ -14,6 +14,7 @@ import {
     Typography
 } from '@mui/material';
 import { FormattedMessage, useIntl } from "react-intl";
+import { handleActionKeyDown } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function UploadFileTable({ recordList, setUpdateRows, }) {
@@ -74,8 +75,10 @@ export default function UploadFileTable({ recordList, setUpdateRows, }) {
                                     size="small"
                                     color="error"
                                     role="button"
-                                    aria-label={intl.formatMessage({ id: 'delete' })}
+                                    tabIndex={0}
+                                    aria-label={intl.formatMessage({ id: 'ariaDeleteFile' })}
                                     onClick={() => handleCancelClick(row.id)}
+                                    onKeyDown={(event) => handleActionKeyDown(event, () => handleCancelClick(row.id))}
                                 >
                                     <RemoveCircleOutlineIcon fontSize="small" />
                                 </IconButton>

src/routes/GLDUserRoutes.js

@@ -7,7 +7,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
 import {isGranted, isGrantedAny} from "auth/utils";
 // import { isPasswordExpiry } from "utils/Utils";
 // render - dashboard
-const DashboardDefault = Loadable(lazy(() => import('pages/Dashboard/GLD')));
+const DashboardDefault = Loadable(lazy(() => import('pages/dashboard/GLD')));
 const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNotice/Details_GLD')));
 const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNotice/Search_GLD')));
 const ApplicationMarkAsPaidSearch = Loadable(lazy(() => import('pages/PublicNotice/Search_Mark_As_Paid_GLD')));

src/routes/PublicUserRoutes.js

@@ -7,7 +7,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
 // import { isPasswordExpiry } from "utils/Utils";
 
 // render - dashboard
-const DashboardDefault = Loadable(lazy(() => import('pages/Dashboard/Public')));
+const DashboardDefault = Loadable(lazy(() => import('pages/dashboard/Public')));
 const ManageOrgUser = Loadable(lazy(() => import('pages/User/ManagePage_OrgPublic')));
 const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice/ListPanel')));
 const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/ApplyForm')));

src/translations/en.json

@@ -652,6 +652,7 @@
   "ariaApplicationGroup": "Application Group",
   "ariaProfileTabs": "Profile tabs",
   "ariaUploadPdfFile": "Upload PDF file",
+  "ariaDeleteFile": "Delete file",
   "ariaExportHolidayTemplate": "Export holiday template",
   "ariaUploadExcelFile": "Upload Excel file (.xlsx)",
   "ariaBackToHome": "Back to home",

src/translations/zh-CN.json

@@ -648,6 +648,7 @@
   "ariaApplicationGroup": "申请组别",
   "ariaProfileTabs": "个人资料选项卡",
   "ariaUploadPdfFile": "上传 PDF 文件",
+  "ariaDeleteFile": "删除文件",
   "ariaExportHolidayTemplate": "导出假期模板",
   "ariaUploadExcelFile": "上传 Excel 文件 (.xlsx)",
   "ariaBackToHome": "返回主页",

src/translations/zh-HK.json

@@ -649,6 +649,7 @@
   "ariaApplicationGroup": "申請組別",
   "ariaProfileTabs": "個人檔案分頁",
   "ariaUploadPdfFile": "上載 PDF 檔案",
+  "ariaDeleteFile": "刪除檔案",
   "ariaExportHolidayTemplate": "匯出假期範本",
   "ariaUploadExcelFile": "上載 Excel 檔案 (.xlsx)",
   "ariaBackToHome": "返回主頁",

src/utils/CommonFunction.js

@@ -11,6 +11,13 @@ export const clickableLink=(link, label)=> {
     return <a href={link}>{label}</a>;
 }
 
+export const handleActionKeyDown = (event, action) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        action(event);
+    }
+};
+
 export function getDeletedRecordWithRefList(referenceList, updatedList) {
     return referenceList.filter(x => !updatedList.includes(x));
 }