frontend: Fix new project heading a11y issue

vyncent-t · vyncent-t · commit 46bca74fc976 · 2026-02-11T14:18:56.000-05:00
diff --git a/frontend/src/components/project/NewProjectPopup.tsx b/frontend/src/components/project/NewProjectPopup.tsx
@@ -88,7 +88,7 @@ function ProjectTypeButton({
     >
       <Box sx={{ width: '52px', height: '52px', alignSelf: 'center' }}>{icon}</Box>
       <Box>
-        <Typography variant="h6" sx={{ display: 'flex' }}>
+        <Typography variant="h6" component="span" sx={{ display: 'flex' }}>
           {title}
         </Typography>
         <Typography variant="body2" color="text.secondary">
@@ -346,7 +346,9 @@ export function NewProjectPopup({ open, onClose }: { open: boolean; onClose: ()
     <Dialog open={open} maxWidth={false} onClose={onClose}>
       {projectStep === undefined && (
         <>
-          <DialogTitle sx={{ display: 'flex' }}>{t('Create a Project')}</DialogTitle>
+          <DialogTitle component="h1" sx={{ display: 'flex' }}>
+            {t('Create a Project')}
+          </DialogTitle>
           <DialogContent sx={{ maxWidth: '540px' }}>
             <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
               <Trans>
diff --git a/frontend/src/components/project/__snapshots__/NewProjectPopup.Default.stories.storyshot b/frontend/src/components/project/__snapshots__/NewProjectPopup.Default.stories.storyshot
@@ -30,12 +30,12 @@
         class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse css-v61m47-MuiPaper-root-MuiDialog-paper"
         role="dialog"
       >
-        <h2
+        <h1
           class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-q5kqw8-MuiTypography-root-MuiDialogTitle-root"
           id=":mock-test-id:"
         >
           Create a Project
-        </h2>
+        </h1>
         <div
           class="MuiDialogContent-root css-15ohtq7-MuiDialogContent-root"
         >
@@ -58,11 +58,11 @@
               <div
                 class="MuiBox-root css-0"
               >
-                <h6
+                <span
                   class="MuiTypography-root MuiTypography-h6 css-16yif3g-MuiTypography-root"
                 >
                   New Project
-                </h6>
+                </span>
                 <p
                   class="MuiTypography-root MuiTypography-body2 css-11zj6ou-MuiTypography-root"
                 >
@@ -84,11 +84,11 @@
               <div
                 class="MuiBox-root css-0"
               >
-                <h6
+                <span
                   class="MuiTypography-root MuiTypography-h6 css-16yif3g-MuiTypography-root"
                 >
                   New Project from YAML
-                </h6>
+                </span>
                 <p
                   class="MuiTypography-root MuiTypography-body2 css-11zj6ou-MuiTypography-root"
                 >
diff --git a/frontend/src/components/project/__snapshots__/NewProjectPopup.WithExistingProjects.stories.storyshot b/frontend/src/components/project/__snapshots__/NewProjectPopup.WithExistingProjects.stories.storyshot
@@ -30,12 +30,12 @@
         class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse css-v61m47-MuiPaper-root-MuiDialog-paper"
         role="dialog"
       >
-        <h2
+        <h1
           class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-q5kqw8-MuiTypography-root-MuiDialogTitle-root"
           id=":mock-test-id:"
         >
           Create a Project
-        </h2>
+        </h1>
         <div
           class="MuiDialogContent-root css-15ohtq7-MuiDialogContent-root"
         >
@@ -58,11 +58,11 @@
               <div
                 class="MuiBox-root css-0"
               >
-                <h6
+                <span
                   class="MuiTypography-root MuiTypography-h6 css-16yif3g-MuiTypography-root"
                 >
                   New Project
-                </h6>
+                </span>
                 <p
                   class="MuiTypography-root MuiTypography-body2 css-11zj6ou-MuiTypography-root"
                 >
@@ -84,11 +84,11 @@
               <div
                 class="MuiBox-root css-0"
               >
-                <h6
+                <span
                   class="MuiTypography-root MuiTypography-h6 css-16yif3g-MuiTypography-root"
                 >
                   New Project from YAML
-                </h6>
+                </span>
                 <p
                   class="MuiTypography-root MuiTypography-body2 css-11zj6ou-MuiTypography-root"
                 >

Original file line number	Diff line number	Diff line change
`@@ -30,12 +30,12 @@`
`30`	`30`	`class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse css-v61m47-MuiPaper-root-MuiDialog-paper"`
`31`	`31`	`role="dialog"`
`32`	`32`	`>`
`33`		`- <h2`
	`33`	`+ <h1`
`34`	`34`	`class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-q5kqw8-MuiTypography-root-MuiDialogTitle-root"`
`35`	`35`	`id=":mock-test-id:"`
`36`	`36`	`>`
`37`	`37`	`Create a Project`
`38`		`- </h2>`
	`38`	`+ </h1>`
`39`	`39`	`<div`
`40`	`40`	`class="MuiDialogContent-root css-15ohtq7-MuiDialogContent-root"`
`41`	`41`	`>`
`@@ -58,11 +58,11 @@`
`58`	`58`	`<div`
`59`	`59`	`class="MuiBox-root css-0"`
`60`	`60`	`>`
`61`		`- <h6`
	`61`	`+ <span`
`62`	`62`	`class="MuiTypography-root MuiTypography-h6 css-16yif3g-MuiTypography-root"`
`63`	`63`	`>`
`64`	`64`	`New Project`
`65`		`- </h6>`
	`65`	`+ </span>`
`66`	`66`	`<p`
`67`	`67`	`class="MuiTypography-root MuiTypography-body2 css-11zj6ou-MuiTypography-root"`
`68`	`68`	`>`
`@@ -84,11 +84,11 @@`
`84`	`84`	`<div`
`85`	`85`	`class="MuiBox-root css-0"`
`86`	`86`	`>`
`87`		`- <h6`
	`87`	`+ <span`
`88`	`88`	`class="MuiTypography-root MuiTypography-h6 css-16yif3g-MuiTypography-root"`
`89`	`89`	`>`
`90`	`90`	`New Project from YAML`
`91`		`- </h6>`
	`91`	`+ </span>`
`92`	`92`	`<p`
`93`	`93`	`class="MuiTypography-root MuiTypography-body2 css-11zj6ou-MuiTypography-root"`
`94`	`94`	`>`