From 04ee93bf05a24f9feb8509925b2e646896e95780 Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Thu, 6 Aug 2026 09:21:27 +0200
Subject: [PATCH] Make the skip control reachable in WebKit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WebKit leaves links out of the tab order unless the system's keyboard
navigation setting is on, and that setting is off by default. On macOS
the app runs in WKWebView, so a skip link written as an anchor is a skip
link nobody can reach with the keyboard — which is the one thing a skip
link exists to be.

Tab order, measured in both engines against the running app:

  chromium  A "Skip to history" -> input -> button
  webkit    input -> button          (the link is never focused)

A button is tabbable everywhere and moves focus explicitly, so it does
the job in both. The end-to-end tests that found this run next.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/App.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index cfc75b9..8f3bf97 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -53,12 +53,19 @@ export default function App() {
 
   return (
     <div class="grid h-full grid-cols-[16rem_1fr] grid-rows-[auto_1fr_auto] bg-surface text-on-surface">
-      <a
-        href="#history"
+      {/* A button rather than a link to `#history`, which is the conventional
+          shape for this. WebKit leaves links out of the tab order unless the
+          system's keyboard navigation setting is turned on, and it is off by
+          default — so on macOS, where the app runs in WKWebView, a skip link
+          is a skip link nobody can reach. A button is tabbable in every engine.
+          Verified in tests/e2e/accessibility.spec.ts against both. */}
+      <button
+        type="button"
+        onClick={() => document.querySelector<HTMLElement>("#history")?.focus()}
         class="sr-only rounded-large bg-primary px-4 py-2 text-label-lg text-on-primary focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-10"
       >
         Skip to history
-      </a>
+      </button>
 
       <header class="col-span-2 flex items-center gap-3 border-b border-outline-variant bg-surface-container px-4 py-2">
         <h1 class="text-title-md">gigit</h1>
-- 
2.51.2