[WTDK] Improved hover effect footer links

mysociety · Sep 19, 2024 · bec111c · bec111c
1 parent bb68a7c
commit bec111c
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/app/assets/stylesheets/responsive/_mysoc_footer.scss b/app/assets/stylesheets/responsive/_mysoc_footer.scss
@@ -56,7 +56,8 @@ $high-dpi-screen: '-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi
   a {
     color: $mysoc-footer-link-text-color;
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: $mysoc-footer-link-hover-text-color;
     }
   }

diff --git a/app/assets/stylesheets/responsive/custom.scss b/app/assets/stylesheets/responsive/custom.scss
@@ -791,7 +791,7 @@ $mysoc-footer-background-color: $color_black;
 $mysoc-footer-text-color: lighten($color_mid_grey, 4%); // tweak color to pass WCAG AA contrast check
 $mysoc-footer-site-name-text-color: #fff;
 $mysoc-footer-link-text-color: $color_white;
-$mysoc-footer-link-hover-text-color: $button-bg;
+$mysoc-footer-link-hover-text-color: lighten($button-bg, 20%); // tweak color to pass WCAG AA contrast check
 $mysoc-footer-divider-color: #4C4C4C;
 $mysoc-footer-donate-background-color: #434343;
 $mysoc-footer-donate-text-color: #fff;