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

@@ -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 />

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 },

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>

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;
+	}
+}