Merge pull request #1336 from thebiggive/revert-1335-DON-889-revert

Revert "DON-889 – remove skip link for now"

src/app/app.component.html

@@ -1,3 +1,21 @@
+  <div class="skip-to-content-link">
+    <!--
+          Can't use a simple relative link for the URL because we have base href set of /d/ set in non-dev environments
+          which is needed for links to assets but would break this.
+    -->
+    <biggive-button
+      space-above="5"
+      colour-scheme="primary"
+      label="Skip to content"
+      full-width="true"
+      size="medium"
+      rounded="false"
+      [url]="currentUrl.toString() + '#content'"
+    ></biggive-button>
+
+  </div>
+
+
   <biggive-main-menu *ngIf="isDataLoaded"
     [usePresetMenuContent]="true"
     [donateUrlPrefix]="donateUriPrefix"
@@ -6,6 +24,9 @@
     [isLoggedIn]="isLoggedIn"
     ></biggive-main-menu>
 
+  <a id="content">
+    <!-- target for "skip to content" link -->
+  </a>
   <router-outlet></router-outlet>
 
   <biggive-footer

src/app/app.component.scss

@@ -1,6 +1,19 @@
+@import '../abstract';
+
 #cookie-banner {
   position: fixed;
   bottom: 3em;
   right: 3em;
   z-index: 10;
 }
+
+.skip-to-content-link {
+  z-index: 10;
+  position: absolute;
+  transform: translateY(-100%);
+  transition: transform 0.3s;
+}
+
+.skip-to-content-link:focus-within {
+  transform: translateY(0%);
+}

src/app/app.component.ts

@@ -39,6 +39,7 @@ export class AppComponent implements AfterViewInit, OnInit {
   protected readonly environment = environment;
   protected readonly flags = flags;
   protected readonly userHasExpressedCookiePreference$ = this.cookiePreferenceService.userHasExpressedCookiePreference();
+  public currentUrl: URL;
 
   constructor(
     private identityService: IdentityService,
@@ -59,6 +60,8 @@ export class AppComponent implements AfterViewInit, OnInit {
         }
       }
     });
+
+    this.currentUrl = new URL(environment.donateGlobalUriPrefix + router.url);
   }
 
   /**