Refactor: Update BCeID Dashboard Links and Accessibility Improvements - #1403

frontend/src/assets/locales/en/dashboard.json

@@ -12,8 +12,9 @@
     "title": "Transactions",
     "orgHas": "{{name}} has:",
     "transfersInProgress": "Transfer(s) in progress",
-    "organizationsRegistered": "Organizations registered for transfers",
+    "organizationsRegistered": "Organizations registered for transfers (see bulletin RLCF-013)",
     "startNewTransfer": "Start a new transfer",
+    "linkTooltip": "Link opens in a new browser tab",
     "loadingMessage": "Loading transactions card..."
   },
   "transactions": {
@@ -31,7 +32,9 @@
   },
   "website": {
     "title": "Low Carbon Fuel Standard",
-    "link": "Visit our website at:<br /><a href=\"http://gov.bc.ca/lowcarbonfuels\" aria-label=\"Visit the LCFS Website\">gov.bc.ca/lowcarbonfuels</a>"
+    "linkText": "Visit our website at:",
+    "linkUrl": "gov.bc.ca/lowcarbonfuels",
+    "linkTooltip": "Link opens in a new browser tab"
   },
   "orgBalance": {
     "loading": "Loading balance details...",
@@ -52,7 +55,8 @@
     "orgDetailsLabel": "Organization Details",
     "orgDetailsLoadingMsg": "Loading organization details...",
     "users": "Users",
-    "createNewUsrLabel": "Create new BCeID account"
+    "createNewUsrLabel": "Create new BCeID account",
+    "linkTooltip": "Link opens in a new browser tab"
   },
   "orgComplianceReports": {
     "title": "Compliance reports",

frontend/src/views/Dashboard/components/cards/bceid/OrgDetailsCard.jsx

@@ -15,6 +15,12 @@ const OrgDetailsCard = () => {
   const { t } = useTranslation(['dashboard'])
   const { data: orgData, isLoading: orgLoading } = useOrganization()
   const navigate = useNavigate()
+
+  function openExternalLink(event, url) {
+    event.preventDefault()
+    window.open(url, '_blank', 'noopener,noreferrer')
+  }
+
   return (
     <BCWidgetCard
       component="div"
@@ -47,12 +53,14 @@ const OrgDetailsCard = () => {
               <BCTypography variant="body4" color="primary">
                 {orgData?.email}
               </BCTypography>
-              <List component="div" sx={{ maxWidth: '100%' }}>
+              <List
+                component="div"
+                sx={{ maxWidth: '100%', padding: '10px 0' }}
+              >
                 <ListItemButton
                   component="a"
-                  key="organization-users"
-                  alignItems="flex-start"
                   onClick={() => navigate(ROUTES.ORGANIZATION)}
+                  sx={{ padding: '4px 0' }}
                 >
                   <BCTypography
                     variant="subtitle2"
@@ -67,9 +75,8 @@ const OrgDetailsCard = () => {
                 </ListItemButton>
                 <ListItemButton
                   component="a"
-                  key="create-organization-users"
-                  alignItems="flex-start"
-                  onClick={() => navigate(ROUTES.ORGANIZATION_ADDUSER)}
+                  onClick={(e) => openExternalLink(e, 'https://www.bceid.ca/')}
+                  sx={{ padding: '4px 0' }}
                 >
                   <BCTypography
                     variant="subtitle2"
@@ -78,6 +85,7 @@ const OrgDetailsCard = () => {
                       textDecoration: 'underline',
                       '&:hover': { color: 'info.main' }
                     }}
+                    title={t('dashboard:orgDetails.linkTooltip')}
                   >
                     {t('dashboard:orgDetails.createNewUsrLabel')}
                     <FontAwesomeIcon

frontend/src/views/Dashboard/components/cards/bceid/OrgTransactionsCard.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { Stack, List, ListItemButton } from '@mui/material'
 import BCWidgetCard from '@/components/BCWidgetCard/BCWidgetCard'
 import BCTypography from '@/components/BCTypography'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faFilePdf, faShareFromSquare } from '@fortawesome/free-solid-svg-icons'
+import { faShareFromSquare } from '@fortawesome/free-solid-svg-icons'
 import Loading from '@/components/Loading'
 import withRole from '@/utils/withRole'
 import { roles } from '@/constants/roles'
@@ -19,16 +18,18 @@ const CountDisplay = ({ count }) => (
     variant="h3"
     sx={{
       color: 'success.main',
-      marginX: 3
+      marginX: 3,
+      visibility: count != null ? 'visible' : 'hidden'
     }}
   >
-    {count}
+    {count ?? 0}
   </BCTypography>
 )
 
 const OrgTransactionsCard = () => {
   const { t } = useTranslation(['dashboard'])
   const navigate = useNavigate()
+
   const { data: orgData, isLoading: orgLoading } = useOrganization()
   const { data: counts, isLoading } = useOrgTransactionCounts()
 
@@ -45,23 +46,31 @@ const OrgTransactionsCard = () => {
     navigate(route, { state: { filters } })
   }
 
-  function handleExternalNavigate(event, route) {
+  function openExternalLink(event, url) {
     event.preventDefault()
-    window.open(route, '_blank', 'noopener,noreferrer')
+    window.open(url, '_blank', 'noopener,noreferrer')
   }
 
-  const renderLinkWithCount = (text, count, onClick, icons = []) => {
+  const renderLinkWithCount = (
+    text,
+    count,
+    onClick,
+    icons = [],
+    title = ''
+  ) => {
     return (
       <>
-        {count != null && <CountDisplay count={count} />}
+        <CountDisplay count={count} />
         <BCTypography
           variant="body2"
           color="link"
           sx={{
             textDecoration: 'underline',
-            '&:hover': { color: 'info.main' }
+            '&:hover': { color: 'info.main' },
+            cursor: 'pointer'
           }}
           onClick={onClick}
+          title={title}
         >
           {text}
           {icons.map((icon, index) => (
@@ -79,7 +88,6 @@ const OrgTransactionsCard = () => {
   return (
     <BCWidgetCard
       component="div"
-      disableHover={true}
       title={t('dashboard:orgTransactions.title')}
       sx={{ '& .MuiCardContent-root': { padding: '16px' } }}
       content={
@@ -96,7 +104,7 @@ const OrgTransactionsCard = () => {
                 maxWidth: '100%',
                 padding: 0,
                 '& .MuiListItemButton-root': {
-                  padding: '2px 0'
+                  padding: '1px 0'
                 }
               }}
             >
@@ -121,10 +129,11 @@ const OrgTransactionsCard = () => {
                     ])
                 )}
               </ListItemButton>
+
               <ListItemButton
                 component="a"
                 onClick={(e) =>
-                  handleExternalNavigate(
+                  openExternalLink(
                     e,
                     'https://www2.gov.bc.ca/assets/gov/farming-natural-resources-and-industry/electricity-alternative-energy/transportation/renewable-low-carbon-fuels/rlcf-013.pdf'
                   )
@@ -134,13 +143,15 @@ const OrgTransactionsCard = () => {
                   t('dashboard:orgTransactions.organizationsRegistered'),
                   null,
                   (e) =>
-                    handleExternalNavigate(
+                    openExternalLink(
                       e,
-                      'https://www2.gov.bc.ca/assets/gov/farming-natural-resources-and-industry/electricity-alternative-energy/transportation/renewable-low-carbon-fuels/rlcf-013.pdf'
+                      'https://www2.gov.bc.ca/gov/content?id=4B2DC59D77F64C8491C5CDFCF8732F10'
                     ),
-                  [faFilePdf, faShareFromSquare]
+                  [faShareFromSquare],
+                  t('dashboard:orgTransactions.linkTooltip')
                 )}
               </ListItemButton>
+
               <ListItemButton
                 component="a"
                 onClick={() => navigate(ROUTES.TRANSFERS_ADD)}

frontend/src/views/Dashboard/components/cards/bceid/WebsiteCard.jsx

@@ -1,7 +1,8 @@
-import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Box } from '@mui/material'
 import BCTypography from '@/components/BCTypography'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faShareFromSquare } from '@fortawesome/free-solid-svg-icons'
 
 const WebsiteCard = () => {
   const { t } = useTranslation(['dashboard'])
@@ -29,10 +30,30 @@ const WebsiteCard = () => {
         <strong>{t('dashboard:website.title')}</strong>
       </BCTypography>
       <BCTypography
-        style={{ fontSize: '16px', color: '#003366', textAlign: 'center' }}
-        color="link"
-        dangerouslySetInnerHTML={{ __html: t('dashboard:website.link') }}
-      ></BCTypography>
+        style={{
+          fontSize: '16px',
+          color: '#003366',
+          textAlign: 'center'
+        }}
+      >
+        {t('dashboard:website.linkText')}
+        <br />
+        <a
+          href="http://gov.bc.ca/lowcarbonfuels"
+          target="_blank"
+          rel="noopener noreferrer"
+          title={t('dashboard:website.linkTooltip')}
+        >
+          {t('dashboard:website.linkUrl')}
+          <FontAwesomeIcon
+            icon={faShareFromSquare}
+            style={{
+              marginLeft: '6px',
+              color: '#578260'
+            }}
+          />
+        </a>
+      </BCTypography>
     </Box>
   )
 }