From 732b65ba7c324a67fae85ba35d70b72f35d869f4 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 12 Apr 2026 14:12:32 +0200
Subject: [PATCH] feat(a11y): add skip navigation link and main landmark on
 auth pages

Adds a visually-hidden skip-to-content link as the first focusable
element. Adds id='main-content' to the <main> element. Changes
<section> to <main> on auth pages for proper landmark navigation.

Fixes WCAG 2.4.1 (Bypass Blocks).
---
 frontend/src/App.vue                           |  6 ++++++
 frontend/src/components/home/ContentAuth.vue   |  1 +
 frontend/src/components/misc/NoAuthWrapper.vue |  7 +++++--
 frontend/src/styles/global.scss                | 16 ++++++++++++++++
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 47ad77d43..08688b1bb 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -9,6 +9,12 @@
 			</div>
 		</template>
 		<template v-else>
+			<a
+				href="#main-content"
+				class="skip-to-content"
+			>
+				{{ $t('misc.skipToContent') }}
+			</a>
 			<template v-if="showAuthLayout">
 				<AppHeader />
 				<ContentAuth />
diff --git a/frontend/src/components/home/ContentAuth.vue b/frontend/src/components/home/ContentAuth.vue
index e61cef332..e42f464d7 100644
--- a/frontend/src/components/home/ContentAuth.vue
+++ b/frontend/src/components/home/ContentAuth.vue
@@ -22,6 +22,7 @@
 			/>
 			<Navigation class="d-print-none" />
 			<main
+				id="main-content"
 				class="app-content"
 				:class="[
 					{ 'is-menu-enabled': menuActive },
diff --git a/frontend/src/components/misc/NoAuthWrapper.vue b/frontend/src/components/misc/NoAuthWrapper.vue
index 5db7cc19c..4d56bd1a5 100644
--- a/frontend/src/components/misc/NoAuthWrapper.vue
+++ b/frontend/src/components/misc/NoAuthWrapper.vue
@@ -17,7 +17,10 @@
 					{{ $t("misc.welcomeBack") }}
 				</h2>
 			</section>
-			<section class="content">
+			<main
+				id="main-content"
+				class="content"
+			>
 				<div>
 					<h2
 						v-if="title"
@@ -35,7 +38,7 @@
 					<slot />
 				</div>
 				<Legal />
-			</section>
+			</main>
 		</div>
 	</div>
 </template>
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index c0957e425..71f506243 100644
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -86,3 +86,19 @@
 @import "components";
 
 @import "custom-properties";
+
+.skip-to-content {
+	position: absolute;
+	inset-block-start: -100%;
+	inset-inline-start: 0;
+	z-index: 10000;
+	padding: .5rem 1rem;
+	background: var(--primary);
+	color: var(--white);
+	font-weight: 700;
+	text-decoration: none;
+
+	&:focus {
+		inset-block-start: 0;
+	}
+}