From c9a3f1cc280dfc82717216819f9e5e9e7d89cf32 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 19 Nov 2022 16:31:07 +0000
Subject: [PATCH] accessibility fixes

---
 gatsby-ssr.tsx                                |  9 +++++----
 gatsby/createExif.ts                          |  5 +----
 gatsby/feeds.ts                               | 20 +++++++++----------
 src/components/molecules/Menu.tsx             |  2 +-
 src/components/molecules/RelatedPosts.tsx     |  4 ++--
 src/components/molecules/ThemeSwitch.tsx      |  4 ++--
 src/components/organisms/Header.module.css    | 10 +++-------
 src/components/organisms/Header.tsx           | 10 ++++------
 src/components/templates/Post/Actions.tsx     |  4 ++--
 src/components/templates/Post/LinkActions.tsx |  4 ++--
 src/components/templates/Post/Toc.tsx         |  1 +
 11 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/gatsby-ssr.tsx b/gatsby-ssr.tsx
index 79043c3b..e188d354 100644
--- a/gatsby-ssr.tsx
+++ b/gatsby-ssr.tsx
@@ -6,19 +6,20 @@ import { UMAMI_SCRIPT_URL, UMAMI_WEBSITE_ID } from './src/helpers/umami'
 export const wrapPageElement: GatsbySSR['wrapPageElement'] =
   wrapPageElementWithLayout
 
-export const onRenderBody = ({ setPostBodyComponents }) => {
+export const onRenderBody = ({ setPostBodyComponents, setHtmlAttributes }) => {
   const isEnabled = process.env.NODE_ENV === 'production'
 
   if (!isEnabled) {
     return null
   }
 
-  const options = {
+  const umamiOptions = {
     src: UMAMI_SCRIPT_URL,
     'data-website-id': UMAMI_WEBSITE_ID
   }
 
-  return setPostBodyComponents([
-    <script key="umami-script" async defer {...options} />
+  setHtmlAttributes({ lang: 'en' })
+  setPostBodyComponents([
+    <script key="umami-script" async defer {...umamiOptions} />
   ])
 }
diff --git a/gatsby/createExif.ts b/gatsby/createExif.ts
index 8f103730..5b717894 100644
--- a/gatsby/createExif.ts
+++ b/gatsby/createExif.ts
@@ -1,13 +1,10 @@
 import fs from 'fs'
-import util from 'util'
 import fastExif from 'fast-exif'
 import Fraction from 'fraction.js'
 import getCoordinates from 'dms2dec'
 import iptc from 'node-iptc'
 import type { Actions, NodePluginArgs, Node } from 'gatsby'
 
-const readFile = util.promisify(fs.readFile)
-
 export const createExif = async (
   node: Node,
   actions: Actions,
@@ -19,7 +16,7 @@ export const createExif = async (
     if (!exifData) return
 
     // iptc
-    const file = await readFile(node.absolutePath as string)
+    const file = fs.readFileSync(node.absolutePath as string)
     const iptcData = iptc(file)
 
     createNodes(exifData, iptcData, node, actions, createNodeId)
diff --git a/gatsby/feeds.ts b/gatsby/feeds.ts
index 14dd4f93..b2566118 100644
--- a/gatsby/feeds.ts
+++ b/gatsby/feeds.ts
@@ -1,10 +1,7 @@
 import fs from 'fs'
-import util from 'util'
 import path from 'path'
 import config from '../config'
 
-const writeFile = util.promisify(fs.writeFile)
-
 const feedContent = (
   edge: Queries.AllContentFeedQuery['allMarkdownRemark']['edges'][0]
 ) => {
@@ -63,14 +60,15 @@ const generateJsonFeed = async (
 ) => {
   if (!posts) return
 
-  await writeFile(
-    path.join('./public', 'feed.json'),
-    JSON.stringify(await createJsonFeed(posts)),
-    'utf8'
-  ).catch((err) => {
-    throw Error('\nFailed to write JSON Feed file: ', err)
-  })
-
+  try {
+    fs.writeFileSync(
+      path.join('./public', 'feed.json'),
+      JSON.stringify(await createJsonFeed(posts)),
+      'utf8'
+    )
+  } catch (error) {
+    throw Error('\nFailed to write JSON Feed file: ', error)
+  }
   console.log('\nsuccess Generating JSON feed')
 }
 
diff --git a/src/components/molecules/Menu.tsx b/src/components/molecules/Menu.tsx
index e634641f..85347e45 100644
--- a/src/components/molecules/Menu.tsx
+++ b/src/components/molecules/Menu.tsx
@@ -31,7 +31,7 @@ export default function Menu(): ReactElement {
   return (
     <>
       <Hamburger onClick={toggleMenu} />
-      <nav className={styles.menu}>
+      <nav aria-label="Pages" className={styles.menu}>
         <ul>{MenuItems}</ul>
       </nav>
     </>
diff --git a/src/components/molecules/RelatedPosts.tsx b/src/components/molecules/RelatedPosts.tsx
index 3c1d9e0b..a568080e 100644
--- a/src/components/molecules/RelatedPosts.tsx
+++ b/src/components/molecules/RelatedPosts.tsx
@@ -79,7 +79,7 @@ export default function RelatedPosts({
   }
 
   return (
-    <aside className={styles.relatedPosts}>
+    <section className={styles.relatedPosts}>
       <h1 className={styles.title}>
         Related {isPhotos ? 'Photos' : 'Posts'}{' '}
         <button className={styles.button} onClick={() => refreshPosts()}>
@@ -97,6 +97,6 @@ export default function RelatedPosts({
           </li>
         ))}
       </ul>
-    </aside>
+    </section>
   )
 }
diff --git a/src/components/molecules/ThemeSwitch.tsx b/src/components/molecules/ThemeSwitch.tsx
index 222bee88..9cd675b9 100644
--- a/src/components/molecules/ThemeSwitch.tsx
+++ b/src/components/molecules/ThemeSwitch.tsx
@@ -7,7 +7,7 @@ export default function ThemeSwitch(): ReactElement {
   const { isDarkMode, setIsDarkMode } = useDarkMode()
 
   return (
-    <aside className={styles.themeSwitch} title="Toggle Dark Mode">
+    <div className={styles.themeSwitch} title="Toggle Dark Mode">
       <label
         htmlFor="toggle"
         className={styles.checkbox}
@@ -28,6 +28,6 @@ export default function ThemeSwitch(): ReactElement {
           {isDarkMode ? <Icon name="Sun" /> : <Icon name="Moon" />}
         </div>
       </label>
-    </aside>
+    </div>
   )
 }
diff --git a/src/components/organisms/Header.module.css b/src/components/organisms/Header.module.css
index fe166136..b7ce3f3c 100644
--- a/src/components/organisms/Header.module.css
+++ b/src/components/organisms/Header.module.css
@@ -24,10 +24,6 @@
 ///////////////////////////////////// */
 
 .title {
-  margin: 0;
-}
-
-.title a {
   display: block;
   /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
   font: 0/0 a;
@@ -40,13 +36,13 @@
 }
 
 @media (min-width: 40rem) {
-  .title a {
+  .title {
     width: 212px;
   }
 }
 
-.title a:hover svg,
-.title a:focus svg {
+.title:hover svg,
+.title:focus svg {
   fill: var(--link-color);
 }
 
diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx
index ba436d02..86e3b6e7 100644
--- a/src/components/organisms/Header.tsx
+++ b/src/components/organisms/Header.tsx
@@ -10,13 +10,11 @@ export default function Header(): JSX.Element {
   return (
     <header role="banner" className={styles.header}>
       <div className={styles.headerContent}>
-        <h1 className={styles.title}>
-          <Link to="/">
-            <Logo className={styles.logo} /> kremalicious
-          </Link>
-        </h1>
+        <Link to="/" className={styles.title}>
+          <Logo className={styles.logo} /> kremalicious
+        </Link>
 
-        <nav role="navigation" className={styles.nav}>
+        <nav aria-label="Menu" className={styles.nav}>
           <ThemeSwitch />
           <Search />
           <Menu />
diff --git a/src/components/templates/Post/Actions.tsx b/src/components/templates/Post/Actions.tsx
index aa338c6f..78bce7a3 100644
--- a/src/components/templates/Post/Actions.tsx
+++ b/src/components/templates/Post/Actions.tsx
@@ -32,7 +32,7 @@ export default function PostActions({
   const urlTwitter = `https://twitter.com/intent/tweet?text=@kremalicious&url=${siteUrl}${slug}`
 
   return (
-    <aside className={styles.actions}>
+    <section className={styles.actions}>
       <Action
         title="Have a comment?"
         text="Hit me up @kremalicious"
@@ -51,6 +51,6 @@ export default function PostActions({
         url={githubLink}
         icon="GitHub"
       />
-    </aside>
+    </section>
   )
 }
diff --git a/src/components/templates/Post/LinkActions.tsx b/src/components/templates/Post/LinkActions.tsx
index b26fac05..4274cfda 100644
--- a/src/components/templates/Post/LinkActions.tsx
+++ b/src/components/templates/Post/LinkActions.tsx
@@ -11,14 +11,14 @@ const PostLinkActions = ({
   linkurl?: string
   slug: string
 }): ReactElement => (
-  <aside className={styles.postLinkActions}>
+  <div className={styles.postLinkActions}>
     <a className={stylesMore.postMore} href={linkurl}>
       Go to source <Icon name="ExternalLink" />
     </a>
     <Link to={slug} rel="tooltip" title="Permalink">
       <Icon name="Link" />
     </Link>
-  </aside>
+  </div>
 )
 
 export default PostLinkActions
diff --git a/src/components/templates/Post/Toc.tsx b/src/components/templates/Post/Toc.tsx
index 166bf732..e4ddf784 100644
--- a/src/components/templates/Post/Toc.tsx
+++ b/src/components/templates/Post/Toc.tsx
@@ -8,6 +8,7 @@ const PostToc = ({
 }): ReactElement => {
   return (
     <nav
+      aria-label="Table of Contents"
       className={styles.toc}
       dangerouslySetInnerHTML={{ __html: tableOfContents }}
     />