accessibility fixes

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([
+  setHtmlAttributes({ lang: 'en' })
-    <script key="umami-script" async defer {...options} />
+  setPostBodyComponents([
+    <script key="umami-script" async defer {...umamiOptions} />
   ])
 }

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)

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(
+  try {
-    path.join('./public', 'feed.json'),
+    fs.writeFileSync(
-    JSON.stringify(await createJsonFeed(posts)),
+      path.join('./public', 'feed.json'),
-    'utf8'
+      JSON.stringify(await createJsonFeed(posts)),
-  ).catch((err) => {
+      'utf8'
-    throw Error('\nFailed to write JSON Feed file: ', err)
+    )
-  })
+  } catch (error) {
-
+    throw Error('\nFailed to write JSON Feed file: ', error)
+  }
   console.log('\nsuccess Generating JSON feed')
 }
 

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>
     </>

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>
   )
 }

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>
   )
 }

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:hover svg,
-.title a:focus svg {
+.title:focus svg {
   fill: var(--link-color);
 }
 

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="/" className={styles.title}>
-          <Link to="/">
+          <Logo className={styles.logo} /> kremalicious
-            <Logo className={styles.logo} /> kremalicious
+        </Link>
-          </Link>
-        </h1>
 
-        <nav role="navigation" className={styles.nav}>
+        <nav aria-label="Menu" className={styles.nav}>
           <ThemeSwitch />
           <Search />
           <Menu />

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>
   )
 }

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

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 }}
     />