WCAG 2.0, A 4.1.2 Name, Role, Value

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"

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"

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"

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) {
                 </Box>
                 <IconButton
                   color="inherit"
-                  aria-label="open drawer"
+                  aria-label={intl.formatMessage({id: 'openMenu'})}
+                  aria-expanded={mobileOpen}
                   edge="start"
                   onClick={handleDrawerToggle}
                   sx={{ mr: 2, display: { md: 'none' } }}
@@ -754,7 +757,8 @@ function Header(props) {
                 </Box>
                 <IconButton
                   color="inherit"
-                  aria-label="open drawer"
+                  aria-label={intl.formatMessage({id: 'openMenu'})}
+                  aria-expanded={mobileOpen}
                   edge="start"
                   onClick={handleDrawerToggle}
                   sx={{ mr: 2, display: { md: 'none' } }}
@@ -852,7 +856,8 @@ function Header(props) {
               </Box>
               <IconButton
                 color="inherit"
-                aria-label="open drawer"
+                aria-label={intl.formatMessage({id: 'openMenu'})}
+                aria-expanded={mobileOpen}
                 edge="start"
                 onClick={handleDrawerToggle}
                 sx={{ mr: 2, display: { md: 'none' } }}

src/pages/authentication/BusRegister.js

@@ -138,40 +138,43 @@ const BusRegister = () => {
       <Stepper activeStep={activeStep} sx={stepStyle}>
         {steps.map((label, index) => (
           <Step key={label} completed={completed[index]} readOnly={true}>
-            {
-              index < 2 ?
-                (<StepButton
+            {index < 2 ? (
+              <StepButton
+                aria-current={activeStep === index ? "step" : undefined}
                 // onClick={handleStep(index)}
+              >
+                <StepLabel
+                  sx={{
+                    flexDirection: "column",
+                    "& .MuiStepLabel-iconContainer": { paddingRight: 0 },
+                  }}
                 >
-                  <StepLabel sx={{
-                    flexDirection: 'column',
-                    "& .MuiStepLabel-iconContainer": {
-                      paddingRight: 0
-                    }}}>
-                    <Typography variant="step1">{label}</Typography>
-                  </StepLabel>
-                </StepButton>) :
-                (<StepButton
-                  sx={
-                    activeStep === 2
-                      ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
-                      : allStepsCompleted()
-                        ? { "& .MuiSvgIcon-root": { color: "#0C489E", fontSize: "2rem" } }
-                        : { color: "rgba(0,0,0,0.6)" }   // was 0.38
-                  }
-                  icon={<VisibilityIcon />}
+                  <Typography variant="step1">{label}</Typography>
+                </StepLabel>
+              </StepButton>
+            ) : (
+              <StepButton
+                aria-current={activeStep === index ? "step" : undefined}
+                sx={
+                  activeStep === 2
+                    ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
+                    : allStepsCompleted()
+                      ? { "& .MuiSvgIcon-root": { color: "#0C489E", fontSize: "2rem" } }
+                      : { color: "rgba(0,0,0,0.6)" }
+                }
+                icon={<VisibilityIcon />}
                 // onClick={handleStep(index)}
+              >
+                <StepLabel
+                  sx={{
+                    flexDirection: "column",
+                    "& .MuiStepLabel-iconContainer": { paddingRight: 0 },
+                  }}
                 >
-                  <StepLabel sx={{
-                    flexDirection: 'column',
-                    "& .MuiStepLabel-iconContainer": {
-                      paddingRight: 0
-                    }}}>
-                    <Typography variant="step1">{label}</Typography>
-                  </StepLabel>
-                </StepButton>)
-            }
-
+                  <Typography variant="step1">{label}</Typography>
+                </StepLabel>
+              </StepButton>
+            )}
           </Step>
         ))}
       </Stepper>

src/pages/authentication/IAmSmartRegister.js

@@ -142,28 +142,29 @@ const Register = () => {
       <Stepper activeStep={activeStep} sx={stepStyle}>
         {steps.map((label, index) => (
           <Step key={label} completed={completed[index]} readOnly={true}>
-            {
-              index < 2 ?
-                (<StepButton
+            {index < 2 ? (
+              <StepButton
+                aria-current={activeStep === index ? "step" : undefined}
                 // onClick={handleStep(index)}
-                >
-                  <Typography variant="step1">{label}</Typography>
-                </StepButton>) :
-                (<StepButton
-                  sx={
-                    activeStep === 2
-                      ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
-                      : allStepsCompleted()
-                        ? { "& .MuiSvgIcon-root": { color: "#0C489E", fontSize: "2rem" } }
-                        : { color: "rgba(0,0,0,0.6)" }   // was 0.38
-                  }
-                  icon={<VisibilityIcon />}
+              >
+                <Typography variant="step1">{label}</Typography>
+              </StepButton>
+            ) : (
+              <StepButton
+                aria-current={activeStep === index ? "step" : undefined}
+                sx={
+                  activeStep === 2
+                    ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
+                    : allStepsCompleted()
+                      ? { "& .MuiSvgIcon-root": { color: "#0C489E", fontSize: "2rem" } }
+                      : { color: "rgba(0,0,0,0.6)" }
+                }
+                icon={<VisibilityIcon />}
                 // onClick={handleStep(index)}
-                >
-                  <Typography variant="step1">{label}</Typography>
-                </StepButton>)
-            }
-
+              >
+                <Typography variant="step1">{label}</Typography>
+              </StepButton>
+            )}
           </Step>
         ))}
       </Stepper>

src/pages/authentication/Register.js

@@ -139,42 +139,45 @@ const Register = () => {
     <Stack sx={{ width: '100%', fontSize: '2rem', paddingTop: '35px', bgcolor: 'backgroundColor.default' }} alignItems="center">
       <Stepper activeStep={activeStep} sx={stepStyle}>
         {steps.map((label, index) => (
-            <Step key={label} completed={completed[index]} readOnly={true}>
-              {
-                index < 2 ?
-                    (<StepButton
-                        // onClick={handleStep(index)}
-                    >
-                      <StepLabel sx={{
-                        flexDirection: 'column',
-                        "& .MuiStepLabel-iconContainer": {
-                          paddingRight: 0
-                        }}}>
-                        <Typography variant="step1">{label}</Typography>
-                      </StepLabel>
-                    </StepButton>) :
-                    (<StepButton
-                        sx={
-                          activeStep === 2
-                            ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
-                            : allStepsCompleted()
-                              ? { "& .MuiSvgIcon-root": { color: "#0C489E", fontSize: "2rem" } }
-                              : { color: "rgba(0,0,0,0.6)" }   // was 0.38
-                        }
-                        icon={<VisibilityIcon />}
-                        // onClick={handleStep(index)}
-                    >
-                      <StepLabel sx={{
-                        flexDirection: 'column',
-                        "& .MuiStepLabel-iconContainer": {
-                          paddingRight: 0
-                        }}}>
-                        <Typography variant="step1">{label}</Typography>
-                      </StepLabel>
-                    </StepButton>)
-              }
-
-            </Step>
+          <Step key={label} completed={completed[index]} readOnly={true}>
+            {index < 2 ? (
+              <StepButton
+                aria-current={activeStep === index ? 'step' : undefined}
+                // onClick={handleStep(index)}
+              >
+                <StepLabel
+                  sx={{
+                    flexDirection: 'column',
+                    "& .MuiStepLabel-iconContainer": { paddingRight: 0 }
+                  }}
+                >
+                  <Typography variant="step1">{label}</Typography>
+                </StepLabel>
+              </StepButton>
+            ) : (
+              <StepButton
+                aria-current={activeStep === index ? 'step' : undefined}
+                sx={
+                  activeStep === 2
+                    ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
+                    : allStepsCompleted()
+                      ? { "& .MuiSvgIcon-root": { color: "#0C489E", fontSize: "2rem" } }
+                      : { color: "rgba(0,0,0,0.6)" }
+                }
+                icon={<VisibilityIcon />}
+                // onClick={handleStep(index)}
+              >
+                <StepLabel
+                  sx={{
+                    flexDirection: 'column',
+                    "& .MuiStepLabel-iconContainer": { paddingRight: 0 }
+                  }}
+                >
+                  <Typography variant="step1">{label}</Typography>
+                </StepLabel>
+              </StepButton>
+            )}
+          </Step>
         ))}
       </Stepper>
       {allStepsCompleted() ? (

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: <Typography variant="h6">
-                <FormattedMessage id="fileName"/>
-            </Typography>,
+            headerName: intl.formatMessage({ id: 'fileName' }),
             flex: 1,
         },
         {
             id: 'size',
             field: 'size',
-            headerName: <Typography variant="h6">
-                <FormattedMessage id="fileSize"/>
-            </Typography>,
+            headerName: intl.formatMessage({ id: 'fileSize' }),
             valueGetter: (params) => {
                 // console.log(params)
                 return Math.ceil(params.value / 1024) + " KB";

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: <Typography variant="h6">
-                <FormattedMessage id="fileName"/>
-            </Typography>,
+            headerName: intl.formatMessage({ id: 'fileName' }),
             flex: 4,
         },
         {
             id: 'size',
             field: 'size',
-            headerName: <Typography variant="h6">
-                <FormattedMessage id="fileSize"/>
-            </Typography>,
+            headerName: intl.formatMessage({ id: 'fileSize' }),
             valueGetter: (params) => {
                 // console.log(params)
                 return Math.ceil(params.value / 1024) + " KB";

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})",

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}）",

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}）",