use more semantic html

src/components/accordion.js

@@ -4,16 +4,11 @@ import accordionStyles from "./accordion.module.css"
 export default ({ title, children }) => {
   return (
     <div>
-      <input
+      <input type="checkbox" id={`tab-${title}`} name={`tab-${title}`} />
-        hidden={true}
-        type="checkbox"
-        id={`tab-${title}`}
-        name={`tab-${title}`}
-      />
       <label htmlFor={`tab-${title}`} className={accordionStyles.header}>
         {title}
       </label>
-      <div className={accordionStyles.content}>{children}</div>
+      <section className={accordionStyles.content}>{children}</section>
     </div>
   )
 }

src/components/accordion.module.css

@@ -12,6 +12,17 @@ label:after {
   right: 1em;
 }
 
+input:focus + label {
+  border: 1px dotted white;
+}
+
+input {
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
 input:checked + label:after {
   content: "∧";
 }

src/components/footer.js

@@ -3,7 +3,7 @@ import footerStyles from "./footer.module.css"
 import { Link } from "gatsby"
 
 export default ({ editLink }) => (
-  <div className={footerStyles.footer}>
+  <footer className={footerStyles.footer}>
     <div className={footerStyles.footerContent}>
       {editLink ? (
         <a
@@ -22,5 +22,5 @@ export default ({ editLink }) => (
         Datenschutzerklärung
       </Link>
     </div>
-  </div>
+  </footer>
 )

src/components/layout.js

@@ -6,7 +6,9 @@ import layoutStyles from "./layout.module.css"
 export default ({ path, editLink, children }) => (
   <>
     <Nav path={path} />
-    <div className={layoutStyles.layout}>{children}</div>
+    <main className={layoutStyles.layout}>
+      <article>{children}</article>
+    </main>
     <Footer editLink={editLink} />
   </>
 )

src/components/nav.js

@@ -18,12 +18,12 @@ export default ({ path }) => {
 
   return (
     <>
-      <div className={navStyles.header}>
+      <header className={navStyles.header}>
         <div className={navStyles.headerContent}>
           <span className={navStyles.chaos}>Chaostreff</span> Dortmund
         </div>
-      </div>
+      </header>
-      <div className={navStyles.nav}>
+      <nav className={navStyles.nav}>
         <div className={navStyles.navContent}>
           {pages.map(([title, link]) => (
             <Link
@@ -37,7 +37,7 @@ export default ({ path }) => {
             </Link>
           ))}
         </div>
-      </div>
+      </nav>
     </>
   )
 }