refactored for accessiblity

public/index.html

@@ -13,7 +13,8 @@
     <link rel="mask-icon" href="<%= require('./safari-pinned-tab.svg') %>" color="#cfc4fb">
     <meta name="msapplication-TileColor" content="#cfc4fb">
     <meta name="theme-color" content="#cfc4fb">
-    <meta property="og:image" content="/src/images/pse-og.png" />
+    <meta property="og:image" content="/src/images/pse-og.png" alt="pse logo" />
+    <link rel="canonical" href="http://projects.appliedzkp.org">
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="The Privacy and Scaling Exploration Team's website. Enjoy." />

src/HomePage.css

@@ -1,7 +0,0 @@
-.Home {
-}
-
-@media screen and (max-width: 800px) {
-  .Home {
-  }
-}

src/HomePage.tsx

@@ -4,18 +4,19 @@ import Projects from './components/Projects';
 import Discord from './components/Discord';
 import Team from './components/Team';
 import Footer from './components/Footer';
-import './HomePage.css';
 
 function HomePage() {
   return (
-    <div className="Home">
+    <>
       <Navbar />
-      <Hero />
-      <Projects />
-      <Discord />
-      <Team />
+      <main>
+        <Hero />
+        <Projects />
+        <Discord />
+        <Team />
+      </main>
       <Footer />
-    </div>
+    </>
   );
 }
 

src/components/Discord.tsx

@@ -9,7 +9,7 @@ function Discord() {
       <div className="discord-text">
         Join our conversation on Discord!
       </div>
-      <a href="https://discord.gg/g5YTV7HHbh" target="_blank" rel="noopener noreferrer">
+      <a href="https://discord.gg/g5YTV7HHbh" target="_blank" rel="noopener noreferrer" aria-label="PSE Discord link" >
         <img style={{ width: '4rem' }} src={discord} alt="" />
       </a>
     </div>

src/components/Footer.css

@@ -1,12 +1,11 @@
-#footer {
+footer {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 1rem;
   border-top: 2px solid var(--gray);
-  margin: 3em 5em;
-  margin-top: 6.4125rem;
-  padding-top: 2.4rem;
+  margin: 6.5rem 5em 1rem;
+  padding-block: 2.4rem;
 }
 
 #copyright {
@@ -52,7 +51,7 @@
 }
 
 @media screen and (max-width: 800px) {
-  #footer {
+  footer {
     margin: 1em 0em;
     margin-top: 4rem;
     padding: 1em;

src/components/Footer.tsx

@@ -15,7 +15,7 @@ function copyright() {
 
 export default function Footer() {
   return (
-    <div id="footer">
+    <footer>
       <div id="copyright">
         <img src={logo} alt="Pse Logo" />
         <div id="footer-text">
@@ -33,6 +33,6 @@ export default function Footer() {
           <img src={twitter} alt="Twitter Icon" />
         </a>
       </div>
-    </div>
+    </footer>
   );
 }

src/components/Navbar.tsx

@@ -13,7 +13,7 @@ function Navbar() {
 
   return (
     <nav id="nav-menu">
-      <nav id="navbar">
+      <nav id="navbar" aria-label="Navigation for Desktop">
         <div id="anchor-links" className="nav-links">
           <a href="#top">About</a>
           <a href="#Projects">Projects</a>
@@ -24,20 +24,20 @@ function Navbar() {
         </a>
         <div id="social-links" className="nav-links">
           <a id="job-openings" href="https://jobs.lever.co/ethereumfoundation/?department=Ethereum%20Foundation&team=Privacy%20and%20Scaling%20Explorations" target="_blank" rel="noopener noreferrer">Job Openings</a>
-          <a href="https://twitter.com/PrivacyScaling" target="_blank" rel="noopener noreferrer">
+          <a href="https://twitter.com/PrivacyScaling" aria-label="PSE Twitter link" target="_blank" rel="noopener noreferrer">
             <img src={twitter} alt="" />
           </a>
-          <a href="https://discord.gg/g5YTV7HHbh" target="_blank" rel="noopener noreferrer">
+          <a href="https://discord.gg/g5YTV7HHbh" aria-label="PSE Discord link" target="_blank" rel="noopener noreferrer">
             <img src={discord} alt="" />
           </a>
         </div>
         <div id="menu-link" onClick={() => { toggleMenu() }}>{isOpen ? 'Close' : 'Menu'}</div>
       </nav>
-      <nav id="nav-menu-mobile" className={isOpen ? 'menu-open' : 'menu-closed'}>
+      <nav id="nav-menu-mobile" aria-label="Navigation for Mobile" className={isOpen ? 'menu-open' : 'menu-closed'}>
         <a href="#top">About</a>
         <a href="#Projects">Projects</a>
         <a href="#Team">Members</a>
-        <a id="job-openings" href="https://jobs.lever.co/ethereumfoundation/?department=Ethereum%20Foundation&team=Privacy%20and%20Scaling%20Explorations" target="_blank" rel="noopener noreferrer">Job Openings</a>
+        <a id="job-openings-mobile" href="https://jobs.lever.co/ethereumfoundation/?department=Ethereum%20Foundation&team=Privacy%20and%20Scaling%20Explorations" target="_blank" rel="noopener noreferrer">Job Openings</a>
       </nav>
     </nav>
   )

src/components/ProjectCard.tsx

@@ -163,7 +163,7 @@ function ProjectCard(props: ProjectCardProps) {
             <a href={props.links[link].website}>
               <div>{props.name}</div>
               <div style={{ width: '0.8125rem' }} />
-              <img src={img_link} />
+              <img src={img_link} role="presentation" />
             </a>
           )
         }