Semantic dates, accessibility, and UX affordances

bcgov · Jun 12, 2024 · fcf0fa8 · fcf0fa8
1 parent 1051caf
commit fcf0fa8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 25 deletions.
diff --git a/met-web/src/components/engagement/new/view/EngagementHero.tsx b/met-web/src/components/engagement/new/view/EngagementHero.tsx
@@ -7,11 +7,16 @@ import { colors } from 'components/common';
 import { EngagementStatusChip } from 'components/common/Indicators';
 import dayjs from 'dayjs';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronRight } from '@fortawesome/pro-regular-svg-icons';
+import { faChevronRight, faExternalLink } from '@fortawesome/pro-regular-svg-icons';
 
 export const EngagementHero = ({ engagement }: { engagement: Engagement }) => {
     const dateFormat = 'MMM DD, YYYY';
+    const semanticDateFormat = 'YYYY-MM-DD';
     const isExternalCTA = engagement.cta_url?.startsWith('http');
+    const ctaButtonIcon = isExternalCTA ? faExternalLink : faChevronRight;
+    const startDate = dayjs(engagement.start_date);
+    const endDate = dayjs(engagement.end_date);
+
     return (
         <section aria-label="Engagement Overview">
             <Box
@@ -47,8 +52,11 @@ export const EngagementHero = ({ engagement }: { engagement: Engagement }) => {
                     </Grid>
                     <Grid item>
                         <BodyText bold size="small" sx={{ color: '#201F1E' }}>
-                            <time datetime="{engagement.start_date}">{dayjs(engagement.start_date).format(dateFormat)}</time> to{' '}
-                            {dayjs(engagement.end_date).format(dateFormat)}
+                            <time dateTime={`${startDate.format(semanticDateFormat)}`}>
+                                {startDate.format(dateFormat)}
+                            </time>{' '}
+                            to{' '}
+                            <time dateTime={`${endDate.format(semanticDateFormat)}`}>{endDate.format(dateFormat)}</time>
                         </BodyText>
                     </Grid>
                 </Grid>
@@ -63,14 +71,14 @@ export const EngagementHero = ({ engagement }: { engagement: Engagement }) => {
                 >
                     <Button
                         variant="primary"
-                        icon={<FontAwesomeIcon fontSize={24} icon={faChevronRight} />}
+                        icon={<FontAwesomeIcon fontSize={24} icon={ctaButtonIcon} />}
                         iconPosition="right"
                         sx={{ borderRadius: '8px' }}
                     >
                         {engagement.cta_message || 'Learn more'}
                     </Button>
                 </a>
             </Box>
-        </>
+        </section>
     );
 };
diff --git a/met-web/src/components/engagement/new/view/index.tsx b/met-web/src/components/engagement/new/view/index.tsx
@@ -13,26 +13,24 @@ export const ViewEngagement = () => {
     const { engagement } = useLoaderData() as { engagement: Engagement };
     return (
         <>
-            <header>
-                <Suspense
-                    fallback={
-                        <Skeleton
-                            variant="rectangular"
-                            sx={{
-                                width: '100%',
-                                height: {
-                                    xs: 'unset',
-                                    md: '840px',
-                                },
-                            }}
-                        />
-                    }
-                >
-                    <Await resolve={engagement}>
-                        {(resolvedEngagement: Engagement) => <EngagementHero engagement={resolvedEngagement} />}
-                    </Await>
-                </Suspense>
-            </header>
+            <Suspense
+                fallback={
+                    <Skeleton
+                        variant="rectangular"
+                        sx={{
+                            width: '100%',
+                            height: {
+                                xs: 'unset',
+                                md: '840px',
+                            },
+                        }}
+                    />
+                }
+            >
+                <Await resolve={engagement}>
+                    {(resolvedEngagement: Engagement) => <EngagementHero engagement={resolvedEngagement} />}
+                </Await>
+            </Suspense>
             <main>
                 <Box
                     sx={{