feat(seo): Update headings for research section (#3500)

ONEARMY · May 9, 2024 · d8e904f · d8e904f
2 parents 7bc0a19 + 4bcab23
commit d8e904f
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 16 deletions.
diff --git 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/.../components/src/ResearchEditorOverview/__snapshots__/ResearchEditorOverview.test.tsx.snap b/.../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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
-Original file line number
+Diff line change
@@ Expand Up / @@ -254,6 +254,7 @@ const ResearchDescription = ({ @@
                   />
                 )}
                 <Heading
+                  as="h1"
                   mt={research.researchCategory ? 1 : 2}
                   mb={1}
                   data-testid="research-title"
@@ Expand Down @@