From 65fda4d8edcb8309ff763e25d70981958a580142 Mon Sep 17 00:00:00 2001
From: Louis Kirkham <louis.kirkham@bitzesty.com>
Date: Wed, 13 Nov 2024 13:53:41 +0000
Subject: [PATCH] Fix: adds skip-link to assessor and judges

Signed-off-by: Louis Kirkham <louis.kirkham@bitzesty.com>
---
 app/assets/stylesheets/application-admin.scss | 32 ++++++++++++++-----
 app/views/layouts/application-admin.html.slim |  3 +-
 .../layouts/application-assessor.html.slim    |  1 +
 app/views/layouts/application-judge.html.slim |  1 +
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/application-admin.scss b/app/assets/stylesheets/application-admin.scss
index 66ed053e72..955e0c6ad5 100644
--- a/app/assets/stylesheets/application-admin.scss
+++ b/app/assets/stylesheets/application-admin.scss
@@ -54,13 +54,29 @@ $todo-black: #333;
   }
 }
 
-.skip-main-content {
-  position: absolute;
-    top: -100px;
-    z-index: 9999999999999999999999;
+.skip-link:not(:active):not(:focus) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.skip-link:focus {
+  outline: 3px solid #ffdd00;
+  outline-offset: 0;
+  background-color: #ffdd00;
+}
 
-    &:focus {
-      top: 20px;
-      left: 20px;
-    }
+.skip-link:link, .skip-link:visited, .skip-link:active, .skip-link:focus {
+  color: #0b0c0c;
 }
diff --git a/app/views/layouts/application-admin.html.slim b/app/views/layouts/application-admin.html.slim
index 59a8f768ba..9646a5953d 100644
--- a/app/views/layouts/application-admin.html.slim
+++ b/app/views/layouts/application-admin.html.slim
@@ -39,8 +39,7 @@ html.no-js
   body#admin-layout data-autosave-token="#{current_admin.try(:autosave_token)}" class="admin-layout #{controller_name}-page #{action_name}-page #{controller_name}-#{action_name}-page #{yield :page_class} #{'layout-dev' if Rails.env.development?}"
     #site-wrapper
       #site-wrapper-margin
-        a href="#main-container" class="btn btn-lg skip-main-content" onclick="document.getElementById('main-container').focus()" role="button"
-          | Skip to main content
+        <a href="#main-container" class="govuk-skip-link skip-link">Skip to main content</a>
         #site-header.clearfix
           .navbar.clearfix role="navigation"
             .container.clearfix
diff --git a/app/views/layouts/application-assessor.html.slim b/app/views/layouts/application-assessor.html.slim
index e0bce468d6..f29eb9cfc4 100644
--- a/app/views/layouts/application-assessor.html.slim
+++ b/app/views/layouts/application-assessor.html.slim
@@ -39,6 +39,7 @@ html.no-js
   body#assessor-layout data-autosave-token="#{current_assessor.try(:autosave_token)}" class="assessor-layout #{controller_name}-page #{action_name}-page #{controller_name}-#{action_name}-page #{yield :page_class} #{'layout-dev' if Rails.env.development?}"
     #site-wrapper
       #site-wrapper-margin
+        <a href="#main-container" class="govuk-skip-link skip-link">Skip to main content</a>
         #site-header
           .navbar.clearfix role="navigation"
             .container
diff --git a/app/views/layouts/application-judge.html.slim b/app/views/layouts/application-judge.html.slim
index 5559b573b7..e03345f01e 100644
--- a/app/views/layouts/application-judge.html.slim
+++ b/app/views/layouts/application-judge.html.slim
@@ -39,6 +39,7 @@ html.no-js
   body#assessor-layout data-autosave-token="#{current_judge.try(:autosave_token)}" class="assessor-layout #{controller_name}-page #{action_name}-page #{controller_name}-#{action_name}-page #{yield :page_class} #{'layout-dev' if Rails.env.development?}"
     #site-wrapper
       #site-wrapper-margin
+        <a href="#main-container" class="govuk-skip-link skip-link">Skip to main content</a>
         #site-header
           .navbar.clearfix role="navigation"
             .container