From 7877a7f47d44f545e3aeaffc18d4956654407483 Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Wed, 19 May 2021 19:32:38 +0200
Subject: [PATCH] Optimize a11y

---
 public/index.html                                 | 4 ++--
 src/App.module.scss                               | 2 +-
 src/components/Navigation.js                      | 6 +++---
 src/pages/About.js                                | 4 ++--
 src/pages/Home.js                                 | 4 ++--
 src/pages/NotFound.js                             | 4 ++--
 src/pages/Tools.js                                | 4 ++--
 src/tools/cyphers_and_cryptography/rot/RotTool.js | 4 ++--
 8 files changed, 16 insertions(+), 16 deletions(-)
diff --git a/public/index.html b/public/index.html
index 84e116c..2f7d1da 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,8 +12,8 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/KDT-icon@192px.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Kevin's Data-Toolbox</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700;800&display=swap" rel="stylesheet"> 
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700;800&display=swap" crossorigin="anonymous" rel="stylesheet"> 
   </head>
   <body>
     <noscript>You need to enable JavaScript to run Kevin's Data-Toolbox.</noscript>
diff --git a/src/App.module.scss b/src/App.module.scss
index 0594371..8a1bd6f 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -11,7 +11,7 @@
         flex-shrink: 0;
     }
 
-    > div {
+    > div, > main {
         flex-grow: 1;
     }
 }
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index 9549320..e986cc8 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -13,16 +13,16 @@ const Navigation = () => {
     const [langChooserActive, setLangChooserActive] = useState(false);
 
     return (
-        <div className={styles.navigation}>
+        <header className={styles.navigation}>
             <nav>
                 <Link to={"/"}>{t("site.title")}</Link>
                 <span className={styles.spacer}></span>
                 <Link to={"/tools"}>{t("site.navigation.tools")}</Link>
                 <Link to={"/about"}>{t("site.navigation.about")}</Link>
-                <Link to={"#"} onClick={() => {setLangChooserActive(true)}}><Globe/></Link>
+                <Link to={"#"} onClick={() => {setLangChooserActive(true)}} title="Change Language"><Globe/></Link>
                 <LanguageChooser active={langChooserActive} onDone={() => {setLangChooserActive(false)}} />
             </nav>
-        </div>
+        </header>
     );
 }
 
diff --git a/src/pages/About.js b/src/pages/About.js
index e6b0466..9292466 100644
--- a/src/pages/About.js
+++ b/src/pages/About.js
@@ -10,7 +10,7 @@ const AboutPage = () => {
 
     return ([
         <Helmet><title>{t("about.title")} | {t("site.title")}</title></Helmet>,
-        <div>
+        <main>
             <div className={styles.layoutBox}>
                 <h1>{t("about.title")}</h1>
 
@@ -22,7 +22,7 @@ const AboutPage = () => {
 
                 <p><Trans i18nKey={"about.visitKevinKdev"}> <a href="https://kevink.dev"> </a> </Trans></p>
             </div>
-        </div>
+        </main>
     ]);
 }
 
diff --git a/src/pages/Home.js b/src/pages/Home.js
index a2c4ce9..d045677 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -19,7 +19,7 @@ const HomePage = () => {
                 <span className={styles.heroSubtitle}>{t("home.heroSubtitle")}</span>
             </div>
         </div>,
-        <div className={styles.categoryBox}>
+        <main className={styles.categoryBox}>
             <div className={styles.layoutBox}>
                 <span className={styles.title}>{t("tools.toolCategories")}</span>
 
@@ -29,7 +29,7 @@ const HomePage = () => {
                     {/*<LinkBox to={"/tools/osm"} text={"OSM"} icon={Map} />*/}
                 </div>
             </div>
-        </div>
+        </main>
     ]);
 }
 
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
index 781abb2..8ed1729 100644
--- a/src/pages/NotFound.js
+++ b/src/pages/NotFound.js
@@ -11,12 +11,12 @@ const NotFoundPage = () => {
 
     return ([
         <Helmet><title>404: {t("system.notfound")}</title></Helmet>,
-        <div>
+        <main>
             <div className={styles.layoutBox}>
                 <h1>404: {t("system.notfound")} <Frown/></h1>
 
             </div>
-        </div>
+        </main>
     ]);
 }
 
diff --git a/src/pages/Tools.js b/src/pages/Tools.js
index 308d511..de78caf 100644
--- a/src/pages/Tools.js
+++ b/src/pages/Tools.js
@@ -23,7 +23,7 @@ const ToolsPage = () => {
 
     return ([
         <Helmet><title>{t("tools.toolList")} | {t("site.title")}</title></Helmet>,
-        <div className={styles.categoryBox}>
+        <main className={styles.categoryBox}>
             <div className={styles.layoutBox}>
                 <span className={styles.title}>{t("tools.toolList")}</span>
 
@@ -41,7 +41,7 @@ const ToolsPage = () => {
                     {toolList.length === 0 ? <span>{t("tools.noresults")}</span> : null}
                 </div>
             </div>
-        </div>
+        </main>
     ]);
 }
 
diff --git a/src/tools/cyphers_and_cryptography/rot/RotTool.js b/src/tools/cyphers_and_cryptography/rot/RotTool.js
index 0a44898..1ea0699 100644
--- a/src/tools/cyphers_and_cryptography/rot/RotTool.js
+++ b/src/tools/cyphers_and_cryptography/rot/RotTool.js
@@ -52,7 +52,7 @@ const RotTool = () => {
     }, [input, output, reversed, offset])
     
     return (
-        <div>
+        <main>
             <Helmet>
                 <title>{t("tools.cryptography.rot.title")} | {t("site.title")}</title>
                 <meta name="keywords" content="ROT, encryption, decryption, verschlüsselung, entschlüsselung, ROT-13, Caesar-cipher, cipher, caesar, cäsar-chiffre, tool" />
@@ -73,7 +73,7 @@ const RotTool = () => {
                 <label for="rot-output">{t("tools.cryptography.common.ciphertext")}</label>
                 <textarea id="rot-output" placeholder={t("tools.cryptography.common.ciphertext")} onChange={(e) => {setReversed(true); setOutput(e.currentTarget.value.toUpperCase());}} value={output}></textarea>
             </div>
-        </div>
+        </main>
     )
 }
 
