Fix: adds skip-link to assessor and judges

Signed-off-by: Louis Kirkham <[email protected]>
bitzesty · Nov 13, 2024 · 65fda4d · 65fda4d
1 parent 592c65c
commit 65fda4d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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