Fix accessibility issues

.github/workflows/links.yml

@@ -1,4 +1,4 @@
-name: Links
+name: Valid Links
 
 on:
   repository_dispatch:

.vscode/extensions.json

@@ -4,7 +4,8 @@
     "yzhang.markdown-all-in-one",
     "jsynowiec.vscode-insertdatestring",
     "esbenp.prettier-vscode",
-    "vunguyentuan.vscode-css-variables"
+    "vunguyentuan.vscode-css-variables",
+    "deque-systems.vscode-axe-linter"
   ],
   "unwantedRecommendations": []
 }

package.json

@@ -59,6 +59,7 @@
     "simplex-noise": "^4.0.1"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.9.1",
     "@playwright/test": "^1.44.1",
     "@radix-ui/colors": "^3.0.0",
     "@types/howler": "^2.2.11",

src/components/Notecard/NotecardComposer.tsx

@@ -103,7 +103,7 @@ export const NotecardComposer = () => {
             data-1p-ignore
           />
           <label htmlFor="special" hidden>
-            <input name="special" />
+            <input name="special" aria-hidden />
           </label>
         </div>
         <div className={styles.controls}>
@@ -115,6 +115,7 @@ export const NotecardComposer = () => {
                   viewBox="0 0 24 24"
                   width="24"
                   fill="currentColor"
+                  aria-label="Previous theme"
                 >
                   <path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path>
                 </svg>
@@ -127,6 +128,7 @@ export const NotecardComposer = () => {
                   width="24"
                   viewBox="0 0 24 24"
                   fill="currentColor"
+                  aria-label="Next theme"
                 >
                   <path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path>
                 </svg>

src/components/Webring.astro

@@ -15,7 +15,7 @@ const { title, description, url, prev, next, color } = data;
   style={`--webring-bg: var(--${color}-3); --webring-text: var(--${color}-12); --webring-hover: var(--${color}-4); --webring-border: var(--${color}-5)`}
 >
   <a class="main" href={url} rel="external">
-    <h3>{title}</h3>
+    <h2>{title}</h2>
     <span>{description}</span>
   </a>
   <a
@@ -66,7 +66,7 @@ const { title, description, url, prev, next, color } = data;
       text-align: center;
       padding: var(--space-m);
 
-      h3 {
+      h2 {
         margin: 0;
         font-size: var(--step-1);
       }

src/pages/guestbook.astro

@@ -51,6 +51,7 @@ const description = "Leave a message in eva.town.";
   ogImage="/og/guestbook.png"
   ogAlt="A collection of hand-drawn postcards. The middle one has a flower drawn with a green highlighter."
 >
+  <h1 class="visually-hidden">Guestbook</h1>
   <div class="notecards">
     <NotecardComposer client:load />
     {

src/styles/base.css

@@ -108,3 +108,13 @@ a {
   left: 0;
   right: 0;
 }
+
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

tests/accessibility.spec.ts

@@ -0,0 +1,33 @@
+import AxeBuilder from "@axe-core/playwright";
+import { expect, test } from "@playwright/test";
+
+const paths = [
+  "/",
+  "/garden",
+  "/about",
+  "/now",
+  "/guestbook",
+  "/webrings",
+  "/colophon",
+];
+
+test.describe("all pages", () => {
+  for (const path of paths) {
+    test(`${path} page should not have any automatically detectable accessibility issues`, async ({
+      page,
+    }, testInfo) => {
+      await page.goto(path);
+
+      const accessibilityScanResults = await new AxeBuilder({
+        page,
+      }).analyze();
+
+      await testInfo.attach("accessibility-scan-results", {
+        body: JSON.stringify(accessibilityScanResults, null, 2),
+        contentType: "application/json",
+      });
+
+      expect(accessibilityScanResults.violations).toHaveLength(0);
+    });
+  }
+});