From c47343bccdf01400c0a621a9b0637d20a2f77e85 Mon Sep 17 00:00:00 2001
From: Chris Vogt <mail@chrisvogt.me>
Date: Mon, 23 Jun 2025 20:26:22 -0700
Subject: [PATCH 1/4] feat: add skip to content link for keyboard users

---
 theme/gatsby-browser.js                       | 11 ++++++++++
 theme/package.json                            |  1 +
 .../__snapshots__/layout.spec.js.snap         | 13 ++++++++++-
 theme/src/components/layout.js                | 11 +++++++++-
 theme/src/templates/home.js                   |  2 ++
 yarn.lock                                     | 22 +++++++++++++++++++
 6 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/theme/gatsby-browser.js b/theme/gatsby-browser.js
index 18dec7b6..17227e41 100644
--- a/theme/gatsby-browser.js
+++ b/theme/gatsby-browser.js
@@ -7,6 +7,7 @@ import 'lightgallery/css/lightgallery.css'
 import 'lightgallery/css/lg-thumbnail.css'
 import 'lightgallery/css/lg-zoom.css'
 import 'prismjs/themes/prism-solarizedlight.css'
+import '@reach/skip-nav/styles.css' //this will show/hide the link on focus
 
 export { default as wrapRootElement } from './wrapRootElement'
 
@@ -26,3 +27,13 @@ export const shouldUpdateScroll = ({ routerProps }) => {
   // For actual page changes, use default scroll behavior
   return true
 }
+
+// See https://fossies.org/linux/gatsby/examples/using-reach-skip-nav/README.md
+export const onRouteUpdate = ({ prevLocation }) => {
+  if (prevLocation !== null) {
+    const skipContent = document.querySelector('[data-reach-skip-nav-content]') // Comes with the <SkipNavContent> component.
+    if (skipContent) {
+      skipContent.focus()
+    }
+  }
+}
diff --git a/theme/package.json b/theme/package.json
index 3eac2952..12e34c58 100644
--- a/theme/package.json
+++ b/theme/package.json
@@ -66,6 +66,7 @@
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/mdx": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
+    "@reach/skip-nav": "^0.18.0",
     "@reduxjs/toolkit": "^2.8.2",
     "@theme-ui/color": "^0.17.2",
     "@theme-ui/components": "^0.17.2",
diff --git a/theme/src/components/__snapshots__/layout.spec.js.snap b/theme/src/components/__snapshots__/layout.spec.js.snap
index 6a69483b..0a7fd72d 100644
--- a/theme/src/components/__snapshots__/layout.spec.js.snap
+++ b/theme/src/components/__snapshots__/layout.spec.js.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Layout matches the snapshot 1`] = `
 <div
@@ -43,6 +43,13 @@ exports[`Layout matches the snapshot 1`] = `
       }
     />
   </div>
+  <a
+    data-reach-skip-link=""
+    data-reach-skip-nav-link=""
+    href="#reach-skip-nav"
+  >
+    Skip to content
+  </a>
   <header
     className="css-l5xv05"
     role="banner"
@@ -54,6 +61,10 @@ exports[`Layout matches the snapshot 1`] = `
   <main
     role="main"
   >
+    <div
+      data-reach-skip-nav-content=""
+      id="reach-skip-nav"
+    />
     <div
       className="fake-website"
     >
diff --git a/theme/src/components/layout.js b/theme/src/components/layout.js
index 9f374a71..5a957a85 100644
--- a/theme/src/components/layout.js
+++ b/theme/src/components/layout.js
@@ -2,6 +2,7 @@
 import { jsx } from 'theme-ui'
 import { useSelector } from 'react-redux'
 import React from 'react'
+import { SkipNavLink, SkipNavContent } from '@reach/skip-nav'
 
 import BackgroundPattern from './animated-background'
 import Footer from './footer'
@@ -32,6 +33,7 @@ const Layout = ({ children, disableMainWrapper, hideHeader, hideFooter }) => {
       }}
     >
       <BackgroundPattern />
+      <SkipNavLink />
 
       {/* NOTE(chrisvogt): hide the top navigation on the home and 404 pages */}
       {!hideHeader && (
@@ -40,7 +42,14 @@ const Layout = ({ children, disableMainWrapper, hideHeader, hideFooter }) => {
         </header>
       )}
 
-      {disableMainWrapper ? children : <main role='main'>{children}</main>}
+      {disableMainWrapper ? (
+        children
+      ) : (
+        <main role='main'>
+          <SkipNavContent />
+          {children}
+        </main>
+      )}
 
       {!hideFooter && <Footer />}
     </div>
diff --git a/theme/src/templates/home.js b/theme/src/templates/home.js
index bc4ee8b3..4cb2a33a 100644
--- a/theme/src/templates/home.js
+++ b/theme/src/templates/home.js
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx, Container, Grid } from 'theme-ui'
 import { graphql } from 'gatsby'
+import { SkipNavContent } from '@reach/skip-nav'
 
 import Footer from '../components/footer'
 import HCard from '../components/h-card.js'
@@ -33,6 +34,7 @@ const HomeTemplate = () => (
             <HomeNavigation />
           </aside>
           <main role='main'>
+            <SkipNavContent />
             <div
               sx={{
                 position: 'relative',
diff --git a/yarn.lock b/yarn.lock
index 71e6f82c..676e5ff3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3898,6 +3898,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@reach/polymorphic@npm:0.18.0":
+  version: 0.18.0
+  resolution: "@reach/polymorphic@npm:0.18.0"
+  peerDependencies:
+    react: ^16.8.0 || 17.x
+  checksum: 10c0/dfde6dc901005f92e16f0e3601f0c659b70ee14d91e612cd68c9a918744fd94de30e8065d73663b72964225d3476f377c650daf2ac1e256de61df9ee386aabdc
+  languageName: node
+  linkType: hard
+
+"@reach/skip-nav@npm:^0.18.0":
+  version: 0.18.0
+  resolution: "@reach/skip-nav@npm:0.18.0"
+  dependencies:
+    "@reach/polymorphic": "npm:0.18.0"
+  peerDependencies:
+    react: ^16.8.0 || 17.x
+    react-dom: ^16.8.0 || 17.x
+  checksum: 10c0/30e3d4c568093e170b9e80ee42764a080c0a15ab3f9c7edf78dcc6ebd92f156799dba0f544757b84401806765f60fe527c869ef86d5323c0a7a3bdccf1a68f85
+  languageName: node
+  linkType: hard
+
 "@reduxjs/toolkit@npm:^2.8.2":
   version: 2.8.2
   resolution: "@reduxjs/toolkit@npm:2.8.2"
@@ -11019,6 +11040,7 @@ __metadata:
     "@mdx-js/loader": "npm:^3.0.1"
     "@mdx-js/mdx": "npm:^3.0.1"
     "@mdx-js/react": "npm:^3.0.1"
+    "@reach/skip-nav": "npm:^0.18.0"
     "@reduxjs/toolkit": "npm:^2.8.2"
     "@testing-library/dom": "npm:^10.1.0"
     "@testing-library/jest-dom": "npm:^6.4.5"

From 9a15af3c99153646cb8253e41360ee7413ca9c73 Mon Sep 17 00:00:00 2001
From: Chris Vogt <mail@chrisvogt.me>
Date: Mon, 23 Jun 2025 20:31:19 -0700
Subject: [PATCH 2/4] SQUASHME: bump package and version

---
 CHANGELOG.md                 |   4 ++
 theme/gatsby-browser.spec.js | 116 +++++++++++++++++++++++++++++++++++
 theme/package.json           |   2 +-
 3 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 theme/gatsby-browser.spec.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 659db28d..14db283a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.45.0
+
+- Adds a new "Skip to content" link for keyboard-first visitors, allowing them to TAB once on the page and then skip to the <main> content.
+
 ## 0.44.4
 
 - Updates Steam widget "Recently-Played Games" to reflect MINUTES for games played.
diff --git a/theme/gatsby-browser.spec.js b/theme/gatsby-browser.spec.js
new file mode 100644
index 00000000..7e3af0b4
--- /dev/null
+++ b/theme/gatsby-browser.spec.js
@@ -0,0 +1,116 @@
+import { shouldUpdateScroll, onRouteUpdate } from './gatsby-browser'
+
+// Mock document methods
+const mockQuerySelector = jest.fn()
+const mockFocus = jest.fn()
+
+// Mock DOM element
+const mockSkipContent = {
+  focus: mockFocus
+}
+
+// Setup document mock by overriding the querySelector method
+beforeEach(() => {
+  jest.clearAllMocks()
+  // Mock the querySelector method on the existing document
+  document.querySelector = mockQuerySelector
+})
+
+// Restore the original querySelector after tests
+afterEach(() => {
+  delete document.querySelector
+})
+
+describe('gatsby-browser', () => {
+  describe('shouldUpdateScroll', () => {
+    it('should return true when routerProps is undefined', () => {
+      const result = shouldUpdateScroll({})
+      expect(result).toBe(true)
+    })
+
+    it('should return true when routerProps is null', () => {
+      const result = shouldUpdateScroll({ routerProps: null })
+      expect(result).toBe(true)
+    })
+
+    it('should return false when only query parameters change', () => {
+      const routerProps = {
+        location: { pathname: '/blog', search: '?page=2' },
+        prevLocation: { pathname: '/blog', search: '?page=1' }
+      }
+      const result = shouldUpdateScroll({ routerProps })
+      expect(result).toBe(false)
+    })
+
+    it('should return true when pathname changes', () => {
+      const routerProps = {
+        location: { pathname: '/about', search: '' },
+        prevLocation: { pathname: '/blog', search: '' }
+      }
+      const result = shouldUpdateScroll({ routerProps })
+      expect(result).toBe(true)
+    })
+
+    it('should return true when prevLocation is null', () => {
+      const routerProps = {
+        location: { pathname: '/blog', search: '' },
+        prevLocation: null
+      }
+      const result = shouldUpdateScroll({ routerProps })
+      expect(result).toBe(true)
+    })
+
+    it('should return true when prevLocation is undefined', () => {
+      const routerProps = {
+        location: { pathname: '/blog', search: '' },
+        prevLocation: undefined
+      }
+      const result = shouldUpdateScroll({ routerProps })
+      expect(result).toBe(true)
+    })
+  })
+
+  describe('onRouteUpdate', () => {
+    it('should not call focus when prevLocation is null', () => {
+      onRouteUpdate({ prevLocation: null })
+      expect(mockQuerySelector).not.toHaveBeenCalled()
+      expect(mockFocus).not.toHaveBeenCalled()
+    })
+
+    it('should call focus when prevLocation is undefined', () => {
+      mockQuerySelector.mockReturnValue(mockSkipContent)
+
+      onRouteUpdate({ prevLocation: undefined })
+
+      expect(mockQuerySelector).toHaveBeenCalledWith('[data-reach-skip-nav-content]')
+      expect(mockFocus).toHaveBeenCalled()
+    })
+
+    it('should call focus when skip content element exists', () => {
+      mockQuerySelector.mockReturnValue(mockSkipContent)
+
+      onRouteUpdate({ prevLocation: { pathname: '/previous' } })
+
+      expect(mockQuerySelector).toHaveBeenCalledWith('[data-reach-skip-nav-content]')
+      expect(mockFocus).toHaveBeenCalled()
+    })
+
+    it('should not call focus when skip content element does not exist', () => {
+      mockQuerySelector.mockReturnValue(null)
+
+      onRouteUpdate({ prevLocation: { pathname: '/previous' } })
+
+      expect(mockQuerySelector).toHaveBeenCalledWith('[data-reach-skip-nav-content]')
+      expect(mockFocus).not.toHaveBeenCalled()
+    })
+
+    it('should handle when querySelector returns undefined', () => {
+      mockQuerySelector.mockReturnValue(undefined)
+
+      onRouteUpdate({ prevLocation: { pathname: '/previous' } })
+
+      expect(mockQuerySelector).toHaveBeenCalledWith('[data-reach-skip-nav-content]')
+      expect(mockFocus).not.toHaveBeenCalled()
+    })
+  })
+})
diff --git a/theme/package.json b/theme/package.json
index 12e34c58..55274568 100644
--- a/theme/package.json
+++ b/theme/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-theme-chrisvogt",
   "description": "My personal blog and website.",
-  "version": "0.44.4",
+  "version": "0.45.0",
   "author": "Chris Vogt <mail@chrisvogt.me> (https://www.chrisvogt.me)",
   "main": "index.js",
   "license": "MIT",

From 55e2fa921e188e6af341bc1e573067a255c7aad1 Mon Sep 17 00:00:00 2001
From: Chris Vogt <mail@chrisvogt.me>
Date: Mon, 23 Jun 2025 20:43:23 -0700
Subject: [PATCH 3/4] SQUASHME: improve code coverage

---
 .../__snapshots__/layout.spec.js.snap         | 74 +++++++++++++++++++
 theme/src/components/layout.spec.js           | 19 +++++
 2 files changed, 93 insertions(+)

diff --git a/theme/src/components/__snapshots__/layout.spec.js.snap b/theme/src/components/__snapshots__/layout.spec.js.snap
index 0a7fd72d..da3b0eb8 100644
--- a/theme/src/components/__snapshots__/layout.spec.js.snap
+++ b/theme/src/components/__snapshots__/layout.spec.js.snap
@@ -81,3 +81,77 @@ exports[`Layout matches the snapshot 1`] = `
   />
 </div>
 `;
+
+exports[`Layout renders children without main wrapper when disableMainWrapper is true 1`] = `
+<div
+  className="css-ez1gh8"
+>
+  <div
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <canvas
+      style={
+        {
+          "display": "block",
+          "height": "100%",
+          "left": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": "100%",
+        }
+      }
+    />
+    <div
+      style={
+        {
+          "WebkitBackdropFilter": "blur(75px)",
+          "backdropFilter": "blur(75px)",
+          "backgroundColor": "rgba(253, 248, 245, 0.35)",
+          "height": "100%",
+          "left": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": "100%",
+        }
+      }
+    />
+  </div>
+  <a
+    data-reach-skip-link=""
+    data-reach-skip-nav-link=""
+    href="#reach-skip-nav"
+  >
+    Skip to content
+  </a>
+  <header
+    className="css-l5xv05"
+    role="banner"
+  >
+    <div
+      className="MOCK__TopNavigation"
+    />
+  </header>
+  <div
+    className="fake-website"
+  >
+    <h1>
+      Fake Website
+    </h1>
+    <p>
+      Lorum ipsum dolor sit amet.
+    </p>
+  </div>
+  <div
+    className="MOCK__Footer"
+  />
+</div>
+`;
diff --git a/theme/src/components/layout.spec.js b/theme/src/components/layout.spec.js
index dfb73cae..b20c7c53 100644
--- a/theme/src/components/layout.spec.js
+++ b/theme/src/components/layout.spec.js
@@ -57,4 +57,23 @@ describe('Layout', () => {
 
     expect(tree).toMatchSnapshot()
   })
+
+  it('renders children without main wrapper when disableMainWrapper is true', () => {
+    const tree = renderer
+      .create(
+        <Provider store={store}>
+          <ThemeUIProvider theme={mockTheme}>
+            <Layout disableMainWrapper={true}>
+              <div className='fake-website'>
+                <h1>Fake Website</h1>
+                <p>Lorum ipsum dolor sit amet.</p>
+              </div>
+            </Layout>
+          </ThemeUIProvider>
+        </Provider>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
 })

From dc4b711520310f18f608b8ea99fc89f3fea8e1c5 Mon Sep 17 00:00:00 2001
From: Chris Vogt <mail@chrisvogt.me>
Date: Mon, 23 Jun 2025 20:43:48 -0700
Subject: [PATCH 4/4] SQUASHME: 100% patch coverage

---
 .../__snapshots__/layout.spec.js.snap         | 74 +++++++++++++++++++
 theme/src/components/layout.spec.js           | 19 +++++
 2 files changed, 93 insertions(+)

diff --git a/theme/src/components/__snapshots__/layout.spec.js.snap b/theme/src/components/__snapshots__/layout.spec.js.snap
index da3b0eb8..6488431c 100644
--- a/theme/src/components/__snapshots__/layout.spec.js.snap
+++ b/theme/src/components/__snapshots__/layout.spec.js.snap
@@ -1,5 +1,79 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`Layout hides header when hideHeader is true 1`] = `
+<div
+  className="css-ez1gh8"
+>
+  <div
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <canvas
+      style={
+        {
+          "display": "block",
+          "height": "100%",
+          "left": 0,
+          "position": "absolute",
+          "top": 0,
+          "width": "100%",
+        }
+      }
+    />
+    <div
+      style={
+        {
+          "WebkitBackdropFilter": "blur(75px)",
+          "backdropFilter": "blur(75px)",
+          "backgroundColor": "rgba(253, 248, 245, 0.35)",
+          "height": "100%",
+          "left": 0,
+          "pointerEvents": "none",
+          "position": "absolute",
+          "top": 0,
+          "width": "100%",
+        }
+      }
+    />
+  </div>
+  <a
+    data-reach-skip-link=""
+    data-reach-skip-nav-link=""
+    href="#reach-skip-nav"
+  >
+    Skip to content
+  </a>
+  <main
+    role="main"
+  >
+    <div
+      data-reach-skip-nav-content=""
+      id="reach-skip-nav"
+    />
+    <div
+      className="fake-website"
+    >
+      <h1>
+        Fake Website
+      </h1>
+      <p>
+        Lorum ipsum dolor sit amet.
+      </p>
+    </div>
+  </main>
+  <div
+    className="MOCK__Footer"
+  />
+</div>
+`;
+
 exports[`Layout matches the snapshot 1`] = `
 <div
   className="css-ez1gh8"
diff --git a/theme/src/components/layout.spec.js b/theme/src/components/layout.spec.js
index b20c7c53..ac6122b3 100644
--- a/theme/src/components/layout.spec.js
+++ b/theme/src/components/layout.spec.js
@@ -76,4 +76,23 @@ describe('Layout', () => {
 
     expect(tree).toMatchSnapshot()
   })
+
+  it('hides header when hideHeader is true', () => {
+    const tree = renderer
+      .create(
+        <Provider store={store}>
+          <ThemeUIProvider theme={mockTheme}>
+            <Layout hideHeader={true}>
+              <div className='fake-website'>
+                <h1>Fake Website</h1>
+                <p>Lorum ipsum dolor sit amet.</p>
+              </div>
+            </Layout>
+          </ThemeUIProvider>
+        </Provider>
+      )
+      .toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
 })