From 4bcab23f0dc0523260cc522e5688af6aeb9a4ee8 Mon Sep 17 00:00:00 2001
From: Louis Celier <louis.celier@gmail.com>
Date: Mon, 6 May 2024 15:31:07 +0200
Subject: [PATCH] feat(seo): update headings for research section

---
 .../ResearchEditorOverview.tsx                       |  2 +-
 .../ResearchEditorOverview.test.tsx.snap             | 12 ++++++------
 .../Research/Content/Common/PostingGuidelines.tsx    |  4 +++-
 src/pages/Research/Content/Common/Research.form.tsx  |  2 +-
 .../Research/Content/Common/ResearchUpdate.form.tsx  |  2 +-
 src/pages/Research/Content/Common/SubmitStatus.tsx   |  8 ++++----
 src/pages/Research/Content/ResearchDescription.tsx   |  1 +
 src/pages/Research/Content/ResearchList.tsx          |  1 +
 src/pages/Research/Content/ResearchUpdate.tsx        |  8 ++++++--
 9 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/ResearchEditorOverview/ResearchEditorOverview.tsx b/packages/components/src/ResearchEditorOverview/ResearchEditorOverview.tsx
index ee9879edc8..96ffd7527c 100644
--- a/packages/components/src/ResearchEditorOverview/ResearchEditorOverview.tsx
+++ b/packages/components/src/ResearchEditorOverview/ResearchEditorOverview.tsx
@@ -39,7 +39,7 @@ export const ResearchEditorOverview = (props: ResearchEditorOverviewProps) => {
   } = props
   return (
     <Card sx={{ p: 4, ...sx }}>
-      <Heading as="h3" mb={3} variant="small">
+      <Heading as="h2" mb={3} variant="small">
         Research overview
       </Heading>
       {updates?.length ? (
diff --git a/packages/components/src/ResearchEditorOverview/__snapshots__/ResearchEditorOverview.test.tsx.snap b/packages/components/src/ResearchEditorOverview/__snapshots__/ResearchEditorOverview.test.tsx.snap
index f9258746eb..a212b3a1f4 100644
--- a/packages/components/src/ResearchEditorOverview/__snapshots__/ResearchEditorOverview.test.tsx.snap
+++ b/packages/components/src/ResearchEditorOverview/__snapshots__/ResearchEditorOverview.test.tsx.snap
@@ -5,11 +5,11 @@ exports[`ResearchEditorOverview > handles empty updates 1`] = `
   <div
     class="css-vnzk4a-Box"
   >
-    <h3
+    <h2
       class="css-1fqez35-Box"
     >
       Research overview
-    </h3>
+    </h2>
     <button
       class="css-3hb35i-Box"
       data-cy="create-update"
@@ -50,11 +50,11 @@ exports[`ResearchEditorOverview > handles falsey updates 1`] = `
   <div
     class="css-vnzk4a-Box"
   >
-    <h3
+    <h2
       class="css-1fqez35-Box"
     >
       Research overview
-    </h3>
+    </h2>
     <button
       class="css-3hb35i-Box"
       data-cy="create-update"
@@ -95,11 +95,11 @@ exports[`ResearchEditorOverview > renders correctly 1`] = `
   <div
     class="css-vnzk4a-Box"
   >
-    <h3
+    <h2
       class="css-1fqez35-Box"
     >
       Research overview
-    </h3>
+    </h2>
     <ul
       class="css-47e4wa-Box"
     >
diff --git a/src/pages/Research/Content/Common/PostingGuidelines.tsx b/src/pages/Research/Content/Common/PostingGuidelines.tsx
index c8cc74e790..8944cc44db 100644
--- a/src/pages/Research/Content/Common/PostingGuidelines.tsx
+++ b/src/pages/Research/Content/Common/PostingGuidelines.tsx
@@ -4,7 +4,9 @@ import { Card, Flex, Heading, Text } from 'theme-ui'
 export const PostingGuidelines = () => (
   <Card>
     <Flex sx={{ flexDirection: 'column' }} p={4}>
-      <Heading mb={2}>How does it work?</Heading>
+      <Heading as="h2" mb={2}>
+        How does it work?
+      </Heading>
       <Text mb={1} variant="auxiliary">
         1. Choose a topic you want to research{' '}
         <span role="img" aria-label="raised-hand">
diff --git a/src/pages/Research/Content/Common/Research.form.tsx b/src/pages/Research/Content/Common/Research.form.tsx
index 044691451d..2ac7792772 100644
--- a/src/pages/Research/Content/Common/Research.form.tsx
+++ b/src/pages/Research/Content/Common/Research.form.tsx
@@ -207,7 +207,7 @@ const ResearchForm = observer((props: IProps) => {
                   <Flex sx={{ flexDirection: 'column' }}>
                     <Card sx={{ backgroundColor: 'softblue' }}>
                       <Flex px={3} py={2} sx={{ alignItems: 'center' }}>
-                        <Heading>
+                        <Heading as="h1">
                           <span>{pageTitle}</span>{' '}
                         </Heading>
                         <Box ml="15px">
diff --git a/src/pages/Research/Content/Common/ResearchUpdate.form.tsx b/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
index ee6e95676b..ac9c42a72e 100644
--- a/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
+++ b/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
@@ -234,7 +234,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
                   <Flex sx={{ flexDirection: 'column' }}>
                     <Card sx={{ bg: 'softblue' }}>
                       <Flex px={3} py={2} sx={{ alignItems: 'center' }}>
-                        <Heading>
+                        <Heading as="h1">
                           <span>{pageTitle}</span>{' '}
                         </Heading>
                         <Box ml="15px">
diff --git a/src/pages/Research/Content/Common/SubmitStatus.tsx b/src/pages/Research/Content/Common/SubmitStatus.tsx
index ae13162ea2..8e1ce00824 100644
--- a/src/pages/Research/Content/Common/SubmitStatus.tsx
+++ b/src/pages/Research/Content/Common/SubmitStatus.tsx
@@ -14,9 +14,9 @@ export const ResearchSubmitStatus = observer((props: IProps) => {
   const uploadStatus = store.researchUploadStatus
 
   return (
-    <Modal isOpen={!!uploadStatus.Start}>
+    <Modal isOpen={uploadStatus.Start}>
       <Flex sx={{ justifyContent: 'space-between' }}>
-        <Heading variant="small" sx={{ textAlign: 'center' }}>
+        <Heading as="p" variant="small" sx={{ textAlign: 'center' }}>
           Uploading Research
         </Heading>
         <Icon
@@ -61,9 +61,9 @@ export const UpdateSubmitStatus = observer((props: IProps) => {
   const uploadStatus = store.updateUploadStatus
 
   return (
-    <Modal isOpen={!!uploadStatus.Start}>
+    <Modal isOpen={uploadStatus.Start}>
       <Flex sx={{ justifyContent: 'space-between' }}>
-        <Heading variant="small" sx={{ textAlign: 'center' }}>
+        <Heading as="p" variant="small" sx={{ textAlign: 'center' }}>
           Uploading Update
         </Heading>
         <Icon
diff --git a/src/pages/Research/Content/ResearchDescription.tsx b/src/pages/Research/Content/ResearchDescription.tsx
index 940fd511eb..06f7dbbac7 100644
--- a/src/pages/Research/Content/ResearchDescription.tsx
+++ b/src/pages/Research/Content/ResearchDescription.tsx
@@ -254,6 +254,7 @@ const ResearchDescription = ({
               />
             )}
             <Heading
+              as="h1"
               mt={research.researchCategory ? 1 : 2}
               mb={1}
               data-testid="research-title"
diff --git a/src/pages/Research/Content/ResearchList.tsx b/src/pages/Research/Content/ResearchList.tsx
index 62029fc3af..4ee5251d41 100644
--- a/src/pages/Research/Content/ResearchList.tsx
+++ b/src/pages/Research/Content/ResearchList.tsx
@@ -92,6 +92,7 @@ const ResearchList = observer(() => {
     <>
       <Flex my={[18, 26]}>
         <Heading
+          as="h1"
           sx={{
             width: '100%',
             textAlign: 'center',
diff --git a/src/pages/Research/Content/ResearchUpdate.tsx b/src/pages/Research/Content/ResearchUpdate.tsx
index 368b47a4f1..6a8fd2e810 100644
--- a/src/pages/Research/Content/ResearchUpdate.tsx
+++ b/src/pages/Research/Content/ResearchUpdate.tsx
@@ -73,7 +73,9 @@ const ResearchUpdate = ({
         <Flex mx={[0, 0, 2]} sx={{ width: '100%', flex: 1 }} mb={[3, 3, 0]}>
           <FlexStepNumber sx={{ height: 'fit-content' }}>
             <Card py={3} px={4} sx={{ width: '100%', textAlign: 'center' }}>
-              <Heading mb={0}>{updateIndex + 1}</Heading>
+              <Heading as="p" mb={0}>
+                {updateIndex + 1}
+              </Heading>
             </Card>
           </FlexStepNumber>
         </Flex>
@@ -98,7 +100,9 @@ const ResearchUpdate = ({
                     </Box>
                   ) : null}
 
-                  <Heading sx={{ mb: 2 }}>{update.title}</Heading>
+                  <Heading as="h2" sx={{ mb: 2 }}>
+                    {update.title}
+                  </Heading>
                 </Box>
 
                 <Flex