Merge pull request #1815 from bcgov/fix/kevin--1709

fix: cypress accessibility issues
bcgov · Jan 28, 2025 · 64f775d · 64f775d
2 parents 492e910 + c5e76e7
commit 64f775d
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 19 deletions.
diff --git a/frontend/src/components/BCNavbar/index.jsx b/frontend/src/components/BCNavbar/index.jsx
@@ -34,6 +34,7 @@ function BCNavbar({
             }}
             color="inherit"
             elevation={0}
+            aria-label="main navigation"
           >
             <HeaderBar
               data={{ title, routes, beta, headerRightPart, menuRightPart }}

diff --git a/frontend/src/components/BCWidgetCard/BCWidgetCard.jsx b/frontend/src/components/BCWidgetCard/BCWidgetCard.jsx
@@ -48,7 +48,12 @@ function BCWidgetCard({
           mx={2}
           mt={-3}
         >
-          <BCTypography variant="subtitle2" fontWeight="light" color="inherit">
+          <BCTypography
+            variant="subtitle2"
+            fontWeight="light"
+            color="inherit"
+            component="h2"
+          >
             {title}
           </BCTypography>
           {editButton && (

diff --git a/frontend/src/layouts/MainLayout/MainLayout.jsx b/frontend/src/layouts/MainLayout/MainLayout.jsx
@@ -42,7 +42,6 @@ export const MainLayout = () => {
         </BCTypography>
         <Navbar />
         <Container
-          component="main"
           maxWidth="lg"
           sx={{
             padding: '1rem',

diff --git a/frontend/src/views/Dashboard/components/cards/bceid/FeedbackCard.jsx b/frontend/src/views/Dashboard/components/cards/bceid/FeedbackCard.jsx
@@ -18,7 +18,7 @@ const FeedbackCard = () => {
       alignItems="center"
       justifyContent="center"
     >
-      <Icon sx={{ color: '#578260', fontSize: 60 }}>
+      <Icon sx={{ color: '#547D59', fontSize: 60 }}>
         <MailIcon />
       </Icon>
       <BCTypography

diff --git a/frontend/src/views/Dashboard/components/cards/bceid/OrgBalanceCard.jsx b/frontend/src/views/Dashboard/components/cards/bceid/OrgBalanceCard.jsx
@@ -51,7 +51,7 @@ const OrgBalanceCard = () => {
             {t('dashboard:orgBalance.hasABalanceOf')}
           </BCTypography>
           <BCTypography
-            style={{ fontSize: '32px', color: '#578260', marginBottom: '-4px' }}
+            style={{ fontSize: '32px', color: '#547D59', marginBottom: '-4px' }}
             component="span"
           >
             {orgBalance.totalBalance.toLocaleString()}
@@ -63,7 +63,7 @@ const OrgBalanceCard = () => {
           </BCTypography>
           <Box display="flex" alignItems="center" mt={1}>
             <BCTypography
-              style={{ fontSize: '22px', color: '#578260' }}
+              style={{ fontSize: '22px', color: '#547D59' }}
               component="span"
             >
               ({formattedReservedBalance} {t('dashboard:orgBalance.inReserve')})
@@ -73,7 +73,7 @@ const OrgBalanceCard = () => {
               TransitionComponent={Fade}
               arrow
             >
-              <InfoIcon style={{ marginLeft: '4px', color: '#578260' }} />
+              <InfoIcon style={{ marginLeft: '4px', color: '#547D59' }} />
             </Tooltip>
           </Box>
         </>

diff --git a/frontend/src/views/Dashboard/components/cards/bceid/OrgDetailsCard.jsx b/frontend/src/views/Dashboard/components/cards/bceid/OrgDetailsCard.jsx
@@ -63,6 +63,7 @@ const OrgDetailsCard = () => {
                 >
                   <BCTypography
                     variant="subtitle2"
+                    component="p"
                     color="link"
                     sx={{
                       textDecoration: 'underline',
@@ -89,7 +90,7 @@ const OrgDetailsCard = () => {
                     {t('dashboard:orgDetails.createNewUsrLabel')}
                     <FontAwesomeIcon
                       icon={faShareFromSquare}
-                      style={{ color: '#578260', marginLeft: 6 }}
+                      style={{ color: '#547D59', marginLeft: 6 }}
                     />
                   </BCTypography>
                 </ListItemButton>

diff --git a/frontend/src/views/Dashboard/components/cards/bceid/OrgTransactionsCard.jsx b/frontend/src/views/Dashboard/components/cards/bceid/OrgTransactionsCard.jsx
@@ -77,7 +77,7 @@ const OrgTransactionsCard = () => {
             <FontAwesomeIcon
               key={index}
               icon={icon}
-              style={{ color: '#578260', marginLeft: 6 }}
+              style={{ color: '#547D59', marginLeft: 6 }}
             />
           ))}
         </BCTypography>

diff --git a/frontend/src/views/Dashboard/components/cards/bceid/OrgUserSettingsCard.jsx b/frontend/src/views/Dashboard/components/cards/bceid/OrgUserSettingsCard.jsx
@@ -19,7 +19,7 @@ const linkStyle = {
 
 const UserSettingsLink = ({ onClick, children }) => (
   <ListItemButton onClick={onClick}>
-    <Typography variant="subtitle2" sx={linkStyle}>
+    <Typography variant="subtitle2" sx={linkStyle} component="p">
       {children}
     </Typography>
   </ListItemButton>
@@ -65,7 +65,7 @@ const OrgUserSettingsCard = () => {
               {t('dashboard:orgUserSettings.help')}
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
-                style={{ color: '#578260', marginLeft: 6 }}
+                style={{ color: '#547D59', marginLeft: 6 }}
               />
             </UserSettingsLink>
           </List>

diff --git a/frontend/src/views/Dashboard/components/cards/bceid/WebsiteCard.jsx b/frontend/src/views/Dashboard/components/cards/bceid/WebsiteCard.jsx
@@ -49,7 +49,7 @@ const WebsiteCard = () => {
             icon={faShareFromSquare}
             style={{
               marginLeft: '6px',
-              color: '#578260'
+              color: '#547D59'
             }}
           />
         </a>

diff --git a/frontend/src/views/Dashboard/components/cards/idir/AdminLinksCard.jsx b/frontend/src/views/Dashboard/components/cards/idir/AdminLinksCard.jsx
@@ -46,6 +46,7 @@ const AdminLinksCard = () => {
             >
               <BCTypography
                 variant="subtitle2"
+                component="p"
                 color="link"
                 sx={{
                   textDecoration: 'underline',

diff --git a/frontend/src/views/Dashboard/components/cards/idir/OrganizationsSummaryCard.jsx b/frontend/src/views/Dashboard/components/cards/idir/OrganizationsSummaryCard.jsx
@@ -82,7 +82,7 @@ const OrganizationsSummaryCard = () => {
             {selectedOrganization.name}
           </BCTypography>
           <BCTypography
-            style={{ fontSize: '32px', color: '#578260', marginBottom: '-2px' }}
+            style={{ fontSize: '32px', color: '#547D59', marginBottom: '-2px' }}
             component="span"
           >
             {numberFormatter(selectedOrganization.totalBalance)}
@@ -95,7 +95,7 @@ const OrganizationsSummaryCard = () => {
           </BCTypography>
           <Box display="flex" alignItems="center" mt={1}>
             <BCTypography
-              style={{ fontSize: '22px', color: '#578260' }}
+              style={{ fontSize: '22px', color: '#547D59' }}
               component="span"
             >
               ({numberFormatter(selectedOrganization.reservedBalance)} in
@@ -119,6 +119,7 @@ const OrganizationsSummaryCard = () => {
             }}
             variant="outlined"
             onChange={onSelectOrganization}
+            inputProps={{ 'aria-label': 'Select an organization' }}
           >
             <MenuItem key="default" value={t('txn:allOrganizations')}>
               {t('txn:allOrganizations')}

diff --git a/frontend/src/views/Dashboard/components/cards/idir/UserSettingsCard.jsx b/frontend/src/views/Dashboard/components/cards/idir/UserSettingsCard.jsx
@@ -19,7 +19,7 @@ const linkStyle = {
 
 const UserSettingsLink = ({ onClick, children }) => (
   <ListItemButton onClick={onClick}>
-    <Typography variant="subtitle2" sx={linkStyle}>
+    <Typography variant="subtitle2" sx={linkStyle} component="p">
       {children}
     </Typography>
   </ListItemButton>
@@ -65,7 +65,7 @@ const UserSettingsCard = () => {
               {t('dashboard:userSettings.help')}
               <FontAwesomeIcon
                 icon={faArrowUpRightFromSquare}
-                style={{ color: '#578260', marginLeft: 6 }}
+                style={{ color: '#547D59', marginLeft: 6 }}
               />
             </UserSettingsLink>
           </List>

diff --git a/frontend/src/views/Notifications/NotificationMenu/components/NotificationSettingsForm.jsx b/frontend/src/views/Notifications/NotificationMenu/components/NotificationSettingsForm.jsx
@@ -214,7 +214,7 @@ const NotificationSettingsForm = ({
               }}
             >
               <MailIcon
-                sx={{ color: '#578260', width: '22px', height: '22px' }}
+                sx={{ color: '#547D59', width: '22px', height: '22px' }}
               />
               <BCTypography variant="body2" sx={{ color: 'text.primary' }}>
                 {t('emailNotification')}
@@ -234,7 +234,7 @@ const NotificationSettingsForm = ({
               }}
             >
               <NotificationsIcon
-                sx={{ color: '#578260', width: '22px', height: '22px' }}
+                sx={{ color: '#547D59', width: '22px', height: '22px' }}
               />
               <BCTypography variant="body2" sx={{ color: 'text.primary' }}>
                 {t('inAppNotification')}
@@ -263,7 +263,7 @@ const NotificationSettingsForm = ({
                         >
                           <MailIcon
                             style={{
-                              color: '#578260',
+                              color: '#547D59',
                               width: '22px',
                               height: '22px'
                             }}
@@ -280,7 +280,7 @@ const NotificationSettingsForm = ({
                         >
                           <NotificationsIcon
                             style={{
-                              color: '#578260',
+                              color: '#547D59',
                               width: '22px',
                               height: '22px'
                             }}