Merge pull request #2607 from alexandrevryghem/added-skip-to-main-content-button_contribute-main

Added skip to main content button

src/app/info/feedback/feedback-form/feedback-form.component.html

@@ -1,5 +1,5 @@
 <div class="row row-offcanvas row-offcanvas-right">
-  <div class="col-xs-12 col-sm-12 col-md-9 main-content">
+  <div class="col-xs-12 col-sm-12 col-md-9">
     <form class="primary" [formGroup]="feedbackForm" (ngSubmit)="createFeedback()">
       <h2>{{ 'info.feedback.head' | translate }}</h2>
       <p>{{ 'info.feedback.info' | translate }}</p>

src/app/root/root.component.html

@@ -1,3 +1,7 @@
+<button (click)="skipToMainContent()" class="btn btn-primary" id="skip-to-main-content">
+  {{ 'root.skip-to-content' | translate }}
+</button>
+
 <div class="outer-wrapper" [class.d-none]="shouldShowFullscreenLoader" [@slideSidebarPadding]="{
      value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
      params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
@@ -7,7 +11,7 @@
     <ds-system-wide-alert-banner></ds-system-wide-alert-banner>
     <ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
     <ds-themed-breadcrumbs></ds-themed-breadcrumbs>
-    <main class="main-content my-cs">
+    <main class="my-cs" id="main-content">
 
       <div class="container d-flex justify-content-center align-items-center h-100" *ngIf="shouldShowRouteLoader">
         <ds-themed-loading [showMessage]="false"></ds-themed-loading>

src/app/root/root.component.scss

@@ -0,0 +1,16 @@
+#skip-to-main-content {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  opacity: 0;
+  transition: opacity 0.3s;
+  z-index: calc(var(--ds-nav-z-index) + 1);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 0;
+
+  &:focus {
+    opacity: 1;
+    top: 0;
+  }
+}

src/app/root/root.component.ts

@@ -78,4 +78,12 @@ export class RootComponent implements OnInit {
       this.shouldShowRouteLoader = false;
     }
   }
+
+  skipToMainContent() {
+    const mainContent = document.getElementById('main-content');
+    if (mainContent) {
+      mainContent.tabIndex = -1;
+      mainContent.focus();
+    }
+  }
 }

src/assets/i18n/en.json5

@@ -3624,6 +3624,8 @@
 
   "resource-policies.table.headers.title.for.collection": "Policies for Collection",
 
+  "root.skip-to-content": "Skip to main content",
+
   "search.description": "",
 
   "search.switch-configuration.title": "Show",

src/styles/_global-styles.scss

@@ -23,7 +23,7 @@ body {
     position: relative;
 }
 
-.main-content {
+#main-content {
     z-index: var(--ds-main-z-index);
     flex: 1 1 100%;
 }