From 1a74f172d9da702cd65732a3f5a4618fa51e6482 Mon Sep 17 00:00:00 2001 From: Jason Chuang Date: Mon, 23 Feb 2026 03:39:33 +0800 Subject: [PATCH] WCAG 2.0, A 4.1.2 Name, Role, Value --- .../Header/HeaderContent/LocaleSelector.js | 6 +- .../Header/HeaderContent/Notification.js | 2 +- .../Header/HeaderContent/Profile/index.js | 2 +- src/layout/MainLayout/Header/index.js | 13 +++- src/pages/authentication/BusRegister.js | 63 ++++++++-------- src/pages/authentication/IAmSmartRegister.js | 41 +++++----- src/pages/authentication/Register.js | 75 ++++++++++--------- .../auth-forms/PreviewUploadFileTable.js | 12 ++- .../auth-forms/UploadFileTable.js | 12 ++- src/translations/en.json | 3 + src/translations/zh-CN.json | 3 + src/translations/zh-HK.json | 3 + 12 files changed, 127 insertions(+), 108 deletions(-) diff --git a/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js b/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js index cd0016f..66d0b68 100644 --- a/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js +++ b/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js @@ -16,7 +16,7 @@ import { import Transitions from 'components/@extended/Transitions'; import LanguageIcon from '@mui/icons-material/Language'; -import {FormattedMessage} from "react-intl"; +import {FormattedMessage, useIntl} from "react-intl"; import * as React from "react"; import LocaleContext from "components/I18nProvider"; @@ -27,6 +27,8 @@ const LocaleSelector = () => { const matchesXs = useMediaQuery(theme.breakpoints.down('md')); const { setLocale } = useContext(LocaleContext); + const intl = useIntl(); + const anchorRef = useRef(null); const [open, setOpen] = useState(false); const handleToggle = () => { @@ -60,7 +62,7 @@ const LocaleSelector = () => { borderRadius: '6px' } }} - aria-label="open profile" + aria-label={intl.formatMessage({id: 'openLanguage'})} ref={anchorRef} aria-controls={open ? 'profile-grow' : undefined} aria-haspopup="true" diff --git a/src/layout/MainLayout/Header/HeaderContent/Notification.js b/src/layout/MainLayout/Header/HeaderContent/Notification.js index 359fab7..a300a0b 100644 --- a/src/layout/MainLayout/Header/HeaderContent/Notification.js +++ b/src/layout/MainLayout/Header/HeaderContent/Notification.js @@ -82,7 +82,7 @@ const Notification = () => { borderRadius: '6px' } }} - aria-label="open profile" + aria-label={intl.formatMessage({id: 'openLanguage'})} ref={anchorRef} aria-controls={open ? 'profile-grow' : undefined} aria-haspopup="true" diff --git a/src/layout/MainLayout/Header/HeaderContent/Profile/index.js b/src/layout/MainLayout/Header/HeaderContent/Profile/index.js index aa5e13c..5fe8ad9 100644 --- a/src/layout/MainLayout/Header/HeaderContent/Profile/index.js +++ b/src/layout/MainLayout/Header/HeaderContent/Profile/index.js @@ -101,7 +101,7 @@ const Profile = () => { borderRadius: 1, '&:hover': { bgcolor: 'secondary.lighter' } }} - aria-label="open profile" + aria-label={intl.formatMessage({id: 'openLanguage'})} ref={anchorRef} aria-controls={open ? 'profile-grow' : undefined} aria-haspopup="true" diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index c1dd25e..f1f8fcd 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -66,7 +66,7 @@ import { isGranted, isGrantedAny } from "auth/utils"; // import { AppBar } from '../../../../node_modules/@mui/material/index'; import { Link } from "react-router-dom"; import LocaleSelector from "./HeaderContent/LocaleSelector"; -import { FormattedMessage } from "react-intl"; +import { FormattedMessage, useIntl } from "react-intl"; const drawerWidth = 300; @@ -99,6 +99,8 @@ function Header(props) { const dispatch = useDispatch() const navigate = useNavigate() + const intl = useIntl(); + const handleDrawerToggle = () => { setMobileOpen((prevState) => !prevState); }; @@ -714,7 +716,8 @@ function Header(props) { { {steps.map((label, index) => ( - { - index < 2 ? - ( + - - {label} - - ) : - (} + {label} + + + ) : ( + } // onClick={handleStep(index)} + > + - - {label} - - ) - } - + {label} + + + )} ))} diff --git a/src/pages/authentication/IAmSmartRegister.js b/src/pages/authentication/IAmSmartRegister.js index 9a63104..ee6e844 100644 --- a/src/pages/authentication/IAmSmartRegister.js +++ b/src/pages/authentication/IAmSmartRegister.js @@ -142,28 +142,29 @@ const Register = () => { {steps.map((label, index) => ( - { - index < 2 ? - ( - {label} - ) : - (} + > + {label} + + ) : ( + } // onClick={handleStep(index)} - > - {label} - ) - } - + > + {label} + + )} ))} diff --git a/src/pages/authentication/Register.js b/src/pages/authentication/Register.js index 9d542d1..e525e2d 100644 --- a/src/pages/authentication/Register.js +++ b/src/pages/authentication/Register.js @@ -139,42 +139,45 @@ const Register = () => { {steps.map((label, index) => ( - - { - index < 2 ? - ( - - {label} - - ) : - (} - // onClick={handleStep(index)} - > - - {label} - - ) - } - - + + {index < 2 ? ( + + + {label} + + + ) : ( + } + // onClick={handleStep(index)} + > + + {label} + + + )} + ))} {allStepsCompleted() ? ( diff --git a/src/pages/authentication/auth-forms/PreviewUploadFileTable.js b/src/pages/authentication/auth-forms/PreviewUploadFileTable.js index b7ba4a0..0b2d048 100644 --- a/src/pages/authentication/auth-forms/PreviewUploadFileTable.js +++ b/src/pages/authentication/auth-forms/PreviewUploadFileTable.js @@ -14,7 +14,7 @@ import { Stack, Typography } from '@mui/material'; -import {FormattedMessage} from "react-intl"; +import {FormattedMessage, useIntl} from "react-intl"; // ==============================|| EVENT TABLE ||============================== // export default function PreviewUploadFileTable({ recordList, }) { @@ -23,6 +23,8 @@ export default function PreviewUploadFileTable({ recordList, }) { const [rowModesModel] = React.useState({}); // const theme = useTheme(); + const intl = useIntl(); + // const navigate = useNavigate() useEffect(() => { @@ -75,17 +77,13 @@ export default function PreviewUploadFileTable({ recordList, }) { { id: 'name', field: 'name', - headerName: - - , + headerName: intl.formatMessage({ id: 'fileName' }), flex: 1, }, { id: 'size', field: 'size', - headerName: - - , + headerName: intl.formatMessage({ id: 'fileSize' }), valueGetter: (params) => { // console.log(params) return Math.ceil(params.value / 1024) + " KB"; diff --git a/src/pages/authentication/auth-forms/UploadFileTable.js b/src/pages/authentication/auth-forms/UploadFileTable.js index 21cc7af..3ead606 100644 --- a/src/pages/authentication/auth-forms/UploadFileTable.js +++ b/src/pages/authentication/auth-forms/UploadFileTable.js @@ -14,7 +14,7 @@ import { Stack, Typography } from '@mui/material'; -import { FormattedMessage } from "react-intl"; +import { FormattedMessage, useIntl } from "react-intl"; // ==============================|| EVENT TABLE ||============================== // export default function UploadFileTable({ recordList, setUpdateRows, }) { @@ -23,6 +23,8 @@ export default function UploadFileTable({ recordList, setUpdateRows, }) { const [rowModesModel, setRowModesModel] = React.useState({}); // const theme = useTheme(); + const intl = useIntl(); + // const navigate = useNavigate() useEffect(() => { @@ -77,17 +79,13 @@ export default function UploadFileTable({ recordList, setUpdateRows, }) { { id: 'name', field: 'name', - headerName: - - , + headerName: intl.formatMessage({ id: 'fileName' }), flex: 4, }, { id: 'size', field: 'size', - headerName: - - , + headerName: intl.formatMessage({ id: 'fileSize' }), valueGetter: (params) => { // console.log(params) return Math.ceil(params.value / 1024) + " KB"; diff --git a/src/translations/en.json b/src/translations/en.json index 2ef12dd..745e9c5 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -9,6 +9,9 @@ "paymentMethodDatetimeStrFormat": "DD MMMM YYYY h:mm a", "datetimeFormate": "DD MMMM YYYY h:mm a", + "openMenu": "Navigation Menu", + "openLanguage": "Language Menu", + "bhkLogoAlt": "Brand Hong Kong logo", "wcagAaAlt": "Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.0", "downloadPdfAria": "Download PDF: {guide} ({userType})", diff --git a/src/translations/zh-CN.json b/src/translations/zh-CN.json index 591b0bc..76513b0 100644 --- a/src/translations/zh-CN.json +++ b/src/translations/zh-CN.json @@ -9,6 +9,9 @@ "paymentMethodDatetimeStrFormat": "YYYY年MM月DD日 ah时mm分", "datetimeFormate": "YYYY年MM月DD日 ah时mm分", + "openMenu": "系统选单", + "openLanguage": "语言选单", + "bhkLogoAlt": "香港品牌标志", "wcagAaAlt": "符合 WCAG 2.0 AA 级别（W3C WAI 网页内容无障碍指引）", "downloadPdfAria": "下载 PDF：{guide}（{userType}）", diff --git a/src/translations/zh-HK.json b/src/translations/zh-HK.json index 9157472..341a52e 100644 --- a/src/translations/zh-HK.json +++ b/src/translations/zh-HK.json @@ -9,6 +9,9 @@ "paymentMethodDatetimeStrFormat": "YYYY年MM月DD日 ah時mm分", "datetimeFormate": "YYYY年MM月DD日 ah時mm分", + "openMenu": "系統選單", + "openLanguage": "語言選單", + "bhkLogoAlt": "香港品牌標誌", "wcagAaAlt": "符合 WCAG 2.0 AA 級別（W3C WAI 網頁內容無障礙指引）", "downloadPdfAria": "下載 PDF：{guide}（{userType}）",