From 32b2f617f10323c8670836174cb7d82ce5cb4e0c Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 15 Sep 2020 11:01:32 +0100
Subject: [PATCH] Fix links to files in dashboard table

Includes fixes for the grey text they overlap,
when the adjacent link is focused.
---
 app/assets/stylesheets/views/dashboard.scss | 23 +++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index f694415d6..55de2bc0b 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -96,6 +96,29 @@
 
 }
 
+/* The focus state for sibling links overlaps the hint so the hint's text colour needs to adapt */
+.govuk-link:focus {
+  &.file-list-filename,
+  &.file-list-filename-large,
+  & + .file-list-hint,
+  & + .file-list-hint-large {
+    /* link needs non-static position to overlap the cell border, hint so it isn't overlapped itself */
+    position: relative;
+  }
+
+  &.file-list-filename,
+  &.file-list-filename-large {
+    /* override box-shadow to push underline down a bit */
+    box-shadow: 0 -2px $govuk-focus-colour, 0 5px $govuk-focus-text-colour;
+  }
+
+  & + .file-list-hint,
+  & + .file-list-hint-large {
+    color: $govuk-focus-text-colour;
+  }
+
+}
+
 .failure-highlight {
   @include bold-19;
   color: $error-colour;