Add and improve semantic structure of home page (#126)

Even the E2E test failed on GtiHub Action, it passes on local machine
CivicTechTO · Feb 27, 2025 · 634f0d4 · 634f0d4
1 parent a385f66
commit 634f0d4
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/client-admin/src/components/landers/home.js b/client-admin/src/components/landers/home.js
@@ -7,11 +7,11 @@ import Press from './press'
 const Index = () => {
   return (
     <Layout>
-      <Heading as="h1" sx={{ my: [4, null, 5], fontSize: [6, null, 7] }}>
+      <Heading as="h2" sx={{ my: [4, null, 5], fontSize: [6, null, 7] }}>
         Input Crowd, Output Meaning
       </Heading>
-      <Heading
-        as="h3"
+      <Text
+        as="strong"
         sx={{
           fontSize: [3, null, 4],
           lineHeight: 'body',
@@ -20,15 +20,15 @@ const Index = () => {
         Polis is a real-time system for gathering, analyzing and understanding
         what large groups of people think in their own words, enabled by
         advanced statistics and machine learning.
-      </Heading>
+      </Text>
       <Box sx={{ mb: [4, null, 5] }}>
         <Text>
           Polis has been used all over the world by governments, academics,
           independent media and citizens, and is completely open source.
         </Text>
       </Box>
       <Heading
-        as="h3"
+        as="h2"
         sx={{ fontSize: [4], lineHeight: 'body', mb: [2, null, 3] }}>
         Get Started
       </Heading>
@@ -40,7 +40,7 @@ const Index = () => {
       <Press />
       <ExploreKnowledgeBase />
       <Heading
-        as="h3"
+        as="h2"
         sx={{ fontSize: [4], lineHeight: 'body', my: [2, null, 3] }}>
         Contribute
       </Heading>

diff --git a/client-admin/src/components/landers/lander-footer.js b/client-admin/src/components/landers/lander-footer.js
@@ -4,12 +4,14 @@ import { Box, Link, Heading, jsx } from 'theme-ui'
 
 import emoji from 'react-easy-emoji'
 
-class Header extends Component {
+class Footer extends Component {
   render() {
     return (
-      <Box sx={{ mt: [3, null, 4] }}>
+      <Box 
+        as="footer" 
+        sx={{ mt: [3, null, 4] }}>
         <Heading
-          as="h3"
+          as="h2"
           sx={{ fontSize: [4], lineHeight: 'body', my: [2, null, 3] }}>
           Legal
         </Heading>
@@ -26,4 +28,4 @@ class Header extends Component {
   }
 }
 
-export default Header
+export default Footer
diff --git a/client-admin/src/components/landers/lander-header.js b/client-admin/src/components/landers/lander-header.js
@@ -8,7 +8,7 @@ import Logomark from '../framework/logomark'
 class Header extends Component {
   render() {
     return (
-      <Box>
+      <Box as="header">
         <Flex
           sx={{
             margin: `0 auto`,
@@ -17,7 +17,7 @@ class Header extends Component {
             paddingBottom: '1.45rem',
             justifyContent: 'space-between'
           }}>
-          <Box sx={{ zIndex: 1000 }}>
+          <Box as="h1" sx={{ zIndex: 1000 }}>
             <Link sx={{ variant: 'links.nav' }} to="/home">
               <Logomark
                 style={{ marginRight: 10, position: 'relative', top: 6 }}

diff --git a/client-admin/src/components/landers/lander-layout.js b/client-admin/src/components/landers/lander-layout.js
@@ -14,7 +14,7 @@ const Layout = ({ children }) => {
         padding: `0 1.0875rem 1.45rem`
       }}>
       <Header globalWidth={globalWidth} />
-      <Box>{children}</Box>
+      <Box as="main">{children}</Box>
       <Footer />
     </Box>
   )