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 741ff0ffc9c..5c2ec4a7c40 100644
--- a/src/assets/i18n/en.json5
+++ b/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",
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index 57a8455a193..b6b2d143d42 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%;
}