fix: accessibility issue for timeline

mwskwong · Dec 27, 2024 · cdc69af · cdc69af
1 parent d806071
commit cdc69af
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/src/app/education/page.tsx b/src/app/education/page.tsx
@@ -88,6 +88,7 @@ const EducationPage = async () => {
                     media={supportingDocuments}
                     organization={school}
                     title={program}
+                    titleAs="h2"
                     {...education}
                   />
                 ),

diff --git a/src/app/experience/page.tsx b/src/app/experience/page.tsx
@@ -43,7 +43,6 @@ const ExperiencePage = async () => {
               {experiences.map(
                 ({
                   id,
-
                   jobTitle,
                   company,
                   jobDuties,
@@ -59,6 +58,7 @@ const ExperiencePage = async () => {
                     organization={company}
                     tags={skills}
                     title={jobTitle}
+                    titleAs="h2"
                     {...experience}
                   />
                 ),

diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx
@@ -6,6 +6,7 @@ import {
   Grid,
   type GridProps,
   Heading,
+  type HeadingProps,
   Inset,
   Link,
   Text,
@@ -38,6 +39,7 @@ export interface ItemProps extends Omit<GridProps, 'children'> {
     thumbnail?: string | StaticImageData;
   }[];
   tags?: { name: string; url?: string }[];
+  titleAs?: HeadingProps['as'];
 }
 
 export const Item: FC<ItemProps> = ({
@@ -48,6 +50,7 @@ export const Item: FC<ItemProps> = ({
   descriptions = [],
   media = [],
   tags = [],
+  titleAs = 'h3',
   ...props
 }) => {
   const duration = to
@@ -66,7 +69,7 @@ export const Item: FC<ItemProps> = ({
       </Text>
       <Flex className="sm:col-span-3" direction="column" gap="4">
         <Flex align="start" direction="column" gap="2">
-          <Heading as="h3" size="4">
+          <Heading as={titleAs} size="4">
             {title}
           </Heading>
           <Link href={organization?.url} rel="noopener" target="_blank">