From c4205163f9c8a7ca97466f6f78d2de51bf259e5d Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Wed, 8 Nov 2023 23:43:17 +0100
Subject: [PATCH] Added skip to main content button

---
 .../feedback-form/feedback-form.component.html   |  2 +-
 src/app/root/root.component.html                 |  6 +++++-
 src/app/root/root.component.scss                 | 16 ++++++++++++++++
 src/app/root/root.component.ts                   |  8 ++++++++
 src/assets/i18n/en.json5                         |  2 ++
 src/styles/_global-styles.scss                   |  2 +-
 6 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/app/info/feedback/feedback-form/feedback-form.component.html b/src/app/info/feedback/feedback-form/feedback-form.component.html
index 02745f2580d..a3bab3a6a38 100644
--- a/src/app/info/feedback/feedback-form/feedback-form.component.html
+++ b/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>
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index bf49e507c0b..39640ffbd49 100644
--- a/src/app/root/root.component.html
+++ b/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)}
@@ -6,7 +10,7 @@
   <div class="inner-wrapper">
     <ds-system-wide-alert-banner></ds-system-wide-alert-banner>
     <ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
-    <main class="main-content">
+    <main id="main-content">
       <ds-themed-breadcrumbs></ds-themed-breadcrumbs>
 
       <div class="container d-flex justify-content-center align-items-center h-100" *ngIf="shouldShowRouteLoader">
diff --git a/src/app/root/root.component.scss b/src/app/root/root.component.scss
index e69de29bb2d..9eb198417ad 100644
--- a/src/app/root/root.component.scss
+++ b/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;
+  }
+}
diff --git a/src/app/root/root.component.ts b/src/app/root/root.component.ts
index 3c2d65fc1f5..aef43b510a8 100644
--- a/src/app/root/root.component.ts
+++ b/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();
+    }
+  }
 }
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 6c91bae4c16..60a4c21a494 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -3610,6 +3610,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",
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index b714d399a08..a2642b1fdd3 100644
--- a/src/styles/_global-styles.scss
+++ b/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%;
     margin-top: var(--ds-content-spacing);