From aae9d6c91af88c65de3eaac6b9afd908bdcd277e Mon Sep 17 00:00:00 2001
From: Lucas Hengelhaupt <LHengelhaupt@intershop.com>
Date: Wed, 21 Aug 2024 14:30:28 +0200
Subject: [PATCH] feat(accessibility): add "Skip to main content" link (#1694)

---
 src/app/app.component.html    |  6 +++++-
 src/assets/i18n/de_DE.json    |  1 +
 src/assets/i18n/en_US.json    |  1 +
 src/assets/i18n/fr_FR.json    |  1 +
 src/styles/global/global.scss | 35 +++++++++++++++++++++++++++++++++++
 5 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index f5cdebb1e6..46988e99ff 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,8 +1,12 @@
+<span data-nosnippet class="skip-to-main-content"
+  ><a [routerLink]="[]" fragment="main-content">{{ 'common.skip_to_main.link' | translate }}</a></span
+>
+
 <div [ngClass]="wrapperClasses$ | async" class="d-flex flex-column min-vh-100">
   <header data-testing-id="page-header" class="top"><ish-header /></header>
 
   <div class="wrapper">
-    <main class="container main-container">
+    <main class="container main-container" id="main-content" tabindex="-1">
       <router-outlet />
     </main>
   </div>
diff --git a/src/assets/i18n/de_DE.json b/src/assets/i18n/de_DE.json
index 7f06e839cc..fe921ca22c 100644
--- a/src/assets/i18n/de_DE.json
+++ b/src/assets/i18n/de_DE.json
@@ -854,6 +854,7 @@
   "common.date_format.letters.d": "t",
   "common.date_format.letters.y": "j",
   "common.home.link": "Home",
+  "common.skip_to_main.link": "Zum Hauptinhalt der Seite springen",
   "common.view_all.link": "Alle anzeigen",
   "common.view_all.link.label": "Alle zuletzt angesehen Produkte anzeigen",
   "cookie.consent.option.functional.description": "Diese Cookies werden verwendet, um Ihr Einkaufserlebnis zu verbessern. Bereits eingegebene Informationen (z. B. Benutzername, Sprachauswahl oder der aktuelle Standort) werden anonym gespeichert und stehen bei einem erneuten Besuch des Shops zur Verfügung.",
diff --git a/src/assets/i18n/en_US.json b/src/assets/i18n/en_US.json
index 7dbfd281f6..e3f3c812a3 100644
--- a/src/assets/i18n/en_US.json
+++ b/src/assets/i18n/en_US.json
@@ -854,6 +854,7 @@
   "common.date_format.letters.d": "d",
   "common.date_format.letters.y": "y",
   "common.home.link": "Home",
+  "common.skip_to_main.link": "Skip to main content",
   "common.view_all.link": "View all",
   "common.view_all.link.label": "View all recently viewed items",
   "cookie.consent.option.functional.description": "These cookies are used to improve your shopping experience. Information that has already been entered (e.g. user name, language selection or the current location) is stored anonymously and will already be available when the shop is visited again.",
diff --git a/src/assets/i18n/fr_FR.json b/src/assets/i18n/fr_FR.json
index 7d9b46b671..83a6514405 100644
--- a/src/assets/i18n/fr_FR.json
+++ b/src/assets/i18n/fr_FR.json
@@ -854,6 +854,7 @@
   "common.date_format.letters.d": "j",
   "common.date_format.letters.y": "a",
   "common.home.link": "Accueil",
+  "common.skip_to_main.link": "Passer au contenu principal",
   "common.view_all.link": "Tout afficher",
   "common.view_all.link.label": "Voir tous les articles récemment consultés",
   "cookie.consent.option.functional.description": "Ces cookies sont utilisés pour améliorer votre expérience d’achat. Les informations déjà saisies (par exemple, le nom d’utilisateur, le choix de la langue ou l’emplacement actuel) sont stockées de manière anonyme et sont donc déjà disponibles lorsque vous visitez à nouveau le magasin.",
diff --git a/src/styles/global/global.scss b/src/styles/global/global.scss
index e07ea28b20..46551651f5 100644
--- a/src/styles/global/global.scss
+++ b/src/styles/global/global.scss
@@ -3,7 +3,9 @@
 .main-container {
   position: relative;
   min-height: 200px;
+  overflow-y: auto;
   background: $color-inverse;
+  outline: none; // remove focus outline from container when using "skip to main content link"
 }
 
 .container {
@@ -19,6 +21,39 @@
   min-height: 50px;
 }
 
+// first link in the page to skip to main content
+.skip-to-main-content {
+  a {
+    // hidden by default
+    position: absolute;
+    top: auto;
+    z-index: -999;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    background: $color-inverse;
+    transform: translateY(-100%);
+
+    &:focus {
+      // visible on focus
+      top: 12px;
+      right: 0;
+      left: 0;
+      z-index: 999;
+      width: 100%;
+      max-width: 30%;
+      height: auto;
+      padding: $space-default;
+      margin: 0 auto;
+      overflow: auto;
+      transform: translateY(0%);
+    }
+  }
+}
+
 // Global Styles
 body {
   color: $text-color-primary;