From 8afed4f34b1f3048aa8c6e7ae009216f6ba990a3 Mon Sep 17 00:00:00 2001
From: Lucas <hello@lucascm.dev>
Date: Mon, 23 Sep 2024 10:55:31 +0100
Subject: [PATCH 1/2] Improves accessibility of link and fake link elements

---
 web/cobrands/sass/_base.scss | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 016b44b8c7..cbe1b6ed50 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -6,11 +6,14 @@ $heading-font: "Museo300-display", MuseoSans, Helmet, Freesans, sans-serif !defa
 $menu-image: "menu-white" !default;
 $close-menu-image: "close-#{$menu-image}" !default;
 
-$link-color: #005ea5 !default;
-$link-hover-color: #2b8cc4 !default;
+$link-color: #005A9E !default;
+$link-hover-color: #024274 !default;
+$link-focus-color: #333 !default;
 $link-visited-color: $link-color !default;
-$link-text-decoration: none !default;
+$link-text-decoration: underline !default;
 $link-hover-text-decoration: underline !default;
+$link-focus-text-decoration: underline !default;
+$link-focus-background: #ffe100 !default;
 
 $error_color: #D50404 !default;
 
@@ -253,6 +256,11 @@ a,
 .fake-link {
   text-decoration: $link-text-decoration;
   color: $link-color;
+  text-underline-offset : .1578em; // Improves readability by not overlapping with the element
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+  -webkit-text-decoration-skip: none;
+  text-decoration-skip: none; // So the text-decoration doesn't get cut
 
   &:visited {
     color: $link-visited-color;
@@ -262,6 +270,14 @@ a,
   &:active {
     text-decoration: $link-hover-text-decoration;
     color: $link-hover-color;
+    text-decoration-thickness: 3px;
+  }
+
+  &:focus {
+    text-decoration: $link-focus-text-decoration;
+    color: $link-focus-color;
+    background-color: $link-focus-background;
+    text-decoration-thickness: 3px;
   }
 }
 

From f15f3ee91477772d2676b566b9aeec6dba554e0e Mon Sep 17 00:00:00 2001
From: Lucas <hello@lucascm.dev>
Date: Mon, 23 Sep 2024 13:11:51 +0100
Subject: [PATCH 2/2] Added text-decoration variables to header links

---
 web/cobrands/sass/_base.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index cbe1b6ed50..fb5263aa50 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -45,6 +45,8 @@ $col_fixed_label_light: mix($col_fixed_label, #fff, 10%) !default;
 $form-control-border-color: #aaaaaa !default;
 $header-top-border-width: 0.25em !default;
 $header-top-border: $header-top-border-width solid $primary !default;
+$header-link-text-decoration: none !default;
+$header-link-hover-text-decoration: none !default;
 
 $container-max-width: 60em !default;
 
@@ -930,6 +932,7 @@ html.mobile.js-nav-open #js-menu-open-modal {
     color: #333;
     font-size: 1.25em;
     border-bottom: 1px solid #ccc;
+    text-decoration: $header-link-text-decoration;
   }
   a:visited {
     color: #333;
@@ -938,6 +941,7 @@ html.mobile.js-nav-open #js-menu-open-modal {
     background-color: #333;
     color: #fff;
     text-decoration: none;
+    text-decoration: $header-link-hover-text-decoration;
   }
   span {
     background-color: mix(#fff, $primary, 70%);