From f47762c60b588a91d596a75a0531f528aa5f8258 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 9 Oct 2023 10:07:03 +0200
Subject: [PATCH] Add global skip link

Don't use routerLink as some pages react on route params changes
Prefer to programmatically focus the main content if we can
---
 client/src/app/app.component.html |  4 +++-
 client/src/app/app.component.scss | 12 ++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 714b00186..da3c0e3dd 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -1,5 +1,7 @@
 <div *ngIf="customCSS" [innerHTML]="customCSS"></div>
 
+<a i18n class="visually-hidden-focusable skip-to-content" href="#content" (click)="$event.preventDefault(); mainContent.focus()">Skip to main content</a>
+
 <my-hotkeys-cheatsheet (hotkeysModalStateChange)="onHotkeysModalStateChange($event)"></my-hotkeys-cheatsheet>
 
 <div
@@ -30,7 +32,7 @@
   <div class="sub-header-container">
     <my-menu id="left-menu" role="navigation" aria-label="Main menu" i18n-ariaLabel [hidden]="!menu.isMenuDisplayed"></my-menu>
 
-    <main id="content" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
+    <main #mainContent tabindex="-1" id="content" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
 
       <div class="main-row">
 
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index a0882b175..95bf67cd9 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -1,6 +1,18 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
+.skip-to-content {
+  position: absolute;
+  top: 0;
+  display: block;
+  z-index: z(modal);
+  width: 100%;
+  background: pvar(--mainBackgroundColor);
+  padding: 1rem;
+  text-align: center;
+  text-decoration: underline;
+}
+
 .peertube-container {
   padding-bottom: 20px;