From 2e382513a0abda4fbfda2886dcde9b5a887848ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Mini=C3=A9?= <jeremy.minie@gmail.com>
Date: Wed, 6 Nov 2024 18:24:32 -0500
Subject: [PATCH] Add swup-a11y-plugin & add #page-heading class to all `h1`
 occurrences

---
 package-lock.json                  | 18 ++++++++++++++++++
 package.json                       |  1 +
 src/pages/about.astro              |  2 +-
 src/pages/index.astro              |  2 +-
 src/pages/post.astro               |  2 +-
 src/scripts/classes/Transitions.ts | 15 +++++++++++++--
 types/swup.d.ts                    |  4 ++++
 7 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6a48a1a..cd8a451 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
                 "@astrojs/check": "^0.9.4",
                 "@astrojs/tailwind": "^5.1.2",
                 "@locomotivemtl/grid-helper": "^1.0.0",
+                "@swup/a11y-plugin": "^5.0.0",
                 "@swup/head-plugin": "^2.2.0",
                 "@swup/preload-plugin": "^3.2.10",
                 "@swup/scripts-plugin": "^2.1.0",
@@ -1855,6 +1856,18 @@
             "integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==",
             "license": "MIT"
         },
+        "node_modules/@swup/a11y-plugin": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/@swup/a11y-plugin/-/a11y-plugin-5.0.0.tgz",
+            "integrity": "sha512-t0pVWAVea+Imjj05n9QMPfqZhw9i5rx7BV/l3Ejeic+X3Qs0VZwVvEJIcdqireCVJgAJGZAPlmgbiuaj5UHJaQ==",
+            "dependencies": {
+                "@swup/plugin": "^4.0.0",
+                "focus-options-polyfill": "^1.5.0"
+            },
+            "peerDependencies": {
+                "swup": "^4.0.0"
+            }
+        },
         "node_modules/@swup/head-plugin": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/@swup/head-plugin/-/head-plugin-2.2.1.tgz",
@@ -3297,6 +3310,11 @@
                 "node": ">=8"
             }
         },
+        "node_modules/focus-options-polyfill": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/focus-options-polyfill/-/focus-options-polyfill-1.6.0.tgz",
+            "integrity": "sha512-uyrAmLZrPnUItQY5wTdg31TO9GGZRGsh/jmohUg9oLmLi/sw5y7LlTV/mwyd6rvbxIOGwmRiv6LcTS8w7Bk9NQ=="
+        },
         "node_modules/foreground-child": {
             "version": "3.3.0",
             "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
diff --git a/package.json b/package.json
index 9af744e..7426fdd 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
         "@astrojs/check": "^0.9.4",
         "@astrojs/tailwind": "^5.1.2",
         "@locomotivemtl/grid-helper": "^1.0.0",
+        "@swup/a11y-plugin": "^5.0.0",
         "@swup/head-plugin": "^2.2.0",
         "@swup/preload-plugin": "^3.2.10",
         "@swup/scripts-plugin": "^2.1.0",
diff --git a/src/pages/about.astro b/src/pages/about.astro
index edc9d5d..9689c68 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -6,7 +6,7 @@ import Wysiwyg from '../components/Wysiwyg/Wysiwyg.astro';
 
 <Layout title="About">
     <header class="u-container">
-        <h1 class="u-heading-h1">About</h1>
+        <h1 id="page-heading" class="u-heading-h1">About</h1>
     </header>
 
     <div class="w-full u-mt-fluid-xl u-h-[20vh] u-bg-black"></div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 36ccb37..c11a96a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -10,7 +10,7 @@ import Layout from '../layouts/Layout.astro';
 <Layout title="Welcome to the Locomotive Astro Boilerplate.">
     <header class="u-container">
         <Icon name="logo" />
-        <h1 class="u-heading-h1">Welcome to the Locomotive Astro Boilerplate.</h1>
+        <h1 id="page-heading" class="u-heading-h1">Welcome to the Locomotive Astro Boilerplate.</h1>
 
         <button class="shortcut-functions">Test</button>
     </header>
diff --git a/src/pages/post.astro b/src/pages/post.astro
index b74c641..91cc893 100644
--- a/src/pages/post.astro
+++ b/src/pages/post.astro
@@ -32,7 +32,7 @@ const blocks = [
 <Layout title="Post title">
     <header class="u-container">
         <Icon name="logo" />
-        <h1 class="u-heading-h1">Post title</h1>
+        <h1 id="page-heading" class="u-heading-h1">Post title</h1>
     </header>
 
     <div class="u-container u-mt-fluid-xl">
diff --git a/src/scripts/classes/Transitions.ts b/src/scripts/classes/Transitions.ts
index 36da501..569c884 100644
--- a/src/scripts/classes/Transitions.ts
+++ b/src/scripts/classes/Transitions.ts
@@ -1,4 +1,5 @@
 import { toDash } from '@scripts/utils/string';
+import SwupA11yPlugin from '@swup/a11y-plugin';
 import SwupHeadPlugin from '@swup/head-plugin';
 import SwupPreloadPlugin from '@swup/preload-plugin';
 import SwupScriptsPlugin from '@swup/scripts-plugin';
@@ -55,7 +56,8 @@ export class Transitions {
                     preloadHoveredLinks: true,
                     preloadInitialPage: !import.meta.env.DEV
                 }),
-                new SwupScriptsPlugin()
+                new SwupScriptsPlugin(),
+                new SwupA11yPlugin()
             ]
         });
 
@@ -105,9 +107,18 @@ export class Transitions {
      * @see https://swup.js.org/hooks/#visit-start
      * @param visit: VisitType
      */
-    onVisitStart() {
+    onVisitStart(visit: VisitType) {
         document.documentElement.classList.add(Transitions.TRANSITION_CLASS);
         document.documentElement.classList.remove(Transitions.READY_CLASS);
+
+        if (visit.a11y) {
+            visit.a11y.focus = 'h1#page-heading';
+
+            // Best not to assume where to move the focus on fragment visits
+            if (visit.fragmentVisit) {
+                visit.a11y.focus = false;
+            }
+        }
     }
 
     /**
diff --git a/types/swup.d.ts b/types/swup.d.ts
index b54b0ff..6b77ed5 100644
--- a/types/swup.d.ts
+++ b/types/swup.d.ts
@@ -3,4 +3,8 @@ type VisitType = {
     to: {
         html: string;
     };
+    a11y?: {
+        announce: string;
+        focus: string | false;
+    };
 };