From 6528633a13dd30fcd5259a4eca06ae60ca2cccba Mon Sep 17 00:00:00 2001
From: gingervitis <omqmail@gmail.com>
Date: Sat, 4 Jan 2025 20:24:27 -0800
Subject: [PATCH] fix skip link visibility and it moving logo upon focus
 (#4078)

* fix skip link visibility and it moving logo upon focus

* update color
---
 web/components/ui/Header/Header.module.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss
index 85775c7b2..8a75c5e0b 100644
--- a/web/components/ui/Header/Header.module.scss
+++ b/web/components/ui/Header/Header.module.scss
@@ -59,17 +59,23 @@
 
 .skipLink {
   position: absolute;
+  z-index: 2;
   left: -10000px;
-  top: auto;
+  top: var(--header-height);
   width: 1px;
   height: 1px;
   overflow: hidden;
+  background-color: var(--theme-color-background-header);
+  color: var(--theme-color-components-text-on-dark);
+  padding: 8px;
+  border-radius: var(--theme-rounded-corners);
 }
 
 .skipLink:focus {
-  position: static;
   width: auto;
   height: auto;
+  left: var(--content-padding);
+  outline: var(--theme-color-components-text-on-dark) solid 2px;
 }
 
 .offlineTag {