From 8a1ee5cdca560c04e13515ba5033fbacb22a1066 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Sun, 1 Mar 2026 03:33:07 +0100
Subject: [PATCH] Add skip links for accessibility

---
 web/components/nav/sidebar.tsx |  1 +
 web/components/page-base.tsx   |  8 +++++++-
 web/components/skip-link.tsx   | 18 ++++++++++++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 web/components/skip-link.tsx

diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx
index cdcde3d2..7d6a1b9f 100644
--- a/web/components/nav/sidebar.tsx
+++ b/web/components/nav/sidebar.tsx
@@ -39,6 +39,7 @@ export default function Sidebar(props: {
 
   return (
     <nav
+      id="main-navigation"
       aria-label="Sidebar"
       className={clsx(
         'flex flex-col h-[calc(100dvh-var(--hloss))] mb-[calc(var(--bnh))] mt-[calc(var(--tnh))]',
diff --git a/web/components/page-base.tsx b/web/components/page-base.tsx
index 7577ec9f..2d7e3fe0 100644
--- a/web/components/page-base.tsx
+++ b/web/components/page-base.tsx
@@ -25,6 +25,7 @@ import {MdThumbUp} from 'react-icons/md'
 import {Col} from 'web/components/layout/col'
 import {PrivateMessagesIcon} from 'web/components/messaging/messages-icon'
 import {BottomNavBar} from 'web/components/nav/bottom-nav-bar'
+import {SkipLink} from 'web/components/skip-link'
 import {useIsMobile} from 'web/hooks/use-is-mobile'
 import {useOnline} from 'web/hooks/use-online'
 import {useProfile} from 'web/hooks/use-profile'
@@ -69,6 +70,7 @@ export function PageBase(props: {
 
   return (
     <>
+      <SkipLink />
       <GoogleOneTapLogin className="fixed bottom-12 right-4 z-[1000]" />
       <Col
         className={clsx(
@@ -94,7 +96,11 @@ export function PageBase(props: {
             className="sticky top-0 hidden self-start px-2 lg:col-span-2 lg:flex sidebar-nav bg-canvas-25"
           />
         )}
-        <main className={clsx('flex flex-1 flex-col lg:mt-6 xl:px-2', colSpan, restClassName)}>
+        <main
+          id="main-content"
+          tabIndex={-1}
+          className={clsx('flex flex-1 flex-col lg:mt-6 xl:px-2', colSpan, restClassName)}
+        >
           {children}
         </main>
       </Col>
diff --git a/web/components/skip-link.tsx b/web/components/skip-link.tsx
new file mode 100644
index 00000000..c91bb594
--- /dev/null
+++ b/web/components/skip-link.tsx
@@ -0,0 +1,18 @@
+export function SkipLink() {
+  return (
+    <>
+      <a
+        href="#main-content"
+        className="absolute -top-10 left-4 z-50 bg-primary-500 px-4 py-2 text-white transition-all focus:top-4"
+      >
+        Skip to main content
+      </a>
+      <a
+        href="#main-navigation"
+        className="absolute -top-10 left-4 z-50 bg-primary-500 px-4 py-2 text-white transition-all focus:top-4"
+      >
+        Skip to navigation
+      </a>
+    </>
+  )
+}