feat(accessibility): add "Skip to main content" link (#1694)

intershop · Sep 3, 2024 · aae9d6c · aae9d6c
1 parent a590a2b
commit aae9d6c
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;