feat: accessibility - added "skip to main content" button - add tab-f…

…ocus on main and prevent visual focus
intershop · Aug 30, 2024 · b2ba24f · b2ba24f
1 parent ca5c655
commit b2ba24f
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -6,7 +6,7 @@
   <header data-testing-id="page-header" class="top"><ish-header /></header>
 
   <div class="wrapper">
-    <main class="container main-container" id="main-content">
+    <main class="container main-container" id="main-content" tabindex="-1">
       <router-outlet />
     </main>
   </div>

diff --git a/src/styles/global/global.scss b/src/styles/global/global.scss
@@ -5,6 +5,7 @@
   min-height: 200px;
   overflow-y: auto;
   background: $color-inverse;
+  outline: none; // remove focus outline from container when using "skip to main content link"
 }
 
 .container {