From 537fe6946295d33843b5635f30fe08ae0e31ae1b Mon Sep 17 00:00:00 2001
From: neri <neri@ctdo.de>
Date: Thu, 23 Jan 2020 22:06:44 +0100
Subject: [PATCH] use more semantic html

---
 src/components/accordion.js         |  9 ++-------
 src/components/accordion.module.css | 11 +++++++++++
 src/components/footer.js            |  4 ++--
 src/components/layout.js            |  4 +++-
 src/components/nav.js               |  8 ++++----
 5 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/accordion.js b/src/components/accordion.js
index 643e3e2..72026b3 100644
--- a/src/components/accordion.js
+++ b/src/components/accordion.js
@@ -4,16 +4,11 @@ import accordionStyles from "./accordion.module.css"
 export default ({ title, children }) => {
   return (
     <div>
-      <input
-        hidden={true}
-        type="checkbox"
-        id={`tab-${title}`}
-        name={`tab-${title}`}
-      />
+      <input 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>
   )
 }
diff --git a/src/components/accordion.module.css b/src/components/accordion.module.css
index 04988b1..5369c58 100644
--- a/src/components/accordion.module.css
+++ b/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: "∧";
 }
diff --git a/src/components/footer.js b/src/components/footer.js
index 626eabf..cca20c0 100644
--- a/src/components/footer.js
+++ b/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>
 )
diff --git a/src/components/layout.js b/src/components/layout.js
index 8abcc28..1a2010d 100644
--- a/src/components/layout.js
+++ b/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} />
   </>
 )
diff --git a/src/components/nav.js b/src/components/nav.js
index a0e1e96..50e1597 100644
--- a/src/components/nav.js
+++ b/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>
-      <div className={navStyles.nav}>
+      </header>
+      <nav className={navStyles.nav}>
         <div className={navStyles.navContent}>
           {pages.map(([title, link]) => (
             <Link
@@ -37,7 +37,7 @@ export default ({ path }) => {
             </Link>
           ))}
         </div>
-      </div>
+      </nav>
     </>
   )
 }