From 28aac4982576cb0164766367fc07e7db12824480 Mon Sep 17 00:00:00 2001
From: sfisher <scott.fisher@ucop.edu>
Date: Fri, 15 Nov 2024 14:12:59 -0800
Subject: [PATCH] Fixes "skip to main content" link

---
 static_src/stylesheets/main.css | 18 ++++++++++++++++++
 templates/layouts/base.html     |  3 ++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/static_src/stylesheets/main.css b/static_src/stylesheets/main.css
index 15769cd9..82b6b2de 100644
--- a/static_src/stylesheets/main.css
+++ b/static_src/stylesheets/main.css
@@ -364,6 +364,24 @@ hr {
   overflow: visible;
   clip: auto; }
 
+.skip-link {
+  position: absolute;
+  top: -40px; /* Hides it above the viewport */
+  left: 0;
+  background-color: #FFF; /* High-contrast background */
+  color: #0000ff; /* High-contrast text */
+  padding: 8px 16px;
+  z-index: 1000;
+  text-decoration: none;
+}
+
+.skip-link:focus {
+  top: 0; /* Brings it into view when focused */
+  left: 0;
+  outline: 3px solid #fff; /* Optional focus outline */
+}
+
+
 .container {
   margin-right: auto;
   margin-left: auto;
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index d2fc9d81..c5037bdc 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -88,7 +88,8 @@
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
 
-  <a class="sr-only" href="#main-content">{% trans "Skip navigation" %}</a>
+      <a href="#main-content" class="skip-link" aria-label="Skip to main content">Skip to main content</a>
+
       {% include "includes/status.html" %}
       {% include "includes/top.html" %}    
   <a class="sr-only" name="main-content"></a>